Introduction
This article helps us when we define a method in the code behind and want to call that method from the client side. JQuery has made life simple. There is a very easy way to do that.
Background
Earlier we knew one way that we needed to add our method as a webmethod, if we
want to call a method from the code behind at the client side. Using this, we can do it
without calling our method in webmethod. We cannot call server-side code
'directly' from client-side code. The reason is by design, the server side code
executes at server side and the client side code at the client. However there are
some workarounds.
Using the Code
In this example, I am writing a method to delete a particular user when a delete
key is hit. I don't want a postback so I want the event to execute client side.
I am writing a delete method server side in the CS file and calling it from
client side using JQuery.
Create a page with name Text.aspx. Now open its CS file, that is Test.aspx.cs
file and add a private method to delete a record. In this method, ID and UserId
parameters are coming from client side. So you can learn how to get the
parameters from client side.
This is my method in the CS file with the name DeleteRec.
private
void
DeleteRec()
{
int
ID= Request.Form["ID"].ToString().ToInteger();
//parameter send
//from clide side
int
UserID = Request.Form["UserID
"].ToString().ToInteger();//parameter
//send from clide side
UserBO lObjUserBO =
new
UserBO ();
lObjUserBO .DeleteUser(ID, UserID );
}
Once we have defined the method, we need to call the client side method on page
load. To call client side method on page load, we use Request.Form["MethodName"]
== "Name of the method onclient side".
Here DeleteR is the name of the method on the client side and this method calls
my private method defined on server side.
protected
void
Page_Load(object
sender, EventArgs e)
{
if
(!Page.IsPostBack)
{
#region
Ajax methods
if
(Request.Form["MethodName"]
==
"DeleteR")//
same Method Name
//
that we are specifying on client side(DeleteR)
{
DeleteRec();//
Method defined on the page to delete the record
return;
}
#endregion
}
}
Now coming on to the client side. We have an
anchor tag and what we are looking at is when we click on this anchor tag, the
method written on the server side should be called and a record with parameters
passed from client side should be deleted.
<a id="adelete">Delete
</a>
Use the following script to call the server side method when this anchor tag is
clicked. Here the name of my method isDeleteR which is called at page load
server side. I am sending two parameters in this method, ID and UserID.
$('#adelete').click(function()
{
var
dataToSend={ID:ID,MethodName:'DeleteR',UserID
:UserID };
var
options =
{
url:
'<%=ResolveUrl("~/Test.aspx")
%>?x='
+
new
Date().getTime(),
data: dataToSend,
dataType:
'JSON',
type:
'POST',
success:
function
(response) {
window.location.href='<%=ResolveUrl("~/Test1.aspx")%>
/'+ID;//after
sucess will redirect to new page
}
}
$.ajax(options);
});
If the code executes successfully, it will redirect to a new page named
Test1.aspx. We can even add what to do on Failure also.
Points of Interest
My client didn't want to see page refresh after delete. I had already created so
many methods; I was just searching for a way to use the same method but from
client side. This really helped me. Hope it helps you too.