Click here to Skip to main content
15,860,859 members
Articles / Web Development / ASP.NET

Calling C# method using JQuery client side

Rate me:
Please Sign up or sign in to vote.
4.59/5 (20 votes)
7 Sep 2011CPOL2 min read 176.5K   37   26
This will help us to call method defined code behind using JQuery on Client Side

Introduction

This article helps us when we define a method code behind and want to call that method from 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 code behind at 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. Reason is by design, the server side code executes at server side and 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.

C#
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.

C#
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 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.

C#
<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 is DeleteR which is called at page load server side. I am sending two parameters in this method, ID and UserID.

JavaScript
$('#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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Program Manager Infobeans
India India
I have keen interest in learning new things, exploring more on a topic and being more versatile

Comments and Discussions

 
Questioni am tirem and dont work this project Pin
medonashaat19-Mar-15 4:01
medonashaat19-Mar-15 4:01 
QuestionReally bad way to do things Pin
Christian Graus12-Jan-14 12:29
protectorChristian Graus12-Jan-14 12:29 
GeneralMy vote of 1 Pin
Member 76806592-Dec-13 23:04
Member 76806592-Dec-13 23:04 
GeneralRe: My vote of 1 Pin
Anuja Pawar Indore3-Dec-13 1:34
Anuja Pawar Indore3-Dec-13 1:34 
GeneralMy vote of 5 Pin
Mannava Siva Aditya13-Aug-13 21:11
Mannava Siva Aditya13-Aug-13 21:11 
GeneralRe: My vote of 5 Pin
Anuja Pawar Indore13-Aug-13 21:33
Anuja Pawar Indore13-Aug-13 21:33 
QuestionError after executing ajax call Pin
Bharath Kumar Y30-Oct-12 0:57
Bharath Kumar Y30-Oct-12 0:57 
AnswerRe: Error after executing ajax call Pin
Anuja Pawar Indore30-Oct-12 2:33
Anuja Pawar Indore30-Oct-12 2:33 
GeneralRe: Error after executing ajax call Pin
Bharath Kumar Y30-Oct-12 20:04
Bharath Kumar Y30-Oct-12 20:04 
GeneralRe: Error after executing ajax call Pin
Anuja Pawar Indore30-Oct-12 20:15
Anuja Pawar Indore30-Oct-12 20:15 
GeneralMy vote of 5 Pin
Najeeb Shaikh13-Sep-12 20:05
Najeeb Shaikh13-Sep-12 20:05 
GeneralRe: My vote of 5 Pin
Anuja Pawar Indore13-Sep-12 21:02
Anuja Pawar Indore13-Sep-12 21:02 
GeneralMy vote of 1 Pin
Markgam20-Aug-12 6:48
Markgam20-Aug-12 6:48 
GeneralRe: My vote of 1 Pin
Anuja Pawar Indore20-Aug-12 19:00
Anuja Pawar Indore20-Aug-12 19:00 
Generalthank Pin
Schin kulkarni.1-Aug-12 18:48
Schin kulkarni.1-Aug-12 18:48 
GeneralRe: thank Pin
Anuja Pawar Indore2-Aug-12 23:58
Anuja Pawar Indore2-Aug-12 23:58 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey16-Feb-12 0:25
professionalManoj Kumar Choubey16-Feb-12 0:25 
GeneralRe: My vote of 5 Pin
Anuja Pawar Indore26-Jul-12 20:26
Anuja Pawar Indore26-Jul-12 20:26 
GeneralMy vote of 1 Pin
Daniel Gidman7-Sep-11 10:11
professionalDaniel Gidman7-Sep-11 10:11 
GeneralRe: My vote of 1 Pin
Anuja Pawar Indore7-Sep-11 20:07
Anuja Pawar Indore7-Sep-11 20:07 
GeneralRe: My vote of 1 Pin
singh.iz.king21-Dec-11 16:58
singh.iz.king21-Dec-11 16:58 
GeneralRe: My vote of 1 Pin
Anuja Pawar Indore7-Sep-11 20:15
Anuja Pawar Indore7-Sep-11 20:15 
GeneralMy vote of 5 Pin
Anuja Pawar Indore7-Sep-11 3:35
Anuja Pawar Indore7-Sep-11 3:35 
GeneralRe: My vote of 5 Pin
Anuja Pawar Indore12-Oct-11 23:12
Anuja Pawar Indore12-Oct-11 23:12 
GeneralRe: My vote of 5 Pin
Sacha Barber15-Nov-11 23:34
Sacha Barber15-Nov-11 23:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.