Another
title of this article would be "Say bye-bye to Postbacks". Sometimes we
need to stop annoying post-backs on ASP.NET Web Pages. For example,
when one click the ASP.NET button on webpage, by default page gets
post-back. So, how we stop this by keeping proper code-behind method
calls. Let's look at one case.
I
will create a simple form having two asp.Net textboxes and a button, we
will enter our name and address in the textboxes and by clicking button
will call the code-behind methods. For this we need to take the
advantage of PageMethod and to setup PageMethod we need instance of
ScriptManager on web page.
This is what we are going to create:
PageMethod
is an easier and faster approach for ASP.NET AJAX. We can easily
improve the user experience and the performance of web applications by
unleashing the power of AJAX. One of the best things I like in AJAX is
the PageMethod.
PageMethod
is a way through which we can expose the server side page's methods in
JavaScript. This brings so many opportunities; we can perform many
operations without using slow and annoying post backs.
Let's create our HTML Page:
<div> <p>Say bye-bey to Postbacks.</p>
<div> <p>Say bye-bey to Postbacks.</p>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:TextBox ID="txtname" runat="server"></asp:TextBox> <br /> <asp:TextBox ID="txtaddress" runat="server"></asp:TextBox> <br /> <asp:Button ID="btnCreateAccount" runat="server" Text="Signup" OnClientClick="HandleIT(); return false;" /> </div>
Now,
in the above code you can see one instance of the ScriptManager and two
textboxes and a button at the end. In the button control you will see
an attribute 'OnClientClick' to fire the JavaScript Method named
"HandleIT()" and this JavaScript Method will call the code-behind C#
page method.
Note: Remember to add a new attribute EnablePageMethods and set it to true in the ScriptManager.
Now, look at the JavaScript Code:
<head runat="server"> <title></title> <script type="text/javascript"> function HandleIT() {
var name = document.getElementById('<%=txtname.ClientID %>').value;
var address = document.getElementById('<%=txtaddress.ClientID %>').value;
var name = document.getElementById('<%=txtname.ClientID %>').value;
var address = document.getElementById('<%=txtaddress.ClientID %>').value;
PageMethods.ProcessIT(name, address, onSucess, onError);
function onSucess(result) {
alert(result);
}
function onSucess(result) {
alert(result);
}
function onError(result) {
alert('Something wrong.');
}
}
</script></head>
alert('Something wrong.');
}
}
</script></head>
In
the above code, there is a "HandleIT()" JavaScript Method having two
the variables, name and address. These variables will carry the values
of the textboxes. Next, a PageMethod named "ProcessIT" is being called
that passes the two parameters name and address and the other two
parameters will contain the success result and error result. Next, the
definition of these success results.
Now look at the code-behind of the C# (PageMethod):
[WebMethod]
public static string ProcessIT(string name, string address)
{
string result = "Welcome Mr. " + name + ". Your address is '" + address + "'.";
return result; }
public static string ProcessIT(string name, string address)
{
string result = "Welcome Mr. " + name + ". Your address is '" + address + "'.";
return result; }
In
the above code, to tell the 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 in the above method as written in the above code.
Remember to use the namespace "System.Web.Services" for WebMethods.
So, now we are all set to test it.
