從MVC 4中的多個局部視圖獲取數據

Question

我正在嘗試創建一個視圖，該視圖將具有動態生成的局部視圖。 每個部分視圖都有一個TextBox ，用戶可以在其中輸入商家名稱。

以下是我的查看代碼：

@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" />
}

如您所見，代碼“添加更多”中有一個ActionLink，它實際上在div“ ajax-partial-view-box”中添加了部分視圖。

因此，我想要實現的是提交表單時的方式。 我想通過單擊鏈接“添加更多”來動態獲取添加在div“ ajax-partial-view-box”中的所有TextBox的文本。

在局部視圖中，沒有與TextBoxes相關的ID。 任何幫助或建議，表示贊賞。

這是我的部分視圖代碼：

@model BrightMediaTest.merchant

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

因此，我試圖在提交表單時在數據庫中添加所有這些商人名稱。 我有一個動作“ AddMerchant”，它將用於在數據庫中添加所有這些商人名稱。

我的商人ViewModel如下：

namespace BrightMediaTest
{
using System;
using System.Collections.Generic;

public partial class merchant
{
    public merchant()
    {
        this.stores = new HashSet<store>();
    }

    public long merchantID { get; set; }
    public string merchantName { get; set; }

    public virtual ICollection<store> stores { get; set; }
}

此代碼是使用實體框架生成的。

謝謝

Answer 1

好的，所以我重新創建了您的問題的樣本，歸結為以下事實：您必須在name屬性中指定索引才能發布列表。 請參閱： MVC窗體無法發布對象列表

最終，在用戶單擊“提交”之前，您將有n個商人姓名輸入。 在您的控制器后操作上，您將看到以下內容：

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

在您當前的設置中，參數將為null，但您在HttpContext.Request中的表單值將不是，而是看起來像這樣：

{merchantName=test1&merchantName=test2} 

您需要指定這些輸入應該綁定到的位置，現在，它們是在巨大牧場中的迷路羊。 通過指定這些輸入所屬的對象的索引來完成此操作。

如： merchant[i].merchantName ，其中i是一些索引。

一旦添加了局部，它們就需要有一個對象類名和一個在商人名值之前的索引。 在用戶單擊添加之前，您的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}  

並且您的操作參數中將包含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)
{
    ...
}