ASP.NET : Form posting via jQuery

Question

I have an ASP.NET page with 2 ASP.NET text boxes and one ASP.NET drop downlist I want toi use jQuery form posting instead of normal ASP.NET post back.Can anyone guide me how to do this ? How can i access the server side controls in the action page ? I dont want to pass everything via query string. Kindly guide me how to go ahead ? Thanks in advance

Answer 1

you can use simple jQuery selectors to select Server Side Controls suppose you have following textbox on your page:

<asp:TextBox id="userName" runat="server" />

in jQuery you can access it like this:

var valueOfTextBox = $("input[id$='userName']").val();
//OR
var valueOfTextBox = $("input[id$='userName']").attr("value");

if you have few controls on page then this technique is okay but for large forms please use this instead:

var valueOfTextBox = $("#<%= userName.ClientID %>").val();
//OR
var valueOfTextBox = $("#<%= userName.ClientID %>").attr("value");

There is huge performance gain, as explained by Dave here.

You can find more about jQuery selector syntax here.

If you want to post form via jquery AJAX then use this code:

  $("#form1").submit(function(){//Where form1 is your form's id
    var a=$("input[id$='userName']").val();
    var b=$("input[id$='userId']").val();
    $.ajax({
       type: "POST",
       url: "yourPage.aspx",
       data: "name=" + a+"&id=" + b,
       success: function(msg){
         alert( "Data Saved: " + msg );
       }
     });
  });

More details about jQuery AJAX are here.

You can also use jquery.form plugin to automate the things.