How
to call an ASP.NET c# method using javascript
PageMethod an easier and faster approach for Asp.Net AJAX We can
easily improve user experience and performance of web applications by
unleashing the power of AJAX. One of the best things which I like in AJAX is
PageMethod.
PageMethod is a way through which we can expose server side
page's method in java script. This brings so many opportunities we can perform
lots of operations without using slow and annoying post backs.
In this post I am showing the basic use of ScriptManager and
PageMethod. In this example I am creating a User Registration form, in which
user can register against his email address and password. Here is the markup of
the page which I am going to develop:-
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 200px;">
<asp:Label
ID="lblEmailAddress" runat="server" Text="Email Address"></asp:Label>
<asp:TextBox
ID="txtEmail" runat="server"></asp:TextBox>
<asp:Label
ID="lblPassword" runat="server" Text="Password"></asp:Label>
<asp:TextBox
ID="txtPassword" runat="server"></asp:TextBox>
</fieldset>
<div>
</div>
<asp:Button
ID="btnCreateAccount" runat="server" Text="Signup" />
</div>
</form>
</body>
</html>
To setup page method, first you have to drag a script manager on
your page.
<asp:ScriptManager ID="ScriptManager1"
runat="server" EnablePageMethods="true">
</asp:ScriptManager>
Also notice that I have changed EnablePageMethods="true.
This will tell ScriptManager that I am going to call Page Methods from client
side.
Now Next step is to Create a Server Side function. Here is the
function which I created, this function validates user's input:-
[WebMethod]
public static string RegisterUser(string email, string password)
{
string result = "Congratulations!!! your
account has been created.";
if (email.Length == 0)//Zero length check
{
result = "Email Address cannot be blank";
}
else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks
{
result = "Not a valid email address";
}
else if (!email.Contains(".") || !email.Contains("@")) //some other basic checks
{
result = "Not a valid email address";
}
else if (password.Length == 0)
{
result = "Password cannot be blank";
}
else if (password.Length < 5)
{
result = "Password canonot be less than 5 chars";
}
return result;
}
To tell script manager that this method is accessible through
javascript we need to ensure two things. First this method should be 'public
static'. Second there should be a [WebMethod] tag above method as written in
above code.
Now I have created server side function which creates account.
Now we have to call it from client side. Here is how we can call that function
from client side:-
<script type="text/javascript">
function Signup() {
var email = document.getElementById('<%=txtEmail.ClientID %>').value;
var password = document.getElementById('<%=txtPassword.ClientID %>').value;
PageMethods.RegisterUser(email, password, onSucess, onError);
function onSucess(result) {
alert(result);
}
function onError(result) {
alert('Cannot process your request at the moment, please try later.');
}
}
</script>
To call my server side method Register user, ScriptManager
generates a proxy function which is available in PageMethods. My server side
function has two paramaters i.e. email and password, after that parameters we
have to give two more function names which will be run if method is
successfully executed (first parameter i.e. onSucess) or method is failed
(second parameter i.e. result).
Now every thing seems ready, and now I have added
OnClientClick="Signup();return false;" on my Signup button. So here
complete code of my aspx page :-
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<fieldset style="width: 200px;">
<asp:Label ID="lblEmailAddress"
runat="server" Text="Email Address"></asp:Label>
<asp:TextBox ID="txtEmail"
runat="server"></asp:TextBox>
<asp:Label ID="lblPassword"
runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="txtPassword"
runat="server"></asp:TextBox>
</fieldset>
<div>
</div>
<asp:Button ID="btnCreateAccount"
runat="server" Text="Signup" OnClientClick="Signup();return
false;" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
function Signup() {
var email = document.getElementById('<%=txtEmail.ClientID %>').value;
var password = document.getElementById('<%=txtPassword.ClientID %>').value;
PageMethods.RegisterUser(email, password, onSucess, onError);
function onSucess(result) {
alert(result);
}
function onError(result) {
alert('Cannot process your request at the moment, please try later.');
}
}
</script>
