0

我正在尝试研究如何在不重新加载页面的情况下将项目添加到我的 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);
    }

}

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

4

1 回答 1

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 添加额外的联系人时，您还需要确保索引相应地增加。

有关更多信息，您应该阅读Phil Haack 的这篇（旧的，但仍然非常相关的）帖子

于 2013-11-06T09:08:36.957 回答