Question

目前我有2个列表框在我的视图中绑定数据库中的数据...我使用了自定义Viewmodel并且它不是强类型的。这是代码：

 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"  Inherits="System.Web.Mvc.ViewPage<ProjectenII.Models.Domain.StudentModel>"%>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    IndexStudents
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>IndexStudents</h2>

  <div class="editor-field">
    <%: Html.ListBox("IndexStudentsNormal", Model.NormalStudentsList)%>
  </div>

  <input type="submit" name="add" 
                          id="add" value=">>" />
  <br />
  <input type="submit" name="remove" 
                          id="remove" value="<<" />

  <div class="editor-field">
    <%: Html.ListBox("IndexStudentsNoClass", Model.StudentsNoClassList)%>
  </div>

  <input type="submit" name="apply" id="apply" value="Save!" />
</asp:Content>

好吧，现在我想使用两个按钮（＆gt;＆gt;）和（＆lt;＆lt;）来在这两个列表框之间移动项目。当用户单击应用按钮时，必须将更改记录在数据库中。 / p>

StudentModel：

namespace ProjectenII.Models.Domain
{
    public class StudentModel
    {
        public IEnumerable<SelectListItem> NormalStudentsList { get; set; }
        public IEnumerable<SelectListItem> StudentsNoClassList { get; set; }
    }
}

控制器：

public ActionResult IndexStudents(Docent docent, int id, int klasgroepid)
        {
            var studentModel = new StudentModel
            {
               NormalStudentsList = docent.GeefStudentenNormaalList(id, klasgroepid),
               StudentsNoClassList = docent.GeefStudentenNoClassList(id, klasgroepid)
            };

            return View(studentModel);
        }

那么如何获取一个列表框的选定值并将其保存到另一个列表框？然后，必须在数据库中写下更改。所以UPDATE数据库。我可以使用modelstate来更新数据库中的值吗？

我不是很擅长asp.net mvc，所以我希望你理解我......

提前致谢!!

Answer 1

是一篇关于使用jQuery双面多选列表的文章（它在框之间进行两盒移动项目）。它不再存在，但它的本质是下面的（基于我的two sided multi-select plugin示例，它不是一个受支持的软件）...

它描述了模型，包括以简单的术语获取所选值，控制器和视图。

您需要一个可以接受所选值的模型的属性，该属性将作为字符串发送回来，而不是作为SelectListItem（即所选选项中的值：<option value="student1" selected>Mr Student One</option>

public class StudentModel
{
    public IEnumerable<SelectListItem> NormalStudentsList { get; set; }
    public IEnumerable<SelectListItem> StudentsNoClassList { get; set; }
    public IEnumerable<string> StudentsSelected { get; set; }
}

然后将ListBox应用于此属性

<%= Html.ListBox("StudentsSelected", ...

Answer 2

将其保存在MVC中，回发后不发送所有选项，只发送选中。你可以用ajax / json来报告你的情况。发送选项以及移动到的列表，然后您可以在每次移动时更新数据库。 2.您可以将所有选项（提交时）写入隐藏字段字符串（逗号分隔符），然后使用Post函数句柄保存2个列表。

对jquery部分有一些帮助。 Moving items in Dual Listboxes

Answer 3

问这个问题，最后这就是我为获得结果所做的事情。

<script>
    function SwitchListBoxItems(sourceListItem, targetListItem) 
    {
        var src = document.getElementById(sourceListItem);
        var dest = document.getElementById(targetListItem);
        if (dest != null && src != null) 
        {
            while ( src.options.selectedIndex >= 0 ) 
            {
                var lstItemNew = new Option(); // Create a new instance of ListItem
                lstItemNew.text = src.options[src.options.selectedIndex].text;
                lstItemNew.value = src.options[src.options.selectedIndex].value;
                dest.options[dest.length] = lstItemNew;
                src.remove(src.options.selectedIndex); 
            }
        }
    }
</script>

HTML代码：

<div class="ml-auto mt-1 mr-3">
        @Html.ListBoxFor(m => Model.SelectedItems, Model.AllItems, new { @id = "lstIncludedItems"})
        <input onclick="Javascript:MoveItem('lstIncludedItems', 'lstExcludedItems');" type="button" value="->" />
        <input onclick="Javascript:MoveItem('lstExcludedItems', 'lstIncludedItems');" type="button" value="<-" />
        @Html.ListBoxFor(m => Model.SelectedItems, Model.AllItems, new { @id = "lstExcludedItems"})
</div>

ASP.NET mvc：在两个列表框之间移动项目

3 个答案: