Post
Ask Question

Adding Rows Dynamically to The Table in Web API

Introduction

This article describes how to dynamically add rows to the table in the ASP.NET Web API. We can add the rows at runtime to the table.

Procedure for creating the application.

Step 1

First we create a Web API application as in the following:

  • Start Visual Studio 2013.
  • From the Start Window select "New Project".
  • From the new project window select "Installed" -> "Visual C#" -> "Web" -> "Visual Studio 2012".
  • Select "ASP.NET MVC4 Web Application" and click the "OK" button.

    j.jpg
  • From the "MVC4 project" window select "Web API".

    j1.jpg

  • click on the "Ok" button.

Step 2

Add a Model class as in the following:

  • In the "Solution Explorer".
  • Right -click on the "Model folder".
  • Select "Add" -> "class".
  • From the add item window select "Installed" -> "Visual C#".

    j2.jpg
  • Select "Class" and click on the "Add" button.

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace DynamicRows.Models  
  6. {  
  7.     public class EmployeeModel  
  8.     {  
  9.         public List<Information> InfoModel { get; set; }  
  10.     }  
  11.     public class Information  
  12.     {  
  13.         public int ID { get; set; }  
  14.         public string Name { get; set; }  
  15.         public int Contact { get; set; }  
  16.         public string Address { get; set; }  
  17.     }  
  18. } 

Step 3

Now in the "Controller" we add the code that uses all the variables of the Model class. This file exists:

  • In the "Solution explorer".

  • Expand the "Controller" folder.

  • Select the "HomeController".

    j3.jpg

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using DynamicRows.Models;  
  7. namespace DynamicRows.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             EmployeeModel obj = new EmployeeModel();  
  14.             obj.InfoModel = new List<Information>();  
  15.             obj.InfoModel.Add(new Information { ID = 0, Name = "", Contact = 0, Address = "" });  
  16.             return View(obj);  
  17.         }  
  18.         [HttpPost]  
  19.         public ActionResult Index(EmployeeModel objmodel)  
  20.         {  
  21.             objmodel.InfoModel.Add(new Information { ID = 0, Name = "", Contact = 0, Address = "" });  
  22.             return View(objmodel);  
  23.         }  
  24.     }  
  25. }  

Step 4

In the View write some code as in the following:

  • In the "Solution Explorer".

  • Expand the "Views Folder"

  • Select "Home" -> "Index.cshtml".

    j4.jpg

Add the following code:

  1. @model DynamicRows.Models.EmployeeModel  
  2. @{  
  3.     ViewBag.Title = "Dynamically adding rows to table";  
  4. }  
  5.   <script type="text/javascript">  
  6.         function ValidateData() {  
  7.             if ($(".validateID").attr('value') == "0" || $(".validateID").attr('value') == "") {  
  8.                 alert("Enter valide ID ");  
  9.                 return false;  
  10.             }  
  11.             else if ($(".validateName").attr('value') == "") {  
  12.                 alert(" Enter name of employee.");  
  13.                 return false;  
  14.             }  
  15.             else if ($(".validateContact").attr('value') == "") {  
  16.                 alert("Enter Contact number of Employee.");  
  17.                 return false;  
  18.             }  
  19.             else if ($(".validateAddress").attr('value') == "") {  
  20.                 alert("Enter address of employee.");  
  21.                 return false;  
  22.             }  
  23.             return true;  
  24.         }  
  25.     </script>  
  26.     @using (Html.BeginForm("Index", "Home"))  
  27.     {  
  28.         <html>  
  29.         <head>  
  30.             <style>  
  31.                * {  
  32.                    padding: 0px;  
  33.                     margin: 0px;  
  34.                 }  
  35.             </style>  
  36.         </head>  
  37.         <body>  
  38.             <div style="text-align:center;">  
  39.                 <table cellpadding="3" cellspacing="0" border="1" style="border-color:Black;border-collapse:collapse; text-align:center; width:20%;">  
  40.                     <tr style="font-weight: bold; background-color: #c19191; height: 20px;">  
  41.                         <td>Id</td>  
  42.                         <td>Name</td>  
  43.                         <td>Contact</td>  
  44.                         <td>Address</td>  
  45.                     </tr>  
  46.                     @for (int a = 0; a < Model.InfoModel.Count; a++)  
  47.                     {  
  48.                        <tr>  
  49.                             <td style="width:20%;">@Html.TextBoxFor(m => m.InfoModel[a].ID, new { @class = "validateID" })</td>  
  50.                             <td style="width:20%;">@Html.TextBoxFor(m => m.InfoModel[a].Name, new { @class = "validateName" })</td>  
  51.                             <td style="width:20%;">@Html.TextBoxFor(m => m.InfoModel[a].Contact, new { @class = "validateContact" })</td>  
  52.                             <td style="width:20%;">@Html.TextBoxFor(m => m.InfoModel[a].Address, new { @class = "validateAddress" })</td>  
  53.                         </tr>  
  54.                     }   
  55.                    <tr>  
  56.                        <td colspan="2">  
  57.                             <input type="submit" value="Add New Data" title="Add New Data" onclick="javascript:return ValidateData();" />  
  58.                         </td>  
  59.                     </tr>  
  60.                 </table>  
  61.             </div>  
  62.         </body>  
  63.     </html>   
  64.     }  
  65. </html> 

Step 5

Execute the application. The output will be:

j5.jpg

Without adding any records click on the "Add New Data" button.

j6.jpg

Add the record.

j7.jpg


Similar Articles