javascript - 创建 List<T> 从 View 和 POST 到 MVC Controller

Question

这个问题在这里已经有了答案:





Submit same Partial View called multiple times data to controller?

(1 个回答)


6年前关闭。




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

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

有问题的特定页面允许用户添加新的 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 View 引擎。

我使用 @Html.EditorFor(x => x.Property) 一切正常 helper ;对于根对象( Item 的)属性上的所有(除了一个 - 稍后告诉你)元素。

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

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

如何允许用户添加新的 Appointment到此List<Appointment>来自 在 内这页纸？

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

我怎样才能做到这一点？

所需 View
我需要用户能够添加 Appointment s 从页面内 - 直到他们喜欢的任何数量，真的。

我希望有一个“创建”列表 Appointment s 在页面上某个区域的列表(ul 或任何类似内容等)中。

在该列表下方，我想要一些与 Day 相关的文本框。 , From和 To Appointment 的属性- 使用“添加”按钮，将其附加到列表中(并清除文本框，理想情况下)。

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

这是一个示例(在 MSPaint - old-school tools ftw 中绘制!)我想象的 View 看起来像:



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

我已经查看了许多与添加对象有关的解决方案
页面的 JavaScript - 这确实有效。唯一的问题是我做不到
在发布到 Controller 的对象中拾取它们。

我也被指出直接使用 Ajax 创建 Appointment对象并将其插入页面，但这似乎也没有被拾取。

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

Answer 1

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

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

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

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

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

然后单击 Add 时的 jQuery 克隆功能将类似于

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

或者

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

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

为了能够发送带有在 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