从 View 和 POST 创建 List<T> 到 MVC 控制器 [重复]

Question

背景
我正在开发客户的网站项目，我使用 MVC 创建网站。我让 EF 使用 SQLDB 来存储数据。

我的 WebApp 配备了用于管理/添加/更新Items 等的后台区域。

有问题的特定页面允许用户通过输入数据并单击表单上的“保存”将新的Item 添加到数据库中。

Item 具有一些属性，它们都可以很好地添加到新行中。

Item 还包含一个针对它声明的List<Appointment>s（我会将它们序列化并将它们保存在适当的列中）。

对象看起来像这样（为简洁起见，我删除了一些属性）：

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Appointment> Appointments { get; set; }
    // Plus some other properties
}

public class Appointment
{
    public string Day { get; set; }
    public string From { get; set; }
    public string To { get; set; }
}

我已经设置了一个要使用的 ViewModel，并且我正在练习所有通常的良好做法。它看起来像这样：

public class AddItemViewModel
{
    [Required(ErrorMessage = "Please enter an item name")]
    [Display(Name="Item Name")]
    public string Name { get; set; }

    [Display(Name="Appointments")]
    public List<Appointment> Appointments { get; set; }

    ...
    // Other properties in here
    ...
}

我正在使用 Razor 视图引擎。

使用@Html.EditorFor(x => x.Property) 助手，我一切正常；对于根对象 (Item's) 属性上的所有（除了一个 - 稍后告诉您）元素。

我可以将 ViewModel 发布到控制器并保存一个新的 Item 和所有爵士乐 - 所以那里一切都很好。

问题
我在 ViewModel 中声明了一个 List<Appointment>。

如何允许用户从在页面中将新的Appointments 添加到此List<Appointment>？

我想将这些分配给要在发布 ViewModel 时创建的 Item 对象 - 我将在我的控制器/服务等中执行此操作。

我怎样才能做到这一点？

所需的视图
我需要用户能够从页面内添加Appointments - 最多可以添加他们喜欢的数量，真的。

我希望在页面上的某个区域中的列表（ul 或类似内容等）中有一个“已创建”Appointments 的列表。

在该列表下方，我想要一些与 Appointment 的 Day、From 和 To 属性相关的文本框 - 带有“添加”按钮，将其附加到列表中 （并清除文本框，理想情况下）.

作为奖励，我还希望每个项目旁边有某种“×”式的“删除”按钮，以将其从 List<Appointment> 和视图中删除。

这是我想象的视图的示例（用 MSPaint - 老式工具 ftw 绘制！）：

我尝试过的事情
我一直在广泛地挖掘，但到目前为止还没有任何东西可以帮助我。

• 我已经查看了许多与在 页面的 JavaScript - 这确实有效。唯一的问题是我做不到 在发布到控制器的对象中拾取它们。

• 也有人指出我直接使用 Ajax 创建一个 Appointment 对象并将其插入到页面中，但这似乎也没有被采纳。

  李>

非常感谢您的专业知识、知识和智慧。

Answer 1

1. 为了能够在 UI 上动态添加新的约会输入控件，点击添加按钮，您可以

[下面的代码来自我的头顶，更像是伪代码]

a) 使用 jQuery/js 克隆一个隐藏的 div，该 div 您已在包含所有相关约会控件的视图上预渲染。

例如这将是一个预渲染的 div，将用作模板

<div style="display:none;" id="appointment-template">
    <input type=text>
</div>

然后点击添加的 jQuery 克隆功能将类似于

var addNewAppointmentRowFromTemplate = function(){
        $("#appointments-list-container").append($("#appointment-template").clone());
    }

或

b) 从服务器获取部分视图并将其附加到表单（再次使用 jQuery $.get / js xhr）

 $.get( "controller/templatDivActionMethodUrl", function( data ) {
      $("#appointments-list-container").append( data );
    });

1. 为了能够发送带有在 ActionMethod 的 Item 参数中接受的 List in Item 的模型，您可以

a) 使用 jquery/javascript 动态创建一个与服务器端模型结构相同的 json 对象（模型更改时可维护性将成为问题）。

    var appointmentsJson = [];
    //foreach loop is a pseudo code, can be replaced with $.each()
    foreach (var appointment in $("#appointments-list-container").children()){
            appointmentsJson.push(new {'day' : $(appointment).children("#day").val(),'from' : $(appointment).children("#from").val(),'to' : $(appointment).children("#to").val()})  ;}

    //and then post this json to actionMethod

    $.post("serverController/Actionmethod",{appointments: appointmentsJson});

或

b) 使用 ASP.Net MVC 附带的 ModelBinder 功能。我们那里有大量的文档/教程，这是一个起点： https://docs.asp.net/en/latest/mvc/models/model-binding.html