Insert data Into database(SQL SERVER) without page refresh and reload

Today’s challenging environment, we need to very fast running websites or portal. Where we can easily share information and fetch the information.  In simple asp.net when we insert the data into database it take some time, page will be refresh and reload, this is too complex and irritating. Using Ajax and jquery, we can insert data into database without page refresh and reload. Now I will be explain step by step how you can achieve this.

Step-1: create a table where we store information. I am writing code fro create table and store procedure.

For table.

CREATE TABLE [dbo].[testjquery](

      [id] [int] IDENTITY(1,1) NOT NULL,

     

      [name] [nvarchar](50) NULL,

      [cityid] [int] NULL,

     

      [stateid] [int] NULL,

     

      [description] [nvarchar](500) NULL

) ON [PRIMARY]

For store procedure.

CREATE PROCEDURE insertinfo

      -- Add the parameters for the stored procedure here

      @name nvarchar(20),

      @stateid int,

      @cityid int,

      @description nvarchar(100)

      AS

BEGIN

      -- SET NOCOUNT ON added to prevent extra result sets from

      -- interfering with SELECT statements.

      SET NOCOUNT ON;

    -- Insert statements for procedure here

insert into dbo.testjquery(name,stateid,cityid,description)values(@name,@stateid,@cityid,@description)

END

Step2- Now we open visual studio and create a new website and add a new page test.aspx. and design a table and write html code for text field.

<table>

    <tr><td>Name :</td><td><asp:TextBox ID="TextBox1" runat="server" CssClass="input_field_contactus" MaxLength="20"></asp:TextBox></td></tr>

     <tr><td>Name :</td><td>  <asp:DropDownList ID="ddlstate" runat="server" 

                            CssClass="input_field_contactus" >

                        </asp:DropDownList>

            </td></tr>

 

    <tr><td>City</td><td>

            <asp:DropDownList ID="ddlcity"   runat="server"  CssClass="input_field_contactus" TextAlign="Left" ></asp:DropDownList>

</td></tr>

<tr><td>Description</td><td><asp:TextBox ID="description" runat="server" CssClass="input_field_contactus" MaxLength="500" TextMode="MultiLine" Height="100px"></asp:TextBox>

</td></tr>

<tr><td><div style="margin:0; padding-top: 10px; float:left;">

<input type="button" value="Submit" class="button"  />

</div></td></tr>

    </table>

Now add a jquery script file and add this code  script code for insert the data .

<script src="http://code.jquery.com/jquery-2.0.0b1.js"></script>

<script src="js/olt.js" type="text/javascript" ></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('.button').click(function () {

                var name = $('#<%=TextBox1.ClientID%>').val();

                alert(name);

                var state = $('#<%=ddlstate.ClientID%>').val();

                var city = $('#<%=ddlcity.ClientID%>').val();

                var description = $('#<%=description.ClientID%>').val();

                $.ajax({

                    type: "POST",

                    contentType: "application/json; charset=utf-8",

                    url: "test.aspx/InsertMethod",

                    data: "{'name':'" + name + "','state':'" + state + "','city':'" + city + "','description':'" + description + "'}",

                    dataType: "json",

                    success: function (data) {

                        var obj = data.d;

                        if (obj == 'True') {

                            $('#<%=TextBox1.ClientID%>').val('');

                            $('#<%=description.ClientID%>').val('');

                            $('#<%=ddlstate.ClientID%>').val('0');

                            $('#<%=ddlcity.ClientID%>').val('0');

                            alert('Data Submitted Successfully');

                        }

                    },

                    error: function (result) {

                        alert("Error");

                    }

                });

            })

        });

</script>

Step 3- Write this method to code behind in test.aspx.cs file.

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.Text;

using System.Collections;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

public partial class test : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

    }

    [WebMethod]

    public static string InsertMethod(string name, string state, string city, string description)

    {

        String strConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

        SqlConnection con = new SqlConnection(strConnString);

        SqlCommand cmd = new SqlCommand();

        cmd.CommandType = CommandType.StoredProcedure;

        cmd.CommandText = "insertinfo";

        cmd.Parameters.Add("@name", SqlDbType.VarChar).Value = name;

        cmd.Parameters.Add("@description", SqlDbType.VarChar).Value = description;

        cmd.Parameters.Add("@cityid", SqlDbType.VarChar).Value = city;

        cmd.Parameters.Add("@stateid", SqlDbType.VarChar).Value = state;

          cmd.Connection = con;

        try

        {

            con.Open();

            cmd.ExecuteNonQuery();

           

        }

        catch (Exception ex)

        {

            throw ex;

        }

        finally

        {

            con.Close();

            con.Dispose();

        }

        return "True";

    }

  

}