Question

我正在尝试研究如何在不重新加载页面的情况下将项目添加到MVC页面模型中包含的列表中。

我有一张表格，如下图所示。该页面运行“申请人”模型，其中包含“联系人”列表。

在执行“应用程序”时，用户需要能够添加多个“联系人”。单击“加号”时，它会在列表中添加一个新的“联系”项。

http://i.stack.imgur.com/DUvb7.png

我尝试过多种方式（Actionlinks等），但每种方式似乎都会重定向页面。

如果有人能帮助阐明这一点，我们将不胜感激

这是我的模型的缩减示例

public class ApplicantMessage : PersonMessage
{
    //... Other properties here
    public virtual ICollection<ContactMessage> Contacts { get; set; }
}

这是定义“联系人”详细信息的div区域（注意，我不知道是否或如何在这里使用@ Html.TextBoxFor（..））

<!-- Other Contacts -->
<div class="row">
    <div class="span2">
        <label class="label">Other Contacts</label>
    </div>
    <div class="span4">
        <input type="text" class="new-contact-details"/>
    </div>
</div>
<div class="row">
    <div class="span2"></div>
    <div class="span4">
        @Html.DropDownList("contactMethodDropdown", default(ContactMethod).ValueList(), new{@class="dropdown-slim"})
        <input type="text" class="new-contact-contact-details"/>
        <a rel="tooltip" href="#" data-original-title="Add a contact" class="icon-plus"></a>
    </div>
</div>

这是我的控制器

public class ApplicationController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult NewApplication()
    {
        var message = new ApplicantMessage();
        return View(message);
    }

    [HttpPost]
    public ActionResult NewApplication(ApplicantMessage message)
    {
        if (ModelState.IsValid)
        {
            //add to DB
        }
        return View(message);
    }

}

此外，值得注意的是，联系人需要显示在页面的右侧。我假设将使用某种局部视图完成？

Answer 1

将ApplicantMessage模型发布到控制器时，应使用联系人的索引。

基本上，您的HTML应如下所示：

<div class="row">
    <div class="span2"></div>
    <div class="span4">
        @Html.DropDownList("Contacts[0].ContactMethod", default(ContactMethod).ValueList(), new{@class="dropdown-slim"})
        <input type="text" name="Contacts[0].Name" class="new-contact-contact-details"/>
    </div>
    <div class="span4">
        @Html.DropDownList("Contacts[1].ContactMethod", default(ContactMethod).ValueList(), new{@class="dropdown-slim"})
        <input type="text" name="Contacts[1].Name" class="new-contact-contact-details"/>
        <a rel="tooltip" href="#" data-original-title="Add a contact" class="icon-plus"></a>
    </div>
</div>

注意索引器？您的模型绑定器将根据这些自动创建阵列。通过javascript添加额外的联系人时，您还需要确保您的索引相应增加。

有关详细信息，请阅读此内容（旧的，但仍然非常相关）post by Phil Haack

MVC4添加到包含在模型内的列表而不从视图重定向

1 个答案: