Binding difficulty upon postback of list - asp.net-mvc

Question

I am having the difficulty to post back the new data being entered. It seems that the data sent to the view are sent back to the controller, despite changes made to the data before submit.
My code is as follows:
Controller
public class GroupRateController : Controller
{
//
// GET: /GroupRate/
public ActionResult Index()
{
GroupRateModel model = new GroupRateModel();
return View(model);
}
[HttpPost]
public ActionResult Index(GroupRateModel model)
{
model.Save(model);
return View(model);
}
}
View
#model MvcApplication1.Models.GroupRateModel
#{
View.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary()
<table>
<thead>
</thead>
<tr><th>Rate Group</th><th>Default Amount</th><th>Client Amount</th></tr>
#foreach (var item in #Model.ClientRateDetails)
{
<tr><td>#item.RateGroupName</td><td align="right">#Html.DisplayFor(m => #item.RateGroupID)</td><td>#Html.EditorFor(model => item.ClientRate)</td></tr>
}
</table>
<p> <input type ="submit" value="Save" id="submit" /></p>
}
Model
using System.ComponentModel.DataAnnotations;
namespace MvcApplication1.Models
{
public class GroupRateModel
{
public List<ClientRateDetailsModel> ClientRateDetails = new List<ClientRateDetailsModel>() ;
public string Name { get; set; }
public GroupRateModel()
{
ClientRateDetails.Add(new ClientRateDetailsModel
{
RateGroupID = 1,
RateGroupName = "Test1",
ClientRate = 100
});
ClientRateDetails.Add(new ClientRateDetailsModel
{
RateGroupID = 2,
RateGroupName = "Test2",
ClientRate = 200
});
ClientRateDetails.Add(new ClientRateDetailsModel
{
RateGroupID = 3,
RateGroupName = "Test3",
ClientRate = 300
});
}
public void Save(GroupRateModel model)
{
foreach (var item in model.ClientRateDetails)
{
//...;
}
}
}
public class ClientRateDetailsModel
{
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:00.00}", NullDisplayText = "")]
[Range(0, (double)decimal.MaxValue, ErrorMessage = "Please enter a valid rate")]
public decimal? ClientRate { get; set; }
public int? RateGroupID { get; set; }
public string RateGroupName { get; set; }
}
}

Answer 1

This might be because the names of your input controls don't have correct names for the model binder to be able to fetch the values correctly. Also I see that the ClientRateDetails is not a property but a field in your model which won't be bound correctly. So here's how I would suggest you to improve your code:
Start with the model:
public class GroupRateModel
{
public IEnumerable<ClientRateDetailsModel> ClientRateDetails { get; set; }
public string Name { get; set; }
public GroupRateModel()
{
// Remark: You cannot assign your ClientRateDetails collection here
// because the constructor will be called by the default model binder
// in the POST action and it will erase all values that the user
// might have entered
}
public void Save(GroupRateModel model)
{
foreach (var item in model.ClientRateDetails)
{
//...;
}
}
}
public class ClientRateDetailsModel
{
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:00.00}", NullDisplayText = "")]
[Range(0, (double)decimal.MaxValue, ErrorMessage = "Please enter a valid rate")]
public decimal? ClientRate { get; set; }
public int? RateGroupID { get; set; }
public string RateGroupName { get; set; }
}
then a controller:
public class HomeController: Controller
{
public ActionResult Index()
{
var model = new GroupRateModel();
model.ClientRateDetails = new[]
{
new ClientRateDetailsModel
{
RateGroupID = 1,
RateGroupName = "Test1",
ClientRate = 100
},
new ClientRateDetailsModel
{
RateGroupID = 2,
RateGroupName = "Test2",
ClientRate = 200
},
};
return View(model);
}
[HttpPost]
public ActionResult Index(GroupRateModel model)
{
model.Save(model);
return View(model);
}
}
and then the corresponding view:
#model MvcApplication1.Models.GroupRateModel
#{
View.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary()
<table>
<thead>
<tr>
<th>Rate Group</th>
<th>Default Amount</th>
<th>Client Amount</th>
</tr>
</thead>
#Html.EditorFor(x => x.ClientRateDetails)
</table>
<p><input type ="submit" value="Save" id="submit" /></p>
}
and then have a corresponding editor template (~/Views/Home/EditorTemplates/ClientRateDetailsModel.cshtml):
#model MvcApplication1.Models.ClientRateDetailsModel
<tr>
<!-- Make sure you include the ID as hidden field
if you want to get it back inside the POST action
-->
#Html.HiddenFor(x => x.RateGroupID)
<td>#Model.RateGroupName</td>
<td align="right">#Model.RateGroupID</td>
<td>#Html.EditorFor(x => x.ClientRate)</td>
</tr>