Insert Record into Database by using JSON in Asp.net

Mastering JSON Data Insertion in ASP.NET

Introduction:

Embrace the power of JSON in ASP.NET as we delve into the intricacies of inserting data seamlessly. This comprehensive guide walks you through the process, from adding jQuery to your project to implementing the necessary HTML markup and C# coding.

Adding jQuery to Your Project

To kickstart your journey into JSON data insertion, the first step is adding the jQuery file to your ASP.NET project. This versatile library plays a crucial role in handling asynchronous requests and simplifying the integration of JSON data.

For a deeper understanding of JSON, explore our detailed explanation Retrieving User Details with JSON in ASP.NET

HTML Markup: Designing the Page for Data Insertion

In the WebForm1.aspx file, set the stage for data insertion by incorporating four essential TextBox controls and a Button. This user-friendly design ensures a seamless experience for users contributing data to the database.

<asp:TextBox ID="txtempID" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtempName" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtGender" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtSalary" runat="server"></asp:TextBox><br />
<asp:Button ID="BtnInsert" runat="server" Text="Insert" />

C# Coding: Defining the Employee Class:

Create a robust Employee class in C# with automatic properties for ID, Name, Gender, and Salary. These properties facilitate smooth data transfer and validation without the need to declare variables explicitly.

  

public class Employee
  {
    public int ID { get; set; }
    public string Name { get; set; }
    public string Gender { get; set; }
    public int Salary { get; set; }
  }

C# Coding: Insert Method and Namespace Addition:

Enhance your code by adding the necessary namespace and implementing the Insert method within the C# code-behind. This method is vital for handling data insertion into the database, making your ASP.NET application dynamic and responsive.

 // C# Coding
 using System.Web.Services;
 
 [WebMethod]
 public static void Insert(Employee emp)
 {
   SqlConnection con = new SqlConnection("Server=.; Database=master; User Id=sa; Password=tiger;");
   SqlCommand cmd = new SqlCommand("Insert Employees(Name, Gender, Salary) 
                                    values('" + emp.Name + "','" + emp.Gender + "','" + emp.Salary + "')", con);
  con.Open();
  cmd.ExecuteNonQuery();
  con.Close();
 }

jQuery: JSON Method for Efficient Data Handling:

Integrate jQuery into your project and utilize it to handle JSON data seamlessly. The following script initiates an AJAX request, sending the employee details to the Insert method for efficient data insertion.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
   $('[id$=BtnInsert]').click(function () {
    var emp = {};
        emp.Name = $('[id$=txtName]').val();
        emp.Gender = $('[id$=txtGender]').val();
        emp.Salary = $('[id$=txtSalary]').val();

   $.ajax({
         contentType: 'application/json; charset=utf-8',
         type: 'post',
         url: 'WebForm1.aspx/Insert',
         dataType:'json',
         data: JSON.stringify({ emp: emp }),
         success: function (data) {
                   alert('success');
                  },
         error: function (result) {
                   alert('error');
                  }
         });
     });
 });
</script>

Conclusion

Master the art of JSON data insertion in ASP.NET with this step-by-step guide. From integrating jQuery and designing a user-friendly HTML page to implementing robust C# coding for data handling, this comprehensive approach ensures a dynamic and responsive web application. Elevate your ASP.NET development skills and unlock the full potential of JSON for efficient data insertion.