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:

Step 2

Add a Model class as in the following:

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:

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:

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