Question

我在mvc 4中创建了一个双列表。在post方法中，我无法获取模型数据。我可以将项目从一个列表拖放到另一个列表中，并且在提交时我需要在post方法中使用数据。但是在model.SelectedColumns中我得到了null。我做错了什么？

这是我的代码 -

模特：

public class Columns
{
    public List<string> SelectedColumns { set; get; }
    public List<string> RemainingColumns { set; get; }
}

观点：

@Html.BeginForm("AddRemoveColumns", "DashBoard",FormMethod.Post){
<div style="float: left">
    <h2>
        AddRemoveColumns</h2>
    <ol id="SelectedColumns" class="connectedSortable">
        @foreach (var item in Model.SelectedColumns)
        {

            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>@item
            </li>
        }
    </ol>
</div>
<div style="float: right">
    <ol id="RemainingColumns" class="connectedSortable">
        @foreach (var item in Model.RemainingColumns)
        {

            <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>@item
            </li>
        }
    </ol>
</div>
<input type="submit" value="Submit"  />
}

脚本：

<script type="text/javascript">          
   $(function () { $("#SelectedColumns, #RemainingColumns").sortable({ 
        connectWith: ".connectedSortable" }).disableSelection(); 
   });

</script>

控制器：

public ActionResult AddRemoveColumns()
{
    Columns columns = DbAccess.getSelectedColumns();
    return View(columns);

}

[HttpPost]
public ActionResult AddRemoveColumns(Columns model)
{
    Columns columns = new Columns();
    columns.SelectedColumns = model.SelectedColumns;
    return View();
}

Answer 1

您只是使用html标签显示列表，并且您没有使用任何控件绑定列表，这就是为什么您获得空值，如果您想使用表单发布，那么您必须将模型与MVC控件绑定，如下所示：

@ Html.ListBoxFor（model =＆gt; model.SelectedColumns，new {@id =“SelectedColumns”}） @ Html.ListBoxFor（model =＆gt; model.RemainingColumns，new {@id =“RemainingColumns”}）

由于

Answer 2

表单需要<input>将其值提交给控制器

如果您不想使用列表框

，可以使用隐藏输入

<input id="hiddenInput" name="SelectedColumns" type="hidden" value="" />

* 输入名称必须与模型

完全相同

然后使用jquery

更新选定的值

$(function () { 
    $("#SelectedColumns, #RemainingColumns").sortable({ 
        connectWith: ".connectedSortable" ,
        update: function() {
            var selectedValues = $("#SelectedColumns").serialize(); //get selected values
            $('#hiddenInput').val(selectedValues); //update hidden input
        }
    }).disableSelection();
});

asp .net mvc 4中的双列表

2 个答案: