Calling AspDotNet Server Side Web Methods Using Javascript

0
3

While Asp.Net web development there are situations when you want to call a server side function (Web Method written in c # say) from client side ie using Javascript. At first you might probably be thinking of AJAX or Web Services but here i will demonstrate a little old but useful method.

First, I will demonstrate how to define webmethods and then how to access those methods using javascript. One thing to mention is that, by this way you can only get a single value of basic types eg int, float or some object etc. Okay, Lets get started with an example:

The scenario is I want to calculate and get the sum of two numbers without page postback and without using update panels.

First, make sure that you have AJAX Extensions Installed.
Add a Web Form in the website
Then, you are required to add 'ScriptManager' control to your web form.
Here, in the 'ScriptManager' tag, make 'EnablePageMethods' = 'true'
Write the code in Javascript Tags for the following steps:

function CalcSum () {
1) Get the value of 'firstNo' control
2) Get the value of 'secondNo' control
3) Call the Web method as: PageMethods.GetSum (firstNo, secondNo, FillSumBox);
here 'FillSumBox' is the name of a function.
}

function FillSumBox (val) {
1) Get the 'txtSum' Control and assign 'val' to it as txtSum.value = val;
}

The function named, CalcSum, is used to call the actual server side web method named 'GetSum'. 'GetSum' takes two parameters of type int and its return type is also int. Notice that I am passing three parameters named firstNo, secondNo and FillSumBox. Okay, here is a little trick, the last parameter, in our case FillSumBox, is the name of the function to which the web method ie 'GetSum' will return the sum value. The parameter val of function FillSumBox will ultimately hold the returned sum integer. The general syntax for calling web methods is:

PageMethods.methodName (attr1, attr2, … attrn, SpecialFunName);

Now drag the following controls on the aspx page:
1) asp: ScriptManager ID = "ScriptManager1" EnablePageMethods = "true"
2) asp: TextBox ID = "txtFirstNo"
3) asp: TextBox ID = "txtSecNo"
4) asp: TextBox ID = "txtSum"
5) input id = "btnSum" type = "button" onclick = "CalcSum ()" value = "Calculate Sum"

Now lets look at the code behind file. One thing to remember is all web methods to be accessed should be declared public static.

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default: System.Web.UI.Page
{

protected void Page_Load (object sender, EventArgs e)

{

this.txtFirstNo.Focus ();

}

[System.Web.Services.WebMethod]

public static int getSum (int num1, int num2)

{

return (num1 + num2);

}
}

The code is pretty self explanatory. Hope you like the article.

Source

Leave a Reply