在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的局部視圖框」 。

所以，我想要達到的是當我提交表格。我想通過單擊「添加更多」鏈接來動態添加div中「ajax-partial-view-box」中添加的所有文本框的文本。

在部分視圖中沒有與文本框關聯的標識。任何幫助或建議表示讚賞。

這裏是我的局部視圖代碼：

@model BrightMediaTest.merchant 

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

所以，我想在提交表單時添加數據庫中的所有這些商戶名稱。我有一個行動「AddMerchant」，我將用它來在數據庫中添加所有這些商家名稱。

我的商家視圖模型如下：使用實體框架生成

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 Form not able to post List of objects

在一天結束時，在用戶點擊提交之前，您將有n merchantName輸入。在您的控制器後動作，你將有這樣的事情：

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

在當前設置，參數將是空的，但在你的表單值的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} 

而且你的動作參數將有3個值，它與正確的數據。

現在，如何你這樣做是另一回事。有許多方法可以通過剃刀或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) 
{ 
    ... 
}