Post
Ask Question

How to Insert Data into Database without any Postback (Asynchronous) in ASP.NET

Let see how to call server side ASP.NET page methods from client side without any postback.

At DataBase :

I use the following table and stored procedure to demonstrate this concept.

  1. CREATE TABLE Mas_Employee   
  2. (  
  3. Id INT PRIMARY KEY IDENTITY(1, 1),  
  4. Name VARCHAR(50),  
  5. Salary INT,  
  6. DeptId INT  
  7. )

The following procedure is used insert the data into Mas_Employee table in database.

  1. CREATE Procedure [dbo].[USP_Emp_Insert]
  2. (
  3. @Name varchar(50),  
  4. @Salary int,  
  5. @DeptId int
  6. )
  7. AS 
  8. Begin
  9.    Insert into Mas_Employee (Name, Salary, DeptId)  
  10.                      Values (@Name, @Salary, @DeptId)
  11. End

Now create the project as:

Goto -> "Start" ->  "All Programs" -> "Microsoft Visual Studio 2010".

"File" -> "New" -> "Project..." -> "C#" -> "Empty Project".

Give the project a name as you wish and specify the location.

Web.Config -

Create the connection string in Web.Config file as shown in below 

  1. <connectionStrings>  
  2.     <add name="conStr" connectionString="Password= 1234; User ID=sa; Database=DB_Jai; Data Source=."  
  3. providerName="System.Data.SqlClient"/>  
  4. </connectionStrings>

Next -> Right click on Solution Explorer and add a web form to your project.

Design your .aspx page as shown in below:

.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InsertByAjaxJquery.aspx.cs"  
  2.   Inherits="CsharpCornerExamples.Application.InsertByAjaxJquery" %> 

  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  5. <html  xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.    <title></title>  
  8.    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript">               </script>  
  9.    <script src="../JScripts/jquery-1.2.1.min.js" type="text/javascript"></script>  
  10.    <script type="text/javascript">  
  11.   
  12.     function SaveRecord() {  
  13.       //Get control's values  
  14.       var Name = $.trim($('#<%=txtName.ClientID %>').val());  
  15.       var Salary = $.trim($('#<%=txtSalary.ClientID %>').val());  
  16.       var DeptId = $('#<%=ddlDeptId.ClientID %>').val();  
  17.       var msg = "";  
  18.          //check for validation  
  19.          if (Name == '') {  
  20.             msg += "Please enter Name";  
  21.          }  
  22.          if (Salary == '') {  
  23.             msg += "Please enter Salary";  
  24.          }  
  25.          if (DeptId == 0) {  
  26.             msg += "Please select your Department";  
  27.          }  
  28.             if (msg.length == 0) {  
  29.          //Jquery Ajax call to server side method  
  30.                $.ajax({  
  31.                type: "POST",  
  32.                dataType: "json",  
  33.                contentType: "application/json; charset=utf-8",  
  34.                url: "/Application/InsertByAjaxJquery.aspx/InsertEmpDetails",  
  35.                data: "{'Name':'" + Name + "', 'Salary':'" + Salary + "','DeptId':'" + DeptId + "'}",  
  36.                success: function (response) {  
  37.                if (response.d == true) {  
  38.                   $('#dvResult').text("Saved successfully");  
  39.                   //Clear/Reset controls  
  40.                   $('#txtName').val('');  
  41.                   $('#txtSalary').val('');  
  42.                   $('#ddlDeptId').val("0");  
  43.                }  
  44.                else {  
  45.                      $('#lblMsg').text("Not Saved");  
  46.                      }  
  47.                   },  
  48.                   error: function (xhr, textStatus, error) {  
  49.                   $('#lblMsg').text("Error: " + error);  
  50.                   }  
  51.                });  
  52.             }  
  53.             else {  
  54.                $('#lblMsg').html('');  
  55.                $('#lblMsg').html(msg);  
  56.             }  
  57.          }  
  58.         </script>  
  59.     </head>  
  60.     <body>  
  61.         <form id="form1" runat="server">  
  62.             <div>  
  63.                 <table>  
  64.                     <tr>  
  65.                         <td>  
  66.                            Name:  
  67.                         </td>  
  68.                         <td>  
  69.                             <asp:TextBox ID="txtName" runat="server"></asp:TextBox>  
  70.                         </td>  
  71.                     </tr>  
  72.                     <tr>  
  73.                         <td>  
  74.                            Salary:  
  75.                         </td>  
  76.                         <td>  
  77.                             <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>  
  78.                         </td>  
  79.                     </tr>  
  80.                     <tr>  
  81.                         <td>  
  82.                            Department:  
  83.                         </td>  
  84.                         <td>  
  85.                             <asp:DropDownList ID="ddlDeptId" runat="server">  
  86.                                 <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>  
  87.                                 <asp:ListItem Text="IT" Value="1"></asp:ListItem>  
  88.                                 <asp:ListItem Text="HR" Value="2"></asp:ListItem>  
  89.                                 <asp:ListItem Text="Accounts" Value="3"></asp:ListItem>  
  90.                             </asp:DropDownList>  
  91.                         </td>  
  92.                     </tr>  
  93.                     <tr>  
  94.                         <td></td>  
  95.                         <td>  
  96.                             <button type="submit" onclick="SaveRecord();return false">Submit</button>  
  97.                         </td>  
  98.                     </tr>  
  99.                     <tr>  
  100.                         <td></td>  
  101.                         <td>  
  102.                             <asp:Label ID="lblMsg" runat="server"></asp:Label>  
  103.                         </td>  
  104.                     </tr>  
  105.                 </table>  
  106.             </div>  
  107.         </form>  
  108.     </body>  
  109. </html>

CodeBehind : - Copy the following code in youe codeBehind or .cs file.

  1. using System;  
  2. using System.Data;  
  3. using System.Data.SqlClient;  
  4. using System.Configuration;  
  5. using System.Web.Services;  
  6. namespace CsharpCornerExamples.Application  
  7. {  
  8.     public partial class InsertByAjaxJquery: System.Web.UI.Page  
  9.     {  
  10.         protected void Page_Load(object sender, EventArgs e)  
  11.         {  
  12.         }  
  13.         [WebMethod]  
  14.         public static bool InsertEmpDetails(string Name, string Salary, Int32 DeptId)  
  15.         {  
  16.             bool status;  
  17.             using(SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conStr"].ConnectionString))  
  18.             {  
  19.                 using(SqlCommand cmd = new SqlCommand("USP_Emp_Insert", con))  
  20.                 {  
  21.                     cmd.CommandType = CommandType.StoredProcedure;  
  22.                     cmd.Parameters.AddWithValue("@Name", Name);  
  23.                     cmd.Parameters.AddWithValue("@Salary", Salary);  
  24.                     cmd.Parameters.AddWithValue("@DeptId", DeptId);  
  25.                     if (con.State == ConnectionState.Closed)  
  26.                     {  
  27.                         con.Open();  
  28.                     }  
  29.                     Int32 retVal = cmd.ExecuteNonQuery();  
  30.                     if (retVal > 0)  
  31.                     {  
  32.                         status = true;  
  33.                     } else  
  34.                     {  
  35.                         status = false;  
  36.                     }  
  37.                     return status;  
  38.                 }  
  39.             }  
  40.         }  
  41.     }  
  42. }
Output : 
 
 

I hope you enjoyed this blog. Please provide your valuable suggestions and feedback.
Next Recommended Reading Insert data in Grid View without using database