0

我试图围绕如何将 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 的建议（更新 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 方法，但没有足够的理解来采取这条路线。我仍然认为应该有一种更简洁的方式将非输入、选择和文本区域元素值与模型结合到控制器上的操作方法。特别是如果您尝试使用 JQuery UI 做任何事情，似乎 ul li 元素被广泛使用。无论如何，再次感谢兰斯 :)

4

1 回答 1

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" />
}
于 2013-05-25T16:49:08.733 回答