Easy way to Implement Ajax using Jquery in Asp.net

A simple steps to perform some action which asynchronous to the server using Jquery and Asp.Net.Here I am using Visual Studio 2008,Jquery and C# to perform this.Here I am just giving the code for doing that.I am just mentioning the way to take the data to a server page without using Handlers.This can be useful for person who have some knowledge about asp.net and its working and beginners in jquery

Thanks to Jquery for doing wonderful operations with minimum code . Obviously the server controls in the asp.net which are always supports for post-back operations.I am here mentioning some code which is suitable for insertion of data from an aspx page.It can be from pop-up or simple aspx.

Please follow these steps to  perform my code.I hope you know how to create an aspx site using visual studio.

Step 1. Create a website project and hope you will be having a Default.aspx page.

Step 2. Place some controls in the form.Make ensure that we are using Html controls instead of asp.net server controls.If we are using server controls it is difficult to serialize the controls when it passed to aspx page.So we are using html controls with server tag.

Here i am using two text boxes which is by type input but they will be having unique Id and it will be runs at server.So it will be similar to asp controls.We cannot have the asp events with them.In the “default.aspx” it is possible to access using ” txtName.ClientID” etc.

Step 3.you need to add jquery source file to get the functions which is mentioned that release. Please click here to get the release(jquery-1.4.2.min.js).Please visit www.jquery.com for downloading the file.

Step 4. Make sure that you given the source path of your javascript correctly.

Step 5.Now to perform the operation using Jquery.Please make sure that use must use the document ready function of Jquery. 

$(document).ready(function(){// code });Step 6. Perform the JavaScript coding

function saveData(){ $.ajax({ type: ‘POST’, url: getUrl(‘test’), data: { name: $(‘#frmAdd’).serialize() }, cache: false, error: function(xhr, status, errorThrown) { alert(errorThrown + ‘\n’ + status + ‘\n’ + xhr.statusText); }, success: function(html) { if (html.toString().indexOf(“successfully”) > 0) { alert(html); } else { alert(html); } }, dataType: ‘html’ }); }

Here we are using the $.ajax method for doing the ajax operation.I am not mentioning about the function.Please check the www.jquery.com for more information about the function.We are using here the “POST” method to send data to server.The url will be url of the aspx page.We can also call a function here or direct give the url.It is possible to pass the query string along with the url here.Here we are serializing the entire form and the controls using the jquery serialize method.The error part will perform the function when there will be error occurred from the server.The sucess function will perform when the server operation or a reply is occured.the html here will returns the response from the server.Since we are using text/html as response we give the datatype as html.

Step 7.Add a html button to the form and then on call saveData() on its “onClick”

Step 8.Now its turn to do some server side codings in C#.So go to Default.aspx.cs

if (Request.Params["name"] != null) { prms = Request.Params["name"].ToString(); App_Utilities.JQDeSeriazile controls = new Jquery_Asp.Net.App_Utilities.JQDeSeriazile(Request.Params["name"]); string name = controls[txtName.UniqueID].Value; string age = controls[txtAge.UniqueID].Value; string strMsg = “Employees successfully Allocateded”; Response.Flush(); Response.Expires = -1; Response.Write(strMsg); Debug.Write(strMsg); Response.End(); }  

Step 9. The class JQDeSerialize is a user defined class which is used to deserialize the jquery serialized data

Use the “var” button to to wrap Variable or class names in <code> tags like this.

Did you learn anything interesting/fun/annoying while writing the code? Did you do anything particularl clever or wild or zany?  

Keep a running update of any changes or improvements you’ve made here.   

View the original article here