Editing Multiple Records Using Model Binding in MVC

Nimit Joshi

5y366.8k19100Article

19 Comments

Join the conversation! Your thoughts help the community grow.

nishant vegda6y ago
Please provide source code it's not working
Colm Carberry7y ago
Hi Nimit great article. In my model I have property as an enum How can you change the @TextBox to show a drop down for this property ? Example @Html.TextBox("Invoices[" + @i + "].StatusCode", Model[i].StatusCode) references Status ENum Thank you
gaurav limbachiya7y ago
How to set validation on TextBox.....Onblur event ......?
An Nghiem8y ago
Great tutorial (Y). Could you improve by changing Gender to select list with Enum?
Abhay In9y ago
How did you get generic list of employee into the Post method??
Abhay In9y ago
Just one question in the [Post] method of index you are not inserting the value into any list you are just create an existed_emp object and put the value but every time loop iterate value get changed, so how does it update the value?
soumya sonu9y ago
Model validations are not working for this can u please help me that how to apply model validations for each and very textboxes and dropdowns....
- Nimit Joshi9y ago
  Have you applied DataAnnotations for that?
Riff Jensen10y ago
When I submit form, in the controller I get 'Object reference not set to an instance of an object.' Am I missing something in the View?
- ajay bind8y ago
  If you created dbEntities at top so You have to create constructor then create there for further use in current project.
- Colm Carberry7y ago
  Hi Nimit I also get this message It appears that the Count is set to a maximum of 5 but I cannot see where this is set in your code Any ideas ?
Mary Pentareddy10y ago
Nacer TagziriaI tried to replace the TextBox by a : @Html.DropDownList("ClarderSousSecteurID", new SelectList(ViewBag.CSSIDs, "Value", "Text", Model[i].ClarderSousSecteurID)) ... it shows this for each line ... but the problem is that the selected value of it is always the first item in the list ... any help please. i lost too much time on this. Thank you. Nacer Tagziria Did you get an answer for this yet Nacer ?????????
imran ansari10y ago
and how about having validation based on data annotation.
Sr Karthiga10y ago
nice one
Sr Karthiga10y ago
Nice explanation
Nacer Tagziria10y ago
I tried to replace the TextBox by a : @Html.DropDownList("ClarderSousSecteurID", new SelectList(ViewBag.CSSIDs, "Value", "Text", Model[i].ClarderSousSecteurID)) ... it shows this for each line ... but the problem is that the selected value of it is always the first item in the list ... any help please. i lost too much time on this. Thank you.
Mukesh Kumar10y ago
Good Job Sir
Scott Hennessy11y ago
This post solved my problem. Many thanks.
Diego Canedo11y ago
How i insert multiple records like this?

Introduction

You saw that in ASP.NET MVC we can easily edit a single record handled by the default model binding. It may be possible that you need to edit multiple records. We can show an editable grid of data to the user and the user can easily edit multiple records. You can also save the edited data values by hitting a button.

In that context, multiple model objects are being submitted to the action method. The single record editing works on the assumption that form field names from the view match the corresponding model property names. However when multiple model objects are submitted this assumption is no longer true. So, in this article we'll create the MVC application in Visual Studio 2013.

So, let's start with the following sections:

Creating MVC application
Adding Model
Adding Controller
Adding View
Working the Controller and View

Creating MVC Application

In this section we'll create the MVC application using Visual Studio 2013 using the following procedure:

Step 1: Open Visual Studio 2013 and click on "New Project".

Step 2: Select the "ASP.NET Web Application" and enter the name as in the following:

Creating ASP.Net Web Application

Step 3: Select the "MVC" project template as in the following:

Mvc Project Template in VS 2013

Visual Studio automatically creates the MVC application using MVC 5 and adds files and folders to the project.

Adding Model

In this section we'll add a model for the application. We'll add the existing database to the model using an ADO.NET Entity Data Model using the following procedure.

Step 1: Add the ADO.NET Entity Data Model to the Model folder.

Step 2: Select the database and table as in the following:

Entity Data Model Wizard

After adding the data model you can see that the Employee entity is added to the application.

Employee Entity Diagram

Adding Controller

In this section, we'll add the controller for the model and view. Use the following procedure.

Step 1: Add a new Controller by right-clicking on the Controllers folder in the Solution Explorer.

Step 2: Select the "MVC 5 Controller - Empty" to generate the controller.

Creating Mvc Empty Controller

Step 3: Add the following code to the Index() method:

using ModelBindingApp.Models;
public ActionResult Index()
{
CompanyEntities DbCompany = new CompanyEntities();
var data = from item in DbCompany.Employees
where item.Company == "TCS"
orderby item.ID
select item;
return View(data.ToList());
}

In the code above, this method selects employees from the TCS Company and passes them to the View as a list.

Adding View

In this section we'll add the view for the method in the controller. Use the following procedure.

Step 1: Right-click on the Index() to add the view as in the following:

Adding View in Mvc

Step 2: Replace the code with the code below:

@model List<ModelBindingApp.Models.Employee>
@{
ViewBag.Title = "Index";
}
<h2>Employee List</h2>
@using (Html.BeginForm("Index", "Sample", FormMethod.Post))
{
<table class="table">
@for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>
@Html.TextBox("employees[" + @i + "].ID",
Model[i].ID, new {@readonly="readonly"})
</td>
<td>
@Html.TextBox("employees[" + @i + "].Name",
Model[i].Name, new { @readonly = "readonly" })
</td>
<td>
@Html.TextBox("employees[" + @i + "].Gender",
Model[i].Gender, new { @readonly = "readonly" })
</td>
<td>
@Html.TextBox("employees[" + @i + "].Company",
Model[i].Company, new { @readonly = "readonly" })
</td>
</tr>
}
<tr>
<td colspan="4">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
}

In the code above, all the employee records will display having the company name TCS. You cannot edit the TextBox due to read-only. So, all the textboxes having the same index are considered as "one record".

Step 3: Press Ctrl+F5 to run the application.

Dispalyining Veiw of Controller in Mvc

Working the Controller and View

The data is submitted by the Index(). Now to handle the data we need to write the Index() method with a parameter. Use the following procedure.

Step 1: Add another Index() method with the following code:

[HttpPost]
public ActionResult Index(List<Employee> employees)
{
CompanyEntities DbCompany = new CompanyEntities();
foreach (Employee Emp in employees)
{
Employee Existed_Emp = DbCompany.Employees.Find(Emp.ID);
Existed_Emp.Name = Emp.Name;
Existed_Emp.Gender = Emp.Gender;
Existed_Emp.Company = Emp.Company;
}
DbCompany.SaveChanges();
return View();
}

In the code above, the Index() method takes the parameter named employees. Due to the naming conventions followed by the default binding in the MVC transforms the form fields value into a generic list of Employee objects. Once the changes have been made SaveChanges() is called to save the changes.

Step 2: We need to edit the markup code with the following code:

@using (Html.BeginForm("Index", "Sample", FormMethod.Post))
{
<table class="table">
@for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>
@Html.Hidden("employees.Index", (@i+10))
@Html.TextBox("employees[" + (@i + 10) + "].ID",
Model[i].ID, new {@readonly="readonly"})
</td>
<td>
@Html.TextBox("employees[" + (@i + 10) + "].Name",
Model[i].Name)
</td>
<td>
@Html.TextBox("employees[" + (@i + 10) + "].Gender",
Model[i].Gender)
</td>
<td>
@Html.TextBox("employees[" + (@i + 10) + "].Company",
Model[i].Company)
</td>
</tr>
}
<tr>
<td colspan="4">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
}

In the code above, each table row has the hidden field named Index and the value is set to some arbitrary value. All textboxes have the same index that is specified by the hidden field and considered as "one record".

Step 3: Now again run the application and edit multiple records.

Editing Multiple Objects

Step 4: You can see the records have been updated as in the following:

Generating Index View

Summary

This article described how to update multiple records at a time in an ASP.NET MVC application. Thanks for reading.