How To Dynamically Add Rows To A Table In MVC3 with Example

In this article i will show you how you can dynamically add rows to a table in MVC3.Like dynamically adding rows in a gridview.

So for this first you needed to create a new mvc3 web application. In this add new controller and a model. After adding model file we will create a model .

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace dunamicrows.Models
{
public class StudentModel
{
public List<Detail> DetailModel { get; set; }
}
public class Detail
{
public int RollNo { get; set; }
public string Name { get; set; }
public int Marks { get; set; }
public string Address { get; set; }
}
}

Now come to your controller and generate a view. After generating view add the bellow code in your view.

@model dunamicrows.Models.StudentModel
@{
ViewBag.Title = "How To Dynamically Add Rows To A Table In MVC3 ";
}
< script language="javascript">
function ValidateData() {
if ($(".validateClassRollNo").attr(`value`) == "0" || $(".validateClassRollNo").attr(`value`) == "") {
alert("Please enter a valid Roll No.");
return false;
}else if ($(".validateClassName").attr(`value`) == "" ) {
alert("Please enter name.");
return false;
} else if ($(".validateClassMarks").attr(`value`) == "") {
alert("Please enter marks.");
return false;
} else if ($(".validateClassAddress").attr(`value`) == "") {
alert("Please enter address.");
return false;
}
return true;
}
< /script>
@using (Html.BeginForm("Index", "Home"))
{
<table width="20%" cellpadding="3" cellspacing="0" border="1" style="border-color:Black;border-collapse:collapse;">
<tr style="font-weight:bold;background-color:Gray;height:20px;">
<td>RollNo</td>
<td>Name</td>
<td>Marks</td>
<td>Address</td>
</tr>
@for(int i=0;i<Model.DetailModel.Count;i++)
{
<tr>
< td>@Html.TextBoxFor(m => m.DetailModel[i].RollNo, new { @class = "validateClassRollNo" })</td>
< td>@Html.TextBoxFor(m => m.DetailModel[i].Name, new { @class = "validateClassName" })</td>
< td>@Html.TextBoxFor(m => m.DetailModel[i].Marks, new { @class = "validateClassMarks" })</td>
< td>@Html.TextBoxFor(m => m.DetailModel[i].Address, new { @class = "validateClassAddress" })</td>
</tr>
}
<tr>
< td colspan="4"><input type="submit" value="Add New Record" title="Add New Record" onclick="javascript:return ValidateData();"/></td>
</tr>
</table>
}

`
After this come to your controller and add the below code. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using dunamicrows.Models;

namespace dunamicrows.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
StudentModel objstudentmodel = new StudentModel();
objstudentmodel.DetailModel = new List<Detail>();
objstudentmodel.DetailModel.Add(new Detail { RollNo = 0, Name = "", Marks = 0, Address = "" });
return View(objstudentmodel);
}
[HttpPost]
public ActionResult Index(StudentModel objstudentmodel)
{
objstudentmodel.DetailModel.Add(new Detail { RollNo = 0, Name = "", Marks = 0, Address = "" });
return View(objstudentmodel);
}

}
}

In above code first i have created index [httpget] methos and after that i have created [httppost] method. In httppost index method i have added one more row in the collection which i am getting after after page post.

Now check the javascript code which i have written in index view page.

<script language="javascript">
function ValidateData() {
if ($(".validateClassRollNo").attr(`value`) == "0" || $(".validateClassRollNo").attr(`value`) == "") {
alert("Please enter a valid Roll No.");
return false;
}else if ($(".validateClassName").attr(`value`) == "" ) {
alert("Please enter name.");
return false;
} else if ($(".validateClassMarks").attr(`value`) == "") {
alert("Please enter marks.");
return false;
} else if ($(".validateClassAddress").attr(`value`) == "") {
alert("Please enter address.");
return false;
}
return true;
}
< /script>

in above code i am validating weather the user have added all the necessary value in newly generated column or not.

Now run the page you will get the output.


Now without adding any data click on the button to ad the row . You will get the error message to fill the details.



Now add the record and click on button