3

我能够在 ListBoxFor 控件中显示从控制器到视图的值。但是，当我将值从一个列表框移动到另一个列表框并发布视图时，控制器端的模型不会保留列表框中的值。

这是我的模型

namespace MvcApplication1.Models
{
  public class EmployeeClass
  {
    public int EmpCode { get; set; }
    public string EmpName { get; set; }
  }

   public class EmployeeViewModel
  {
    public string Department { get; set; }
    public list<EmployeeClass> AvailalableEmployee { get; set; }
    public list<EmployeeClass> SelectedEmployee { get; set; }

    public int [] AvailableEmpCodeArray { get; set; }
    public int [] SelectedEmpCodeArray { get; set; }
  }
}

这是我的控制器

namespace MvcApplication1.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult EmployeeDisplayTool()
        {   
            EmployeeViewModel model = new EmployeeViewModel();

            model.Department = "Techology"
            model.AvailalableEmployee.Add(new Employee(1,"Emp1"));
            model.AvailalableEmployee.Add(new Scenario(2,"Emp2"));
            model.AvailalableEmployee.Add(new Scenario(3,"Emp3"));

            model.SelectedEmployee.Add(new Scenario(4,"Emp4"));
            model.SelectedEmployee.Add(new Scenario(5,"Emp5"));
            model.SelectedEmployee.Add(new Scenario(6,"Emp6"));
            return View(model);
        }
        [HttpPost]
        public ActionResult EmployeeDisplayTool(EmployeeViewModel model)
        {
            //model.Department is populated as "Technology"

            //All of the follownig collections are null.
            //model.AvailalableEmployee is null.
            //model.AvailableEmpCodeArray is null.

            //model.SelectedEmployee is null.
            //model.SelectedEmpCodeArray is null.
        }
    }
}

这是我的视图和 JavaScript

@using (Html.BeginForm())
{
<table id="MainTable" border="0">  
<tr>
    <td colspan="3">
        @Html.TextBoxFor(m => Model.Department, new { id = "txtDepartment" })
    </td>
</tr>
<tr>     
    <td>
       @Html.ListBoxFor(m => Model.AvailableEmpCodeArray, new MultiSelectList(Model.AvailalableEmployee, "EmpCode", "EmpName", Model.AvailableEmpCodeArray), new { id = "lbxAvailableEmployees" })
    </td>         
    <td>
        <input type="button" id="btnSelectEmployee" value=" >> "/>
        <br/>
        <br/>
        <input type="button" id="btnUnSelectEmployee" value=" << "/>
    </td>
    <td>
         @Html.ListBoxFor(m => Model.SelectedEmpCodeArray, new MultiSelectList(Model.SelectedEmployee, "EmpCode", "EmpName", Model.SelectedEmpCodeArray), new { id = "lbxSelectedEmployees" })
    </td>         
</tr> 
</table>
}

<script type="text/javascript">
    $(document).ready(function() 
    {  
        $('#btnSelectEmployee').click(function(e) 
        { 
            var SelectedEmps = $('#lbxAvailableEmployees option:selected');  
            if (SelectedEmps.length == 0) 
            {  
                e.preventDefault();
            }
            $('#lbxSelectedEmployees').append($(SelectedEmps).clone());  
            $(SelectedEmps).remove();  
            e.preventDefault();  
        });  

        $('#btnUnSelectEmployee').click(function(e) 
        {  
            var SelectedEmps = $('#lbxSelectedEmployees option:selected');  
            if (SelectedEmps.length == 0) 
            {  
                e.preventDefault();  
            }  
            $('#lbxAvailableEmployees').append($(SelectedEmps).clone());  
            $(SelectedEmps).remove();  
            e.preventDefault();
        });  

    });
</script>
4

1 回答 1

2

在您的HttpPost操作中，您不能期望AvailalableEmployee和SelectedEmployee集合被填充。这是由于 HTML 的工作原理。提交表单时，只有选定的值会发送到服务器。当您提交表单时，选择字段的文本值永远不会发送到您的服务器。

因此，您希望在此 HttpPost 操作中填充的只是 theAvailableEmpCodeArray和SelectedEmpCodeArray集合。它们将包含相应选择字段中所选项目的值。请注意，我已将selected加粗。这意味着只有当您选择相应框中的任何项目时，这些集合才会被绑定。如果您不选择任何内容，它们将保持为空，这是完全正常的。

这是一个没有选择任何内容的用户的示例。他只是使用<<和>>按钮来切换列表之间的值，但请注意绝对没有选择任何内容：

在此处输入图像描述

请注意如何没有选择任何内容？这就是您在控制器操作中获得的全部内容 -没有。

现在请与以下屏幕截图进行比较：

在此处输入图像描述

你看得到差别吗？请注意用户如何明确选择Emp2,Emp5和Emp6值（使用Shift键选择多个值）？这就是您要在 HttpPost 操作中获得的内容。该AvailableEmpCodeArray集合将包含一个值为 的元素，而 将包含两个值为和的2元素。SelectedEmpCodeArray56

现在到你的第二个问题。如果您打算从 HttpPost 控制器操作中重新显示相同的视图，您需要确保的第一件事是您已为AvailalableEmployee和SelectedEmployee集合分配了值。这应该按照您在 HttpGet 操作中所做的相同方式完成：

model.AvailalableEmployee.Add(new Employee(1,"Emp1"));
model.AvailalableEmployee.Add(new Scenario(2,"Emp2"));
model.AvailalableEmployee.Add(new Scenario(3,"Emp3"));

model.SelectedEmployee.Add(new Scenario(4,"Emp4"));
model.SelectedEmployee.Add(new Scenario(5,"Emp5"));
model.SelectedEmployee.Add(new Scenario(6,"Emp6"));

或者如果这些值来自数据库，您将不得不在 HttpPost 操作中重新查询该数据库，因为正如我已经解释过的，这些值永远不会从视图中绑定。

于 2012-12-28T21:18:52.293 回答