Calling C# method using JQuery Client Side

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.