Using ASP.NET Ajax it is really easy to excute a server side method and return some form data. In some cases you can implement Ajax functionality without chaning your code. It is more efficent than submitting the whole page but if you are using an UpdatePanel the server returns all of the Html contained in the UpdatePanel. This is not so bad if you only have a few controls but if you have a table witha number of fields the data returned can be quite large. Taking that one step further is client side binding to load form data.
Why would you want to do this?
- Only the serialized Json data is transmitted between your browser and the server.
- No need to maintain view state unless you reload your page.
In a previous post Using jQuery AJAX and Page Methods with a ASP.NET WebService I described how to call ASP.NET Page Methods from JavaScript code using jQuery and ASP.NET Page Methods.In that example I was returned a list of items from the server, simple enough. I'm keen on jQuery so I'm going to give it a go using jQuery.
In this example I query a WebMethod for a class via an ID using jQuery and then bind the result it to a simple WebForm.
Create an ASP.NET WebMethod
| |
| [Serializable] |
| public class Profile |
| { |
| public int ID { get; set; } |
| public string Name { get; set; } |
| public string Title { get; set; } |
| public string Email { get; set; } |
| public string Address { get; set; } |
| public bool Enabled { get; set; } |
| } |
| |
| public partial class Test : Page |
| { |
| [WebMethod] |
| public static Profile GetProfile(int id) |
| { |
| return new Profile() { ID = id, Name = "John Smith", Title = "Mr", Email = "john@xyz.com", Address = "125 Smith St
Smithville", Enabled = true }; |
| } |
| } |
You can see in this example the WebMethod doesn't really query a database but you could perform that function instead of just creating a class as I have.
The Client Side JavaScript and Html
| script type="text/javascript"> |
| |
| function getProfile(id) |
| { |
| $(document).ajaxError(jQueryFailed); |
| $.pageMethod("GetProfile", "{'id':'"+id+"'}", jQuerySucceeded); |
| } |
| |
| function bindForm(profile) |
| { |
| $("#ProfileID").val(profile.ID); |
| $("#Name").val(profile.Name); |
| $("#Title input").val([profile.Title]); |
| $("#Email").val(profile.Email); |
| $("#Address").val(profile.Address); |
| $("#Enabled").attr("checked",profile.Enabled); |
| } |
| |
| function jQuerySucceeded(result) { |
| bindForm(result.d); |
| } |
| |
| function jQueryFailed(event, XMLHttpRequest, ajaxOptions, thrownError) { |
| alert(eval("("+XMLHttpRequest.responseText+")").Message); |
| } |
| script> |
| |
| table> |
| tr> |
| td> |
| ID: |
| td> |
| td> |
| asp:TextBox ID="ProfileID" runat="server">asp:TextBox> |
| td> |
| tr> |
| tr> |
| td> |
| Name: |
| td> |
| td> |
| asp:TextBox ID="Name" runat="server">asp:TextBox> |
| td> |
| tr> |
| tr> |
| td> |
| Title: |
| td> |
| td> |
| asp:RadioButtonList ID="Title" runat="server" RepeatDirection="Horizontal" |
| RepeatLayout="Flow"> |
| asp:ListItem>Mrasp:ListItem> |
| asp:ListItem>Mrsasp:ListItem> |
| asp:ListItem>Missasp:ListItem> |
| asp:RadioButtonList> |
| td> |
| tr> |
| td> |
| Email: |
| td> |
| td> |
| asp:TextBox ID="Email" runat="server">asp:TextBox> |
| td> |
| tr> |
| tr> |
| td> |
| Address: |
| td> |
| td> |
| asp:TextBox ID="Address" runat="server" Rows="3" TextMode="MultiLine">asp:TextBox> |
| td> |
| tr> |
| tr> |
| td> |
| Enabled: |
| td> |
| td> |
| asp:CheckBox ID="Enabled" runat="server" value="true" /> |
| td> |
| tr> |
| tr> |
| td> |
| td> |
| td> |
| input onclick="getProfile(3)" type="button" value="Load" /> |
| td> |
| tr> |
| table> |
NOTE: Its important to point out here if you are using this code in a control that implements the INamingContainer Interface you will need to obtain the ClientID of each control you are binding to.
The JavaScript that binds the JSON result to the WebForm controls is quite straight forward. It should be an easy task to create a generic form binder . There is already a jQuery databind plugin available to manage this for you, I'm yet to try it but the demo looks good.