控制器

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来实现这一点。

我假设您的帖子控制器期待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" />

这将在提交时正确绑定到您的模型。删除＆＃34;资格＆＃34;时要注意重置索引。添加之后，或者您可能会在列表中找到空对象或丢失对象。我之前使用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

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

1 个答案:

控制器

部分视图

主视图上的Ajax