在POST上傳遞使用JSON到MVC 4控制器的ul li元素

Question

我試圖圍繞如何將Post上的ul li元素傳遞給MVC 4控制器。到目前爲止，我明白ul li元素不會出現在FormsCollection中，我很確定我需要將它們作爲json對象傳遞。所以這是我迄今基於什麼我能找到的研究...

查看代碼：

<ul class="listdragable" id="OperationCountries"> 
<lh>@Trans["OperationCountries"]</lh> 

    @foreach (var item in Countries) 
    { 
     if(item.Assigned == true) 
     { 
     <li class="country" id="@item.ID" value="@item.ID" > <input type="checkbox" name="selectedCountries" id="@item.ID" >@item.Name</li> 
     } 
    } 

</ul> 
<p> 
    <button onclick="postSortOrder()">Click me</button> 
    @*<input type="submit" value="@Trans["Save"]" /> *@ 
</p> 
<script type="text/javascript"> 

    function postSortOrder() { 
$.ajax({ 
    data: { selectedCountries: $('#OperationCountries li').get() }, 
    type: 'POST', 
    traditional: true 
    //success: updateMessage 
}); 

} 

控制器：

[HttpPost] 
    public ActionResult EditCountries(int id, FormCollection formCollection, List<int> selectedCountries) 

當我檢查的價值selectedCountries的計數是0

我也注意到FormCollection現在o nly包含selectedCountries對象，而非我的其他表單元素，爲了簡單起見，我沒有在視圖代碼中列出。另外，當我採用json方法時，我沒有像腳手架那樣訪問模型。

所以我的問題是如何將UL LI項目和視圖的模型傳遞給控制器​​？

預先感謝您的想法

---

所以這是我結束了蘭斯哈德森做得益於建議（更新3的方法是什麼，我最終使用）

我最終採取隱藏字段路線

<input type="hidden" id="selectedCountryList" name="selectedCountryList" value="" /> 
<p> 
    <button class="submit" onclick="submitMyForm()">Submit</button> 
</p> 
<script type="text/javascript"> 
    function submitMyForm() { 
    var liIds = $('#OperationCountries li').map(function (i, n) { 
     return $(n).attr('id'); 
    }).get().join(','); 

    $('#selectedCountryList').val(liIds); 
    $('#myform').submit(); 
} 

</script> 

和我的控制器看起來像

[HttpPost] 
    public ActionResult EditCountries(Operation operation,FormCollection  formCollection) 
{ 
      string s = formCollection["selectedCountryList"].ToString(); 
      string [] selectedCountries = s.Split(','); 

} 

不確定這是否是最好的方法，但它現在可行。我開始涉足如何發佈複雜的JSON對象並覆蓋DefaultModelBinder方法，但沒有足夠的理解來採取這種路線。我仍然認爲應該有一種更簡潔的方法，將非輸入，select和textarea元素值與模型結合起來傳遞給控制器​​上的操作方法。特別是如果你試圖用JQuery UI做任何事情，它似乎被廣泛使用。任何方式再次感謝蘭斯:)

Answer 1

使用ajax你張貼只有李的。我看到兩個選項，使用ajax發佈整個表單或設置處理程序，以便在提交時將li數據複製到隱藏的數據。

更新： 如果要張貼整個使用AJAX，你可以這樣做

更新2： MVC能夠處理項目的陣列也。 型號：

public class EditCountriesViewModel 
{ 
    public string Note { get; set; } 
    public int id { get; set; } 
    public Country[] Countries { get; set; } 
} 

public class Country 
{ 
    public string Name { get; set; } 
    public int Id { get; set; } 
    public bool Selected { get; set; } 
} 

控制器：

[HttpPost] 
public ActionResult EditCountries(EditCountriesViewModel countries) 

查看：

@using (Html.BeginForm()) { 
    @Html.LabelFor(model => model.id); 
    @Html.EditorFor(model => model.id); 

    @Html.LabelFor(model => model.Note); 
    @Html.EditorFor(model => model.Note); 

    <ul> 
    @for(var i = 0; i < Model.Countries.Count(); i++) 
    { 
     <li class="country">@Model.Countries[i].Name @Html.CheckBoxFor(model => model.Countries[i].Selected)</li> 
     @Html.HiddenFor(model => model.Countries[i].Id) 
    } 
    </ul> 
    <input type="submit" /> 
} 

更新3：

function onSubmitHandler() { 
    $("#hidden_selectedCountriesString").val($('#OperationCountries li').get()); 
} 

那麼你將甲腎上腺素編輯將結果拆分成數組。

更新4： 控制器：

[HttpPost] 
public ActionResult EditCountries(int id, string name, int[] enabledCountries) 

查看：

@using (Html.BeginForm()) { 
    @Html.Label("id"); 
    @Html.TextBox("id"); 

    @Html.Label("name"); 
    @Html.TextBox("name"); 

    <ul> 
    @foreach (var country in countries) 
    { 
     <li class="country">@country.Value <input type="checkbox" name="enabledCountries", value = "@country.Key" /></li> 
    } 
    </ul> 
    <input type="submit" /> 
}