Question

我正在尝试创建一个动态生成部分视图的视图。每个部分视图都有一个constexpr，用户可以在其中输入商家名称。

以下是我的观看代码：

TextBox

正如您所看到的，代码“Add More”中有一个ActionLink，它实际上在div“ajax-partial-view-box”中添加了部分视图。

所以，我想要实现的是当我提交表格时。我想通过点击“添加更多”链接动态获取在div“ajax-partial-view-box”中添加的所有TextBox的文本。

部分视图中没有与TextBox关联的ID。任何帮助或建议表示赞赏。

这是我的部分视图代码：

@model BrightMediaTest.merchant

@{
ViewBag.Title = "AddMerchant";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

<h2>AddMerchant</h2>

@Ajax.ActionLink("Add More", "AddMerchantPartial", "MerchantDB", new AjaxOptions { UpdateTargetId = "ajax-partial-view-box", InsertionMode = InsertionMode.InsertAfter })

@using (Html.BeginForm("AddMerchant", "MerchantDB", FormMethod.Post, new { }))
{
<ul style ="list-style: none;">
<li>
    @Html.LabelFor(m => m.merchantName)
</li>
<li>
    @Html.TextBoxFor(m => m.merchantName)
</li>
</ul>
<div id="ajax-partial-view-box">

</div>
<input type="submit" value="Add" />
}

因此，我在提交表单时尝试在数据库中添加所有商家名称。我有一个Action“AddMerchant”，我将使用它在数据库中添加所有这些商家名称。

我的商家ViewModel如下：

@model BrightMediaTest.merchant

<ul style="list-style: none;">
    <li>
        @Html.LabelFor(m => m.merchantName)
    </li>
    <li>
        @Html.TextBoxFor(m => m.merchantName)
    </li>
</ul>

此代码是使用Entity Framework生成的。

由于

Answer 1

好的，所以我重新创建了一个问题样本，归结为如果不在name属性中指定索引就无法发布列表。请参阅：MVC Form not able to post List of objects

在一天结束时，在用户点击提交之前，您将拥有 n 商家名称输入。在您的控制器发布操作上，您将拥有以下内容：

[HttpPost]      
public ActionResult AddMerchant(List<merchant> merchant)
{
    //post logic
}

在你当前的设置中，参数将为null，但是你的HttpContext.Request中的表单值不会，它们看起来像这样：

{merchantName=test1&merchantName=test2}

你需要指定这些输入应该绑定到哪里，现在他们在一个巨大的牧场中迷失了羊。这是通过指定这些输入所属的对象的索引来完成的。

例如：merchant[i].merchantName其中 i 是某个索引。

添加部分后，他们需要有一个对象类名称和一个前面加上merchantName值的索引。在用户点击添加之前，您的html看起来像这样：

 <ul style="list-style: none;">
        <li>
            <label for="merchantName">merchantName</label>
        </li>
        <li>
            <input id="merchantName" name="merchant[0].merchantName" value="" type="text">
        </li>
    </ul>
    <div id="ajax-partial-view-box">


<ul style="list-style: none;">
    <li>
        <label for="merchantName">merchantName</label>
    </li>
    <li>
        <input id="merchantName" class="valid" aria-invalid="false" name="merchant[1].merchantName" value="" type="text">
    </li>
</ul>
<ul style="list-style: none;">
    <li>
        <label for="merchantName">merchantName</label>
    </li>
    <li>
        <input id="merchantName" class="valid" aria-invalid="false" name="merchant[2].merchantName" value="" type="text">
    </li>
</ul></div>
    <input value="Add" type="submit">

然后你形成的数据看起来像：

{merchant%5b0%5d.merchantName=test1&merchant%5b1%5d.merchantName=test2&merchant%5b2%5d.merchantName=test3}

并且您的action参数将包含3个值和正确的数据。

现在，你这样做是另一回事。有很多方法可以通过Razor或Javascript来处理它

Answer 2

你想要做的就是失去AjaxHelper。您需要更好地控制商家的插入行为。

<a href="@Url.Action("AddMerchantPartial", "MerchantDB")" class="add-merchant">Add More</a>

用jQuery连接它。使用index跟踪添加到表单中的商家，以便稍后对其进行唯一标识。

var index = 1;  // start with 1 because your form already has a static one

$(".add-merchant").on("click", function(event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr("href"),
        method: "GET",
        data: { index: index }
    })
    .done(function(partialViewResult) {
        $("#ajax-partial-view-box").append(partialViewResult);
    });
});

修改您的操作

public ActionResult AddMerchantPartial(int index)
{
    ViewBag.Index = index;
    return View(new merchant());
}

现在在您的部分内容中，您需要包含索引并手动编写输入元素。

@model merchant
@{
    var index = ViewBag.Index as int;
    var id = Model.merchantName + "_" + index + "_";     // merchantName_i_
    var name = Model.merchantName + "[" + index + "]";   // merchantName[i]
}

<ul>
    <li><label for="@id">@Model.merchantName</label></li>
    <li><input id="@id" name="@name" type="text" value="@Model.merchantName" /></li>
</ul>

通常，我不使用ViewBag。您可以考虑将index添加到视图模型中。

您的主要表单变为

@using (Html.BeginForm("AddMerchant", "MerchantDB", FormMethod.Post, new { }))
{
    var id = Model.merchantName + "_0_";
    var name = Model.merchantName + "[0]";

    <ul style ="list-style: none;">
        <li>
            <label for="@id">@Model.merchantName</label>
        </li>
        <li>
            <input id="@id" name="@name" type="text" value="" />
        </li>
    </ul>
    <div id="ajax-partial-view-box"></div>
    <input type="submit" value="Add" />
}

你的帖子方法是

[HttpPost]
public ActionResult AddMerchant(List<merchant> merchants)
{
    ...
}

从MVC 4中的多个部分视图中获取数据

2 个答案: