Easy Way to Implement Ajax using Jquery in ASP.NET

• Download Jquery+ASP - 239.74 KB

Introduction

This article lists simple steps to perform some actions which are asynchronous to the server using Jquery and ASP.NET. I use Visual Studio 2008, Jquery and C# to perform this. Here, I just give the code for doing that. I mention the way to take the data to a server page without using Handlers. This can be useful for a person who has some knowledge about ASP.NET and its working and beginners in Jquery.

Background

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

Using the Code

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 have a Default.aspx page.

Step 2. Place some controls in the form. Make sure that we are using HTML controls instead of ASP.NET server controls. If we use server controls, it is difficult to serialize the controls when it passed to aspx page. So we use HTML controls with server tag.

<input type="text" runat="server" id="txtName" />
<input type="text" runat="server" id="txtAge" />

Here I use two text boxes which are by type input but they will have unique Id and will be run 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 are mentioned in 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 give the source path of your JavaScript correctly.

 <script src="Javascript/jquery-1.4.2.min.js" type="text/javascript"></script>

Step 5. Now to perform the operation using Jquery. Please make sure that you 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 use the $.ajax method for doing the Ajax operation. I do not mention about the function. Please check www.jquery.com for more information about the function. Here, we use the "POST" method to send data to server. The URL will be the URL of the aspx page. We can also call a function here or directly 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 success function will perform when the server operation or a reply is occurred. The HTML here will return the response from the server. Since we are using text/html as response, we give the datatype as HTML.

Step 7. Add an HTML button to the form and then on call saveData() on its "onClick":

<input type="button" id="btnSave" value="Save" onclick="saveData()" />    

Step 8. Now it is time 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 Allocated";
    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. The jquery serialize will convert the format given below. We need to split it using '&'. After splitting using the user defined class, we need to give the unique id property to get the value:

  txtName=q&txtAge=w //this will be the format of Jquery Serialization

It is not possible to select the value based on index. So you must specify the value in the following manner:

  string name = controls[txtName.UniqueID].Value;
  string age = controls[txtAge.UniqueID].Value; 

So you will be getting the values from the textbox. You can use the values to save the data.

Points of Interest

It is interesting to working with Jquery since it supports various features and methods which can makes the interface attractive.

History

• Created on 27-August-2010
• Modified on 28-August-2010