Update MVC ViewModel List from the client using either jQuery or JavaScript

Question

I have a viewmodel along the lines of

public class Person
{
    public Person()
    {
        Locations = new List<Location>();
    }

    public int Id {get;set;}
    public string Name {get;set;}
    public List<Location> Locations {get;set}
}

public class Location
{
    public int Id {get;set;}
    public string LocationName {get;set;}
}

The class Person is used to populate a simple view that displays the Person details and below the list of Locations.

I have created a button that adds a new Location by creating a new div, populating html and then appending it to a div containing all of the Locations.

$('#Locations').append(newItem.html());      <---- newItem - contains new div

<div id="Locations">
    <div class="location">
    </div>
    ...
    ...
    <div class="location">
    </div>
</div>

All of this works, but on posting back to the controller, the new locations are not passed back in the viewmodel.

How is this done?

Can I see the data in any other way?

I have used ajax before, but cannot use it on this specific site.

Answer 1

Rico Suter has a great blog about this at https://blog.rsuter.com/asp-net-mvc-how-to-implement-an-edit-form-for-an-entity-with-a-sortable-child-collection/ . The extension methods he created are really easy to use and customize.

Answer 2

据我所知，您实际上并没有向后提交任何新位置-您需要将它们封装到隐藏的输入字段（以及用于向用户显示信息的div中），以便在您重新提交表单数据时，新位置将包含在请求中，并且可以由您的控制器操作捕获。

Answer 3

It sounds like you are trying to bind an array when you post back. The general form to format your HTML input tags so that they will reconstitute as a list when you bind in post is described in several places such as Phil Hack - Model Binding To A List . So if you structure your DOM changes to adhere to the format described, your extra rows should bind on post.

Answer 4

将代码更改为使用Ajax调用，然后在返回时添加相关的html以添加所需的隐藏字段。