如何在剃刀视图中将数据动态添加到视图模型中的列表属性？

Question

我有一个客户需要能够创建候选人。候选人可以有很多资格（资格是具有 4 个属性的模型）。客户端需要能够在创建页面为员工添加N个资质。

查看模型

public class CreateCandidateViewModel
{
    [DisplayName("First Name"), Required]
    public string FirstName { get; set; }

    [DisplayName("Last Name"), Required]
    public string LastName { get; set; }

    [DisplayName("Email Address"), Required]
    public string Email { get; set; }

    [DisplayName("Phone Number"), Required]
    public string Phone { get; set; }

    [DisplayName("Zip Code"), Required]
    public int ZipCode { get; set; }

    public List<Qualification> Qualifications { get; set; }
}

资格模型

public class Qualification
{
    [Key]
    public int Id { get; set; }
    public int QualificationTypeId { get; set; }
    public string Name { get; set; }
    public DateTime DateStarted { get; set; }
    public DateTime DateCompleted { get; set; }

    [ForeignKey("QualificationTypeId")]
    public virtual QualificationType Type { get; set; }
}

我不知道如何解决这个问题。我在考虑先创建候选人，然后将客户端发送到另一个视图，客户端可以在其中添加资格等。

Answer 1

斯蒂芬在评论中提到，如果您想让用户保持一致，您可能需要使用 javascript 或 jquery 来完成此操作。

我假设您的 post 控制器正在等待 CreateCandidateViewModel

当您的模型具有属性对象列表时，可以进行模型绑定，只要在提交表单时输入的命名正确即可。关键是对输入的名称进行索引：

<input type="text" name="Qualifications[0].Id" />
<input type="text" name="Qualifications[0].QualificationTypeId" />
<input type="text" name="Qualifications[0].Name" />
<input type="text" name="Qualifications[0].DateStarted" />
<input type="text" name="Qualifications[0].DateCompleted" />
<input type="text" name="Qualifications[1].Id" />
<input type="text" name="Qualifications[1].QualificationTypeId" />
<input type="text" name="Qualifications[1].Name" />
<input type="text" name="Qualifications[1].DateStarted" />
<input type="text" name="Qualifications[1].DateCompleted" />

这将在提交时正确绑定到您的模型。在添加 "qualification" 后删除它时请注意重置索引，否则您可能会在列表中得到空对象，或丢失对象。我之前用 JQuery 和正则表达式成功地做到了这一点。

如果您想采用 Ajax 方式，您可以创建局部视图并使用 AJAX 调用它。

控制器

public ActionResult QualificationsPartial(Int32 Index)
{
    return PartialView(model:Index);
}

局部视图

@model Int32

<input type="text" name="Qualifications[@Model.ToString()].Id" />
<input type="text" name="Qualifications[@Model.ToString()].QualificationTypeId" />
<input type="text" name="Qualifications[@Model.ToString()].Name" />
<input type="text" name="Qualifications[@Model.ToString()].DateStarted" />
<input type="text" name="Qualifications[@Model.ToString()].DateCompleted" />

Ajax 在主视图上

var QualificationIndex = parseInt(1);  // 1 because we already have 0 loaded

$("#AddQualificationElement").click(function () {

    $.ajax({
        cache: false,
        type: "GET",
        url: "/MyController/QualificationsPartial",
        data: { 
           Index: QualificationIndex
        },
        success: function (data) {
            // data will be the html from the partial view
            $("#QualificationsContainer").append(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            // Handle the error somehow
        }
    }); // end ajax call
}); // end AddQualificationElement click event

如何在剃刀视图中将数据动态添加到视图模型中的列表属性？

How can I dynamically add data to a List property in view model in a razor view?

c#

asp.net

asp.net-mvc

razor

asp.net-mvc-4

控制器

局部视图

Ajax 在主视图上

如何在剃刀视图中将数据动态添加到视图模型中的列表 属性？

How can I dynamically add data to a List property in view model in a razor view?

c#

asp.net

asp.net-mvc

razor

asp.net-mvc-4

控制器

局部视图

Ajax 在主视图上

如何在剃刀视图中将数据动态添加到视图模型中的列表属性？