Calling an ASP.NET C# Method (Web Method) using JavaScript
Another title of this post 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 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 JavaScript. This brings so many opportunities, we can
perform lots of operations without using slow and annoying post backs.
Let’s
create our HTML Page:
<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 above code you can see one instance of
ScriptManager and two textboxes and a button at the end. In button control you
can 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
to true in 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;
PageMethods.ProcessIT(name,
address, onSucess, onError);
function onSucess(result) {
alert(result);
}
function onError(result) {
alert('Something wrong.');
}
}
</script>
</head>
In the above code, there is a ‘HandleIT()’ JavaScript
Method having two variable name and address. These variables will carry the
values of textboxes. Next, a PageMethod name ‘ProcessIT’ is being called and
passing two different parameters name and address and rest two parameters will
contain success result and error result. Next, the definition of these success
results.
Now, look at code-behind of C# (PageMethod):
[WebMethod]
public static string ProcessIT(string name, string address)
{
string result = "Welcome Mr. " + name + ".
Your address is '" +
address + "'.";
return result;
}
In above code, 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.
Remember to use a namespace ‘System.Web.Services’ for
WebMethods.
So, now we all set to test it.
I hope you like it. Thanks.
Good Article..
ReplyDeleteVery good.
ReplyDeletewhat if I need to work with non-static methods?
ReplyDeleteIs there any way to call non-static method without posting back?
i am getting error as 'PageMethods' undefined
ReplyDeleteprobably you are missing the ScriptManager:
DeleteI am using it and sometimes I get authentication failed error message. The error message is intermittent. Do you know why it is so?
Deletehow to call public void test() function using same method
ReplyDeletehow to call function which is not static ,i.e public void test() using same code .
ReplyDeletei have multiple textbox and i use text box keypress event in asp.net+C#
ReplyDeletei am getting error as 'PageMethods' undefined n m also using scrip manager....
ReplyDelete
ReplyDeleteReplace the button id according to ur project after doing this u will not receive "Pagemethod undefined"
really thanks sir
ReplyDeletesir,i have a doubt...it is huge...but for this time...i m asking how to call the asp button click event using html click event and passing value from html button to asp button ..and using in asp button..thats it..
ReplyDeleteHi,
ReplyDeleteHow to call non static methods in asp.net using jquery
wow great one
ReplyDeletehow to call web method from javascript without using AJAX in asp.net 2.0 application. Please help on this.
ReplyDeleteError getting at PageMethods pls solve this
ReplyDeletewhat is the need of pagemethod if we can call webmethod easily from ajax call.
ReplyDelete