Amila Thennakoon
Amila Thennakoon

Reputation: 417

How to submit asp.net form data using jquery ajax feature

dear all i want to know how to submit asp.net form data using jquery ajax functionality and how im get that json data in the server side

?

Upvotes: 0

Views: 12049

Answers (2)

Amin Sayed
Amin Sayed

Reputation: 1260

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#<%=btnSubmit.ClientID %>").click(
  function()
  {
    $.ajax
    ({
         type: "POST",
         contentType: "application/json; charset=utf-8",
         url: "Default.aspx/AcceptFormData",
         data: "{'funcParam':'"+$('#formName').serialize()+"'}",
         dataType: "json",
         success: function(msg)
         {
              var msgFromASPXFunction = msg.d
         }
     });
  }
 );
});


[System.Web.Services.WebMethod]
public static string AcceptFormData(string funcParam)
{
  // this is your server side function
  //the data you will get will be in format e.g. a=1&b=2&c=3&d=4&e=5 inside funcParam variable
  return "Data Submitted";

}

Just note the server-side function name should match the parameter you specified in the url property of $.ajax function of jQuery. (In above case it is "AcceptFormData"

Also the parameter name should be same as of the server side function parameter. In this case it is "funcParam".

Just compare the $.ajax and server-side function in this code.

Regards,

Amin Sayed

(Note: Please mark if it is helpful)

Upvotes: 2

sikender
sikender

Reputation: 5921

<form action="#" id="example-form">

...

</form>

<script type="text/javascript">

    $('#example-form').submit(function(){

        // block form

        $.post('putUrlHere', $('#example-form').serialize(), function(data) {
            //call back happens here.  Unblock form/show result
        });

        return false; // this prevents regular post, forcing ajax post.

    });

</script>

REFERENCE : http://forums.asp.net/t/1611677.aspx/1?Jquery+with+ASP+NET+Form+submit

Otherwise Check : jquery + ajax combine..... http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Upvotes: 1

Related Questions