Print this page
Thursday, 24 January 2013 13:55

how to use jquery ajax in asp.net page

Written by 
Rate this item
(0 votes)

Ajax is the best technique for showing & updating
data without page refresh.
jquery ajax make things possible easier way.in this
post i will show how to pass data via jquery ajax
and get back data.

in asp.net page -

<input type="button" id="Result" value="click to ajax call" />
<div id="show"></div>
<div id="progress"></div>

in head section -

<script type="text/javascript">
$(document).ready(function () {
// Add the page method call as onclick handler for the div.
$("#Result").click(function () {
$.ajax({
type: "POST",
url: "JqueryAjax.aspx/GetDate",
data: '{ "test":"' + 123 + '", "locale":"c#" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return values
$("#show").text(msg.d);
}

});
});
});
</script>

In code behind page -

[WebMethod]
public static string GetDate(int test, string locale)
{
return test.ToString()+locale;
}

so the above method must be a web method.this line in the ajax call -
data: '{ "test":"' + 123 + '", "locale":"c#" }' took me too much time
to find proper writing format.

enjoy....

Read 3344 times
Super User

Email mridulcs@yahoo.com
7