How to call server side function using jquery wth out page refresh?
+4
A:
Use AJAX:
$.get('somepage.aspx', {foo: 'bar'}, function(data){
alert('the page returned this: '+data);
});
Then set up somepage.aspx to execute the function and return the data (if needed).
For more on jQuery AJAX see this: http://docs.jquery.com/Ajax
Pim Jager
2009-05-02 10:29:47
+1
A:
if you have server-only methods that you need to call, use a WebMethod on the server side, and ajax on the client. reading this my be useful.
bye
pomarc
2009-05-02 10:49:06
Doesn't have to be a webservice / webmethod simple jQuery $.get
Chad Grant
2009-05-02 10:57:04
+1
A:
I saw that you are using asp.net, so you have several options:
- To get any resource other than the current aspx page, use $.get(). This could be an image file or the output from another aspx page.
- If you need to round trip your current page and make use of security for you current page, etc. then you can call a web method. Note that your ViewState will not be available during your call to the web method. The article I linked to is from Dave Ward's Encosia and he has an extensive series on making AJAX calls with jQuery and Asp.net.
David Robbins
2009-05-02 11:09:14
+1
A:
Here's how you could call a custom ASP.NET PageMethod with jQuery and Microsoft Ajax:
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.json.org/json2.js"></script>
</head>
<script runat="server">
/// <summary>
/// A custom PageMethod that will echo back the argument
/// </summary>
/// <param name="argument">some arbitrary string</param>
/// <returns></returns>
[System.Web.Services.WebMethod]
public static string MyPageMethod(string argument)
{
return "hello " + argument;
}
</script>
<script type="text/javascript">
function callPageMthodWithMicrosoftAjax(argument) {
PageMethods.MyPageMethod(argument, function(result) {
document.getElementById('result').innerHTML = result;
}, function(error) {
alert(error.get_message());
});
}
function callPageMthodWithjQueryAjax(argument) {
jQuery.ajax({
url: '/default.aspx/MyPageMethod',
type: 'post',
contentType: 'application/json',
data: JSON.stringify({ argument: argument }),
dataType: 'json',
processData: false,
success: function(data, textStatus) {
jQuery('#result').html(data.d);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var jsonError = JSON.parse(XMLHttpRequest.responseText);
alert(jsonError.Message);
}
});
}
</script>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true" />
<a href="#" onclick="callPageMthodWithMicrosoftAjax('Microsoft Ajax')">call PageMethod with Microsoft Ajax</a>
<br />
<a href="#" onclick="callPageMthodWithjQueryAjax('jQuery')">call PageMethod with jQuery</a>
<div id="result"></div>
</form>
</body>
</html>
Darin Dimitrov
2009-05-02 11:22:37
Good point @Pim, it was copy paste from the callPageMthodWithMicrosoftAjax method in which it is supposed jQuery is not used. I modified my post accordingly.
Darin Dimitrov
2009-05-02 16:59:41