使用Razor/form post映射字符串鍵值對列表

Question

我的剃刀視圖中有一些HTML，基本上是一對Select和Input元素的3行： （可能有3個以上）

<select name="SocialNetwork[1]"> 
    <option>Skype</option> 
    <option>Twitter</option> 
    <option>Facebook</option> 
</select> 

<input name="SocialNetworkUsername[1]" type="text" /> 

<select name="SocialNetwork[2]"> 
    <option>Skype</option> 
    <option>Twitter</option> 
    <option>Facebook</option> 
</select> 

<input name="SocialNetworkUsername[2]" type="text" /> 

<select name="SocialNetwork[3]"> 
    <option>Skype</option> 
    <option>Twitter</option> 
    <option>Facebook</option> 
</select> 

<input name="SocialNetworkUsername[3]" type="text" /> 

當窗體發佈到我的控制器方法：

public ActionResult SaveDetails(MyModel model) 
{ 
} 

我怎樣才能 '地圖' SocialNetwork的值| SocialNetworkUsername到模型？ 喜歡的東西：

public class MyModel 
{ 
    public string SomeProperty { get; set; } 
    public string SomeOtherProperty { get; set; } 

    public Dictionary<string,string> SocialNetworks { get; set; } 
} 

我不是「卡」使用字典，如果有更合適些

Answer 1

您可以使用編輯器模板來實現這一目標。

編輯器模板將允許您循環訪問主視圖中的社交網絡列表，並使用@ Html.EditorFor幫助器來呈現您的下拉列表並使模型綁定變得容易。

要開始與你的模型應該代表一個社會網絡

在你的模型，你需要的屬性包含下拉列表值，併爲選定的值的屬性。您還需要一個屬性包含SocialNetworkUsername

public IEnumerable<SelectListItem> SocialNetworks { get; set; } 
public string SelectedSocialNetwork { get; set; } 

public string SocialNetworkUserName { get; set; } 

爲了讓你的編輯器模板添加一個新的文件夾/查看/共享/ EditorTemplates

在EditorTemplates文件夾中創建名爲MyClass的一個新的視圖（或任何您的模型類名稱）

您需要遵循這些命名約定，因爲沒有其他配置需要編輯器模板工作。

在MyClass.cshtml你需要允許單個的社交網絡的編輯

@model MyModel 

@Html.DropDownListFor(m => m.SelectedSocialNetwork, Model.SocialNetworks) 

@Html.TextBoxFor(m => m.SocialNetworkUserName) 

然後在你的主視圖，您使用爲MyModel的列表爲模型視圖，並使用一個for循環來呈現出你的編輯器模板。

@model List<MyModel> 

@using(Html.BeginForm()) 
{ 
    for (var i = 0; i < Model.Count; i++) 
    { 
     Html.EditorFor(Model[i]) 
    } 
} 

在您的控制器只需要改變你的操作方法參數接受MyClass的清單，模型綁定應該只是神奇的工作;）