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现在只包含selectedCountries对象，而不是我的其他表单元素，为简单起见，我没有在视图代码中列出。此外，当我采用json方法时，我无法像使用脚手架那样访问模型。

所以我的问题是如何将UL LI项目和视图模型传递给控制器？

提前感谢您的想法

所以这就是我最后做的感谢Lance Hudson的建议（Update 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元素值与模型结合传递给控制器上的action方法。特别是如果你试图用JQuery UI做任何事情，似乎ul li元素被广泛使用。任何方式再次感谢兰斯：）

Answer 1

使用ajax，您只发布li。我看到两个选项，使用ajax发布整个表单或设置处理程序，以便在提交时将li数据复制到隐藏。

更新的如果你想发布整个使用ajax，你可以做类似的事情

function postSortOrder() {
    $.ajax({
        data: { 
            selectedCountries: $('#OperationCountries li').get(),
            id: $('#id')
        },
        type: 'POST'
    });
}

更新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" />
}

在POST上使用JSON将ul li元素传递给MVC 4 Controller

1 个答案: