ASP.NET mvc: перемещение элементов между двумя списками

В настоящее время у меня есть 2 списка, связывающие данные из базы данных в моем представлении... Я использовал пользовательскую модель представления, и она не является строго типизированной. Вот код:

 <%@ 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>

Что ж, теперь я хочу перемещать элементы между этими двумя списками с помощью двух кнопок (>>) и (‹‹). И когда пользователь нажимает кнопку «Применить», изменения должны быть записаны в базу данных.

СтудентМодель:

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);
        }

Итак, как я могу получить выбранное значение одного списка и сохранить его в другом? И после этого изменения должны быть записаны в базу данных. Так что ОБНОВЛЯЙТЕ базу данных. Могу ли я использовать modelstate для обновления значений в базе данных?

Я не очень хорошо разбираюсь в asp.net mvc, поэтому надеюсь, вы меня поняли...

Заранее спасибо!!


asp.net asp.net-mvc listbox selectlist move
person Lorenzo    schedule 19.08.2011    source источник
comment
Попробуйте это codeproject.com/script/Membership/   -  person DmitryBoyko    schedule 11.07.2014

Ответы (3)


arrow_upward
1
arrow_downward

Была была статья об использовании JQuery Two Sided Multi Select List (который выполняет двухблочное перемещение элементов между блоками). Его больше нет, но суть его ниже (на основе моих двух пример многостороннего плагина множественного выбора, который не является частью поддерживаемого программного обеспечения)...

Он описывает Модель, включая получение выбранных значений, Контроллер и Представление простыми словами.

Вам понадобится свойство в модели, которое могло бы принимать выбранные значения, которые будут отправлены обратно в виде строки, а не в виде 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", ...
person Fenton    schedule 19.08.2011
comment
Да, ладно, когда у меня выбраны студенты, что мне делать дальше? Добавить их во второй список? - person Lorenzo; 19.08.2011
comment
Это то, что делает плагин jQuery — когда страница загружается, он берет все выбранные элементы в первом поле и перемещает их во второе поле. Все во втором поле представляется как выбранные параметры. - person Fenton; 23.08.2011
comment
Вы все еще можете взять код отсюда (просто просмотреть исходный код), но я больше не поддерживаю никакие плагины jQuery. stevefenton.co.uk/cmsfiles/assets/File/twosidemultiselect.html< /а> - person Fenton; 12.09.2014

arrow_upward
0
arrow_downward

Сохраняя его в MVC, пост обратно отправляет не все варианты, а только выбранные. 1. Вы можете использовать ajax/json, чтобы сообщить, что движение было сделано. Отправьте вариант и в какой список он был перемещен, и тогда вы сможете обновлять базу данных при каждом перемещении. 2. Вы можете записать все параметры (при отправке) в строку скрытого поля (разделитель-запятая), а затем обработчик функции Post сохранит 2 списка.

Вот некоторая помощь с частью jquery. Перемещение элементов в двойных списках

person Yogurt The Wise    schedule 19.08.2011
comment
Хорошо, а если я запишу все параметры в скрытое поле? Как мне это сделать? - person Lorenzo; 19.08.2011

arrow_upward
0
arrow_downward

Пришел этот вопрос, и, наконец, это то, что я сделал для достижения результатов.

<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>
person digitally_inspired    schedule 05.03.2020