Json Insert list of Object into Database in Asp.net

In this article i'm going to explain how to insert list of object by using json in asp.net. In my previous article i explained about how to insert data into database by using json, in the similar way we going to see how to insert data along with collection of data. To achieve this requirement first we need to create database Table.

Create Database Table

i'm creating a Students related table called Student and Subject
Student - this table contain only student information and the Column names - {ID, Name, Gender }, i'm using only 3 columns. Subject - this table add multiple subject which belongs to student.

Create Database : Student Table

 Create Table Student(
  ID int,
  Name varchar(50),
  Gender varchar(50))

Create Database : Subject Table

 Create Table Subject(
  studentID int,
  subjectName varchar(50))

HTML Markup : Design Page

In design page i'm adding listbox with predefined names i.e nothing but a Subject Name , when ever we are creating student records we can choose multiple subjects from listbox. And this listbox is a collection of data we are going to insert that data into Subject table.

<asp:TextBox ID="txtID" runat="server" placeholder="studentID"></asp:TextBox><br />
<asp:TextBox ID="txtName" runat="server" placeholder="student Name"></asp:TextBox><br />
<asp:TextBox ID="txtGender" runat="server" placeholder="Gender"></asp:TextBox><br />
<asp:Button ID="BtnInsert" runat="server" Text="Insert" />
<asp:ListBox ID="lbSubject" runat="server" SelectionMode="Multiple" Width="300px" Height="200px">
   <asp:ListItem Text="English" Value="1"></asp:ListItem>
   <asp:ListItem Text="Science" Value="2"></asp:ListItem>
   <asp:ListItem Text="Computer" Value="3"></asp:ListItem>
   <asp:ListItem Text="IT" Value="4"></asp:ListItem>
   <asp:ListItem Text="Mathematic" Value="5"></asp:ListItem>

C# Coding

C# Coding : Adding Student and Subject Class

Create a class with the name of Student and add four automatic property { ID, Name, Gender, Subject[] Array} as i shown in below code snippet. Which is used to transfer or validate the data between class, and while working with automatic property it is not required to declare the variable.

 public class Student
  public int ID { get; set; }
  public string Name { get; set; }
  public string Gender { get; set; }
  public string[] Subject { get; set; }
 public class Subject
  public int ID { get; set; }
  public string Name { get; set; }

C# Coding : Adding Namespace

C# Coding : Insert Method

This Insert WebMethod i'm going to call through json and passing parameter.

 public static void Insert(Student stu)
   SqlConnection con = new SqlConnection("Server=.; Database=master; User Id=sa; Password=tiger;");
   SqlCommand cmd = new SqlCommand("insert into Student(ID,Name, Gender) values('" + stu .ID+ "','" + stu.Name + "','" + stu.Gender + "')", con);
   if (stu.Subject != null)
    foreach (string strSub in stu.Subject)
     SqlCommand cmdov = new SqlCommand("Insert into Subject(studentID, subjectName) values('" + stu.ID + "','" + strSub + "')", con);

jQuery : JSON Method

Add jQuery file in header section

<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 student = {};
       var subject = new Array();
       var i = 0;
         student.Name = $('[id$=txtName]').val();
         student.Gender = $('[id$=txtGender]').val();
         student.ID = $('[id$=txtID]').val();
         //Getting Selected List Items and stored in array
         $('[id$=lbSubject] option:selected').map(function () {
             var list = $(this).text();
             subject[i] = list;
         student.Subject = subject;
           contentType: 'application/json; charset=utf-8',
           type: 'post',
           url: 'WebForm1.aspx/Insert',
           dataType: 'json',
           data: JSON.stringify({ stu:student}),
           success: function (data) {
           error: function (result) {

Post a Comment