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 1681 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments