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.
- From the "MVC4 project" window select "Web API".
-
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#".
- Select "Class" and click on the "Add" button.
Add the following code:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- namespace DynamicRows.Models
- {
- public class EmployeeModel
- {
- public List<Information> InfoModel { get; set; }
- }
- public class Information
- {
- public int ID { get; set; }
- public string Name { get; set; }
- public int Contact { get; set; }
- public string Address { get; set; }
- }
- }
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".
Add the following code:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Mvc;
- using DynamicRows.Models;
- namespace DynamicRows.Controllers
- {
- public class HomeController : Controller
- {
- public ActionResult Index()
- {
- EmployeeModel obj = new EmployeeModel();
- obj.InfoModel = new List<Information>();
- obj.InfoModel.Add(new Information { ID = 0, Name = "", Contact = 0, Address = "" });
- return View(obj);
- }
- [HttpPost]
- public ActionResult Index(EmployeeModel objmodel)
- {
- objmodel.InfoModel.Add(new Information { ID = 0, Name = "", Contact = 0, Address = "" });
- return View(objmodel);
- }
- }
- }
Step 4
In the View write some code as in the following:
-
In the "Solution Explorer".
-
Expand the "Views Folder"
-
Select "Home" -> "Index.cshtml".
Join the conversation! Your thoughts help the community grow.