MVC Razor post updated list

Question

My model as below:

public class Product
{
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
}

Index Controller as below:

public ActionResult Index(int id)
{
    return View(GetProducts()); //Get Product return List
}

My Post controller as below: It is posting back entire list. I need only updated records.

public ActionResult Update(List<Prouct> Proucts)
{

}

View as below:

@model List<Product>

@using (Html.BeginForm("Update", "Product", FormMethod.Post, new {Proucts=Model})) {
for (var i = 0; i < Model.count(); i++)
{
    @Html.HiddenFor(v => Model[i].Id)
    @Html.TextBoxFor(m => Model[i].Name)
    </div>
    <button type="submit" title="Save">
}

SO when posting back it post entire list (including the updated). e.g. if there are 100 products it post back 100. Even If I changed 1 or none. So I have to update all again.

Is there way to post only changed records?

The form is going to post everything that's in the form. You could in your server-side logic check if the posted record values are different from the stored record values and only update if they are. But that may be just as expensive an operation, or even more, than just allowing the update. Conversely you could write a lot of complex JavaScript to track state and craft an AJAX post based on changed records or something like that. The sacrifice there is the complexity of the code. Is it that much of a problem that records are being updated to the same values? — David, Sep 27 '17 at 15:18
I was having same issue in one of the project but fortunately, I was using knockout which has observable collection to identify changes in collection. — Akash KC, Sep 27 '17 at 15:53

Tiago Sousa · Accepted Answer · 2017-09-27T15:48:27.397

There is no functionality provided out-of-the-box to do what you want to do using Razor pages.

Your best bet is to make a some javascript code to detect and only post the input field which have changed on the browser.

A simple search through StackOverflow will yield some possible solutions that can you help achieve this:

With jQuery - JQuery how to submit only changed fields when the form has some data array
Without - Using prepopulated form, submit only changed fields

score 0 · Answer 2 · answered Sep 28 '17 at 07:38

I am not sure in the client side (Jquery, Javascript) would help. But in the server side you can do in your Post mehtod public ActionResult Update(List Proucts) by this.

 public ActionResult UpdatePerson(List<Person> Proucts)
    {
        var dbProductsList = GetProducts(); //Get Product List
        foreach (var product in Proucts)
        {
            if (!dbProductsList.Where(x => x.Name == product.Name).Any())
            {
                dbContext.Update(product);
                dbContext.SaveChanges();
            }
        }
        return View();
    }

For you client side you should go for Ajax.

This is good as well. But My model is quite big so I need some sort of client side solution. Maybe I can use some sort of grid rather than MVC rendering — user2739418, Sep 28 '17 at 16:11

MVC Razor post updated list

2 Answers2