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" %> 

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

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now