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";
}
}
