Using jQuery Serialize in ASP.NET

Question

what is the usage of jQuery Serialize API in ASP.NET ? how can we use it ? Is it possible to convert serialized object to .NET strong type object? Or map the serialized object to into .NET equivalent object? for example we have two field in a 'member' table. Name , Age. so we have these properties in Member Entity ;

    public string Name { get; set; }
public string Age { get; set; }

And we have these codes in our presentation layer :

       <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
        <asp:Button ID="btnSave" runat="server" Text="Button" />

When I serializing form using this code :

$.fn.serializeNoViewState = function()
{
    return this.find("input,textarea,select,hidden")
               .not("[type=hidden][name^=__]")
               .serialize();    
}

the Serialized object will be like this :

ctl00%24MainContent%24txtName=Pitter&ctl00%24MainContent%24txtAge=20
so is this string or JSON object? I think its string. and now what are the benefits of this Serialized output for us? I know that we are able to pas this output to server using jQuery AJAX. but how can we use it Server Side?

Please notify me if my question is not clear or needs more information. — Shahin
– Shahin, Commented Apr 10, 2011 at 17:03

Darin Dimitrov · Accepted Answer · 2011-04-10 17:03:43Z

As the documentation explains it the .serialize() method is passed a form DOM element and it converts it into a URL encoded string of key/value pairs that you could pass to the server. But if you want to work with strongly typed objects in ASP.NET you could take a look at Page Methods. For example suppose that you have defined the following type:

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

you could then have a page method:

public partial class _Default : Page 
{
    [WebMethod]
    public static string Process(Person person)
    {
         // TODO: do some processing
         return DateTime.Now.ToString();
    }

    ...
}

and to invoke this method using jQuery and JSON request:

$.ajax({
    type: 'POST',
    url: 'Default.aspx/Process',
    data: JSON.stringify({
        name: 'foo', // you could fetch those values dynamically
        age: 25
    }),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(msg) {
        // msg.d will contain the object returned from the server
        // in our example it's a simple string but you could use any
        // complex type you like (well almost any, it must be JSON serializable)
        alert(msg.d);
    }
});

Thank you. was so useful. you commented '// you could fetch those values dynamically' would you please describe more?
@shaahin, what I meant was that you could bind those parameters to input fields in your form. For example: name: $('.name').val(). In this example I use a class selector as ASP.NET mangles names and ids of input elements.

Collectives™ on Stack Overflow

Using jQuery Serialize in ASP.NET

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related