ASP.NET - Data insertion using jquery AJAX

The main idea behind this article is to insert data using jQuery AJAX to avoid postback. AJAX offers users a seamless way to work with your interface, no waiting for whole pages to load. jQuery has a set of tools to make it super simple to implement.

Most everyone knows what iAJAX is. But for the beginners i would like to provide some information regarding the AJAX.
What is AJAX?
AJAX is a short hand for asynchronous JavaScript and XML.  Which plainly means that instead of waiting for the whole page to load, you can load only what you need to.  So if you only need to update one small text part of your site, you don’t have to worry about loading everything else on that page.  A vast majority of sites use this technology now.  Probably one of the most popular uses is an auto complete feature for the search box at Google and Yahoo.
If you see another term XHR, which is shorthand for XML HTTP request, it’s the same thing. Don’t be afraid of this jargon; AJAX is not rocket science.

   1. In Gmail, switch from inbox to draft. Part of the page is changed, but the page is not refreshed. You remain on the same page. Url has not changed (except for the #draft at the end of the url, but that’s still the same webpage).
   2. In Google Reader, select a feed. The content changes, but you are not redirected to another url.
   3. In Google Maps, zoom in or zoom out. The map has changed, but you remain on the same page.

The key to AJAX’s concept is “asynchronous”. This means something happens to the page after it’s loaded. Traditionally, when a page is loaded, the content remains the same until the user leaves the page. With AJAX, JavaScript grabs new content from the server and makes changes to the current page. This all happena within the lifetime of the page, no refresh or redirection is needed.
There are several things that we could build that I have tried out to insert data using jQuery AJAX.
For beginners please visit this link for Web Methods in ASP.NET.

Here i have used web methods to call the server side method using jQuery. I have given the link of the source code which contains the screen shots and DB Scripts.
The code as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataInsertion.aspx.cs" Inherits="DataInsertion" %>

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Data insertion title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js">script>
    <script type="text/javascript">
        $(document).ready(function () {
             GetID();
             $('#btnSave').click(function () {
                var s = validateFields();
                 if (s) {
                    $.ajax({
                        type: "POST",
                        url: "DataInsertion.aspx/SaveData",
                        data: '{firstName:"' + $('#tbFName').val() + '",lastName:"' + $('#tbLName').val() + '"}',
                        contentType: "application/json; charset=utf-8",
                        success: OnSuccess,
                        failure: function (response) {
                            alert(response.d);
                        }
                    });
                    function OnSuccess(response) {
                          if (response.d) {
                              alert("Successfully inserted !");
                            GetID();
                        }

                    }
                }
            });
        });

        function validateFields() {
            var tbFName = $('#tbFName').val();
            var tbLName = $('#tbLName').val();
             if (tbFName == "") {
                 alert('Enter first name');
                 return false;
            }
            else if (tbLName == "") {
                 alert('Enter last name');
                 return false;
            }
            else {
                 return true;
            }
        }
        function GetID() {
             $('#tbFName').val('');
            $('#tbLName').val('');
            $.ajax({
                type: "POST",
                url: "DataInsertion.aspx/GetID",
                 // data: '{id: "' + $("#tbId").val() + '" ,firstName:"' + $('#tbFName').val() + '" ,lastName:"' + $('#tbLName').val() + '}',
                contentType: "application/json; charset=utf-8",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                }
            });
            function OnSuccess(response) {
                 $('#tbId').val(response.d);
                 $('#tbId').attr('readOnly', true);
            }
        }
    script>
head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                 <td>
                     ID:
                 td>
                 <td>
                     <asp:TextBox ID="tbId" runat="server">asp:TextBox>
                 td>
            tr>
            <tr>
                 <td>
                     FirstName:
                 td>
                 <td>
                     <asp:TextBox ID="tbFName" runat="server">asp:TextBox>
                 td>
            tr>
            <tr>
                 <td>
                     LastName:
                 td>
                 <td>
                     <asp:TextBox ID="tbLName" runat="server">asp:TextBox>
                 td>
            tr>
        table>
        <input type="button" value="Save Data" id="btnSave" />
    div>
    form>
body>
html>
The Code behind is given below
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

public partial class DataInsertion : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static bool SaveData(string firstName, string lastName)
    {
        String connectionString = ConfigurationManager.ConnectionStrings["TESTDB"].ConnectionString;
        bool result = false;
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = connection;
            cmd.CommandText = String.Format("insert into Hemanth_DB.dbo.PersonName(FirstName,LastName) values ('{0}','{1}')", firstName, lastName);
            cmd.CommandType = CommandType.Text;
             connection.Open();
            int count = cmd.ExecuteNonQuery();
             if (count > 0)
            {
                result = true;
            }
            else
            {
                result = false;
            }
        }
         return result;
    }
    [WebMethod]
    public static int GetID()
    {
        int rowId;
        String connectionString = ConfigurationManager.ConnectionStrings["TESTDB"].ConnectionString;
        using (SqlConnection connection = new SqlConnection(connectionString))
        {
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = connection;
            cmd.CommandText = "select MAX(id)+1 from Hemanth_DB.dbo.PersonName";
            cmd.CommandType = CommandType.Text;
             connection.Open();
            rowId = (int)cmd.ExecuteScalar();
         }
        return rowId;
    }
    [WebMethod]
    public static bool Upsert()
    {
         return true;
    }
}

The source code is provided in this link:
InsertDataUsingAJAX

Any suggestion regarding my article are welcome.
Thank you all.

Comments

  1. MaherMarch 16, 2012 at 6:16 PM

    very nice article and straight to the point .
    i would just like to have an example that uses List and returns the data as JSON to the client.
    it would be nice to have a WCF or usual WEbservice for this implementation.
    Thanks for sharing this nice code
    Maher

    ReplyDelete
  2. HemantJune 4, 2012 at 6:04 PM

    You are welcome Maher. Bookmark this link to get updates :-)

    ReplyDelete

Post a Comment

Popular posts from this blog

Restrict the Textbox to enter only Numbers Using Javascript

Normally we get this type of requirement to accept only numbers in a text box.Suppose we have a Credit Card Number entry where we want to validate the key-press is number or not.Here i have simplified the way to enter only numbers in the text-box. Here i have written some logic to enter only numbers in textbox using javascript. < script type = " text/javascript " > function isNumberKey ( evt ) { var charCode = ( evt . which ) ? evt . which : event . keyCode if ( charCode > 31 && ( charCode < 48 || charCode > 57 ) ) return false ; return true ; } < script > Now we can call this fu nction in the events like keypress,keydown and keyup to validate the value is number or not. Happy Coding :-)
Read more

Context Menu in ASP.NET

Image
We normally face a task like to show Menu when we right click the gridview or treeview e.t.c. Many third party controls are providing this right click context Menu to the controls like one of the best third party control like Telerik . But we can do this type of requirements using jQuery also. To do this in ASP.NET we need to download the jQuery Context Menu plugin. We need frame the menu div based on our requirement.See this example to do < div >      < ul id ="myMenu" class ="contextMenu" >        < li class ="edit" >< a href ="#edit" > Edit Node </ a > </ li >        < li class ="delete" >< a href ="#delete" > Delete Node </ a > </ li >      </ ul >    </ div > * This source code was highlighted with Source Code Highlighter . After downloading the plugin you need to add this l...
Read more

Decide Cursor Type and Lock Type based on CRUD Operation

Normally when we do the addition and deletion of record in the ADODB,cursor type and lock type will be changed.So we need to be very careful while adding and deleting a record using the record set object.So for this I have done a sample on addition only. 1. When we want to add using the record set object we need to pass the Cursor Type and Lock Type as     ADODB.CursorTypeEnum.adOpenDynamic    ADODB.LockTypeEnum.adLockOptimistic 2. By default, ADO record sets are opened with a lock type of adLockReadOnly, which does not allow additions and deletions. 3. To allow additions and deletions, open the record set with a lock type of either adLockOptimistic or adLockPessimistic To Solve this we need change the code like this Dim recordSetObj As New ADODB . RecordSet recordSetObj . Open ( "select * from students" , "Your Connection Object" , ADODB . CursorTypeEnum . adOpenDynamic , ADODB . LockTypeEnum . adLockOptimistic ) If Not reco...
Read more