Calling aspx page method using jquery

this is part 67 of jQuery tutorial in this video we'll discuss how to call a server-side aspx page method using jQuery AJAX here is what we want to do we're going to have employees data in this database table TBL employee we are going to include a function in the code-behind file and we want that function to retrieve data from this database table and we want to call that function within the code-behind file using jQuery AJAX and display the data as you can see here so let's see how to achieve this the first step here is to create this database table which I have already done here is the create table script and here we have the insert script R insert some test data i've already executed this script the next step is to create a stored procedure which is going to retrieve employee by ID so this store procedure has got an input parameter ID this stored procedure is going to retrieve ID name gender and salary columns from employee table where ID equals whatever value we pass in for the parameter so for example if we pass employee ID one there's going to return as that employee's details all right so let's now flip to visual studio so from the asp.net web application perspective the first thing that we need to do is include the connection string within the web config file so this connection string is pointing to our sample DB database which contains our employees table the next step is to add an employee class to this project and this employee class is going to represent this employee's TBL employee table so let's go ahead and add that employee class and let's call this employee dot cs and this class is going to have four properties ID name gender and salary which are going to correspond to these columns in TBL employee table in the interest of time I have already typed the required code for those properties let's copy that and paste it within our employee class notice all of them are Auto implemented properties now the next step is to include a method within the code behind I'll of this webform one dot aspx so let's go ahead and write a method here this is going to be a public method this is going to return the employee object and let's call the scat employee by ID and let's pass a parameter to this function let's call it employee ID so we pass an employee ID to this function this function is going to retrieve that employee details from the database table and return the employee object back so we have to write some area dot net code here so I have already included the required area dot knit namespaces system dot configuration system data and system dot theta dot sequel client in the interest of time I also have typed the required a do drop net code so let's copy this from this notepad and paste it within our get employee by ID function so what are we doing within this function the first thing that we are doing here is creating an instance of the employee class and then we are reading the connection string from web config file using that connection string we are creating the sequel connection object and then we are creating the sequel command object so basically we want to execute this stored procedure using this sequel command object since that is a stored procedure we have to tell that to the command object using the command type property of the command object and then this stored procedure has got a parameter so we need to associate the parameter and its value to the command object we are doing that using the parameters collection property of the command object and then we are opening the connection executing the command and whatever result we get we are looping through retrieving ID name gender and salary values from the database table and populating the respective properties of the employee object and returning the employee object so all this is straightforward ADA wrote net code it has got nothing to do with Ajax right so this is a do dotnet now we want this function get employee by ID you know this function is actually present in the code-behind file so this is a server function we want to call the server-side function you know using jQuery AJAX and if you want to do that you have to do two modifications to this function the first one is convert this function to a static function and the second change is decorate this function with peb method attribute and this web method attribute is present in system dot web dot services dot web method so that's the namespace system dot web dot services all right so those are the two changes that you need to do for this method to be called from jQuery okay now the next step is to design this platform so it looks like this so in the interest of time I have already a type the required HTML so let's go ahead and copy that from our notepad and paste it within our web form so in the form section I'm going to paste the copied HTML and we'll get this HTML it's straightforward so we have the literal text ID so let's actually build the solution and let's view in the browser so we have that little text ID and then a text box in the button and the table so basically we have that little text here input element of type text that's the text box and input element of type button and then we have a table and this table has got three tiers each TR has got two TDs and with the first TD we have the literal text you know named general salary and within the second TD we have a text box you know to display the name gender or salary so straightforward HTML there I also have the ready function wired up within the strip section okay so now when we click the button we want to retrieve the ID that the user has entered in this text box issue an ajax request call the function the code-behind file retrieve the employee data and then display name gender and salary within these three text boxes right so let's see how to do that so the first thing is we need to wire up click event handler to this button bTW and get employee so since that is an ID let's use the jQuery ID selector fine the button and associate a click event handler so let's find the text box where the users enter ID the idea of the text box is txt ID so let's use jQuery ID selector again find the text box and use the Val function to retrieve the value the user has entered let's store it in a variable let's call it EMP ID now we want to issue the Ajax request so let's call the Ajax function and we need to specify the options so the first option we need to specify is the URL so what's the URL we want to call we want to call this waveform one dot aspx and within that webform we have a function what is the name of the function get employee by ID so that's the URL that we want to call the form 1 or ASP x4 slash get employee by ID let's issue a post request and to specify that I'm going to use the method option and let's specify the content type that we will be sending to the server so the content type that we are going to send to the server is application for slash JSON so since we specified that we are going to send a JSON string the data that we are going to send to the server need to be converted to a JSON string and there are two ways we can do that you can do that by hand or you can use JSON dot stringify method I'm actually going to do that by hand so within the string we are going to have this JavaScript object and what is the name of the parameter the name of the parameter is employee ID right so employee ID : and where is the value for that employee ID going to come from it's going to come from this variable EMP ID okay so employee ID equals employee ID whatever the user has entered and finally let's append this closing brace ok so that's the data that we want to send to the server to the code-behind file and the type of data that we are expecting back from the server is JSON and finally we want to associate a callback function if the request completes successfully so this is the function that gets called when the request completes successfully and this is going to read you know receive the JSON object and if there is an error then even in that case we want to associate a callback function and this function is going to receive the error and let's alert that error okay all right so if the request completes successfully what do we want to do we want to retrieve the name gender and salary property values and display them within the respective text boxes one very important thing to keep in mind here is that the J is an object that is returned by a spirit net will have property D attached to it so if you want to retrieve name property from this data object you will have to use data dot d dot name okay so we want to display name within a text box which has got ID txt name so the value of that is going to come from the data object dot d dot name so we need to do the same thing for gender and salary so the text box name here I mean the ID is gender and the property is gender similarly the text box ID here is salary and the property name here is salary all right so let's go ahead and save the changes reload our page and let's enter employee ID 1 get employee look at that we get employee ID 1 details let's try employee ID 4 we get employee ID for details so here we have the web method code in the code-behind file and here we have the HTML and finally the jQuery code thank you for listening and have a great day

Channel: kudvenkat

Views: 73,435

Keywords: how to call c# method using jquery, how to call server side method using jquery, call asp.net webmethod from jquery, call code behind method from jquery, jquery webmethod, jquery webmethod return json, jquery aspx code behind

Id: x6iHQ5G-KKc

Length: 11min 12sec (672 seconds)

Published: Fri Jun 12 2015