MVC C #: лучший способ связать «список выпадающих» с моделью

Question

У меня есть модель, которую я не могу правильно связать с моим видом, поэтому мне нужна помощь, чтобы двигаться в правильном направлении.

Я работаю с "Несчастными случаями", иУ аварии есть некоторые свойства, такие как год, тип столкновения и т. д., но в моей модели также есть список травм, и каждый из них выбирается из выпадающего списка (где пользователь выбирает из списка почти 100 возможных травм).

В некотором смысле, мы могли бы сказать, что у меня есть «Список выпадающих списков» в моей модели (что, очевидно, не является списком выпадающих списков, но я называю это так, чтобы у вас была идея, где начинается моя проблема, чтомоделирует этот «список списков»).

Это мой шаблон _InjuriesSelect в папке «Общие представления»:

@ model xxx.Models.AccidentViewModel

<div class="col-12 form-group text-dark mx-auto my-auto pb-2">
    <div class="container" style="padding-left:0;">
        <div class="row">
            <div class="col">
                @*@Html.DropDownListFor(model => model.Accident.Injuries, Model.Injuries, Model.SelectInjuryText, new { @class = "form-control", @style = "width: 300px;", onchange = @"" })*@
                @Html.DropDownList("selectInjuries_1", Model.InjuriesSelect, Model.SelectInjuryText, new { @class = "form-control", @style = "width: 300px;", onchange = @"" })
                @Html.ValidationMessageFor(model => model.Accident.Injuries, "", new { @class = "text-danger font-weight-bold" })
            </div>
            <div class="col">
                <a id="removeInjury_1" href="javascript: void(0);" style="text-decoration: none; visibility: hidden;" onclick="javascript: removeInjury(this);">
                    <i class="fa fa-minus text-danger pr-3" aria-hidden="true"></i>
                </a>
                <a id="addInjury_1" href="javascript: void(0);" style="text-decoration: none; visibility: hidden;" onclick="javascript: addInjury(this);">
                    <i class="fa fa-plus text-success" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>
</div>

Я разрешаюпользователь добавляет (или удаляет) выпадающие списки для добавления / удаления травм с помощью javascript с помощью:

function addInjury() {

    $.post("/Home/LoadInjurySelect", $("form").serialize(), function (data) {
        lastInjuryIndex++;

        //add holder for new injury
        var newInjurydivId = "divInjuries_" + lastInjuryIndex;
        var newInjuryDivHtml = "<div id='" + newInjurydivId + "'>";
        newInjuryDivHtml += data.replace(/_1/g, "_" + lastInjuryIndex);
        newInjuryDivHtml += "</div>";

        $("#divInjuries").append(newInjuryDivHtml);

        //hide "add injury" from previous injury
        $("#addInjury_" + (lastInjuryIndex - 1).toString()).css("visibility", "hidden");

        $("#selectInjuries_" + lastInjuryIndex).change(function () {
            var selectedInjury = $('#selectInjuries_' + lastInjuryIndex + ' option:selected').val();
            $("#addInjury_" + lastInjuryIndex).css("visibility", selectedInjury != "" ? "visible" : "hidden")
            //
            setInjuryInModel(selectedInjury);
        });


        setRemoveInjury1Visibility();
        setRemoveInjuryNVisibility(lastInjuryIndex);
    });
}

Этот javascript вызывает контроллер и возвращает частичное представление следующим образом:

[HttpPost]
public ActionResult LoadInjurySelect(AccidentViewModel model)
{
    model = fillViewModelLists(model);
    return PartialView("~/Views/Shared/_InjuriesSelect.cshtml", model);
}

Thisметод возвращает тЧастичное представление, но сначала заполняет все списки IEnumerable модели представления, используемые для заполнения раскрывающихся списков (если они не теряются, поскольку jQuery form.serialize не включает списки при сериализации).

Моя модель несчастных случаев выглядит следующим образом:

using xxx.App_GlobalResources;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace xxx.Models
{
    public class Accident
    {
        //Person information

        [Display(Name = "home_accident_personname", ResourceType = typeof(languages))]
        //[Required(ErrorMessageResourceType = typeof(App_GlobalResources.languages), ErrorMessageResourceName = "home_accident_mustenterpersonname")]
        public string PersonName { get; set; }

        [Display(Name = "home_accident_personage", ResourceType = typeof(languages))]
        [Required(ErrorMessageResourceType = typeof(languages), ErrorMessageResourceName = "home_accident_agenotvalid")]
        public short PersonAge { get; set; }

        [Display(Name = "home_accident_personcondition", ResourceType = typeof(languages))]
        [Required(ErrorMessageResourceType = typeof(languages), ErrorMessageResourceName = "home_accident_conditionnotvalid")]
        public byte PersonCondition { get; set; }

        [Display(Name = "home_accident_personemail", ResourceType = typeof(languages))]
        //[Required(ErrorMessageResourceType = typeof(App_GlobalResources.languages), ErrorMessageResourceName = "home_accident_mustenterpersonemail")]
        [DataType(DataType.EmailAddress)]
        [EmailAddress]
        public string PersonEmail { get; set; }

        //Accident information

        [Display(Name = "home_accident_year", ResourceType = typeof(languages))]
        [Required(ErrorMessageResourceType = typeof(languages), ErrorMessageResourceName = "home_accident_yearnotvalid")]
        [Range(2016, 2019)]
        public short Year { get; set; }        

        [Display(Name = "home_accident_collisiontype", ResourceType = typeof(languages))]
        [Required(ErrorMessageResourceType = typeof(languages), ErrorMessageResourceName = "home_accident_collisiontypenotvalid")]
        public byte CollisionType { get; set; }

        [Display(Name = "home_accident_hospitalleave", ResourceType = typeof(languages))]
        [Range(0, int.MaxValue, ErrorMessageResourceType = typeof(languages), ErrorMessageResourceName = "home_accident_medicalleavenotvalid")]
        public short HospitalLeaveDays { get; set; }

        [Display(Name = "home_accident_workleave", ResourceType = typeof(languages))]
        [Range(0, int.MaxValue, ErrorMessageResourceType = typeof(languages), ErrorMessageResourceName = "home_accident_medicalleavenotvalid")]
        public short WorkLeaveDays { get; set; }

        [Display(Name = "home_accident_rehabilitationdays", ResourceType = typeof(languages))]
        [Range(0, int.MaxValue, ErrorMessageResourceType = typeof(languages), ErrorMessageResourceName = "home_accident_medicalleavenotvalid")]
        public short RehabilitationDays { get; set; }

        [Display(Name = "home_accident_injuries", ResourceType = typeof(languages))]
        public List<Injury> Injuries { get; set; }

        //Compensation

        public Compensation Compensation { get; set; }
    }
}

И моя AccidentViewModel выглядит так (довольно долго из-за большого количества возможных травм):

using xxx.App_GlobalResources;
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using System.Linq;

namespace xxx.Models
{
    public class AccidentViewModel
    {
        public Accident Accident { get; set; }

        public string SelectInjuryText { get { return languages.home_accident_selectinjury; } }

        /* VIEWMODEL LISTS / METHODS*/

        public IEnumerable<SelectListItem> Years { get; set; }

        public static IEnumerable<SelectListItem> fillYearsList()
        {
            List<SelectListItem> listItems = new List<SelectListItem>();
            int y = DateTime.Now.Year;
            for (int i = y; i >= y - 3; i--)
            {
                listItems.Add(new SelectListItem
                {
                    Text = i.ToString(),
                    Value = i.ToString()
                });
            }

            return listItems;
        }

        public IEnumerable<SelectListItem> Ages { get; set; }

        public static IEnumerable<SelectListItem> fillAgesList()
        {
            List<SelectListItem> listItems = new List<SelectListItem>();
            listItems.Add(new SelectListItem { Text = "", Value = "" });
            listItems.Add(new SelectListItem { Text = "0-16", Value = "900" });
            listItems.Add(new SelectListItem { Text = "16-25", Value = "850" });
            listItems.Add(new SelectListItem { Text = "25-35", Value = "800" });
            listItems.Add(new SelectListItem { Text = "35-45", Value = "750" });
            listItems.Add(new SelectListItem { Text = "45-65", Value = "700" });
            listItems.Add(new SelectListItem { Text = "65+", Value = "650" });

            return listItems;
        }

        public IEnumerable<SelectListItem> Conditions { get; set; }

        public static IEnumerable<SelectListItem> fillConditionsList()
        {
            List<SelectListItem> listItems = new List<SelectListItem>();
            listItems.Add(new SelectListItem { Text = "", Value = "" });
            listItems.Add(new SelectListItem { Text = languages.home_accident_condition_driver, Value = "1" });
            listItems.Add(new SelectListItem { Text = languages.home_accident_condition_companion, Value = Helpers.Utils.getFromWebConfig("successPercentageCompanion") });
            listItems.Add(new SelectListItem { Text = languages.home_accident_condition_pedestrian, Value = Helpers.Utils.getFromWebConfig("successPercentagePedestrian") });

            return listItems;
        }

        public IEnumerable<SelectListItem> Collisions { get; set; }

        public static IEnumerable<SelectListItem> fillCollisionsList()
        {
            List<SelectListItem> listItems = new List<SelectListItem>();
            listItems.Add(new SelectListItem { Text = "", Value = "" });
            listItems.Add(new SelectListItem { Text = languages.home_accident_collisionfront, Value = Helpers.Utils.getFromWebConfig("successPercentageCollisionFront") });
            listItems.Add(new SelectListItem { Text = languages.home_accident_collisionside, Value = Helpers.Utils.getFromWebConfig("successPercentageCollisionSide") });
            listItems.Add(new SelectListItem { Text = languages.home_accident_collisionrear, Value = Helpers.Utils.getFromWebConfig("successPercentageCollisionBack") });

            return listItems;
        }

        //

        public List<InjuryGroup> InjuriesGroups { get; set; }

        public static List<InjuryGroup> fillInjuriesGroupsList()
        {

            List<InjuryGroup> injuriesGroupsList = new List<InjuryGroup>();

            injuriesGroupsList.Add(new InjuryGroup { Id = 1, Name = InjuryGroups.Lesiones_AfectacionesNerviosas });
            injuriesGroupsList.Add(new InjuryGroup { Id = 2, Name = InjuryGroups.Lesiones_TranstornosPsicologicos });
            injuriesGroupsList.Add(new InjuryGroup { Id = 3, Name = InjuryGroups.Lesiones_LesionesOculares });
            injuriesGroupsList.Add(new InjuryGroup { Id = 4, Name = InjuryGroups.Lesiones_LesionesAuditivas });
            injuriesGroupsList.Add(new InjuryGroup { Id = 5, Name = InjuryGroups.Lesiones_LesionesNasales });
            injuriesGroupsList.Add(new InjuryGroup { Id = 6, Name = InjuryGroups.Lesiones_LesionesMandibulares });
            injuriesGroupsList.Add(new InjuryGroup { Id = 7, Name = InjuryGroups.Lesiones_LesionesCervicales });
            injuriesGroupsList.Add(new InjuryGroup { Id = 8, Name = InjuryGroups.Lesiones_LesionesExtremidadesSuperiores });
            injuriesGroupsList.Add(new InjuryGroup { Id = 9, Name = InjuryGroups.Lesiones_LesionesExtremidadesInferiores });
            injuriesGroupsList.Add(new InjuryGroup { Id = 10, Name = InjuryGroups.Lesiones_LesionesRodilla });
            injuriesGroupsList.Add(new InjuryGroup { Id = 11, Name = InjuryGroups.Lesiones_LesionesTobillo });
            injuriesGroupsList.Add(new InjuryGroup { Id = 12, Name = InjuryGroups.Lesiones_LesionesPie });
            injuriesGroupsList.Add(new InjuryGroup { Id = 13, Name = InjuryGroups.Lesiones_LesionesCadera });
            injuriesGroupsList.Add(new InjuryGroup { Id = 14, Name = InjuryGroups.Lesiones_LesionesCardiacas });
            injuriesGroupsList.Add(new InjuryGroup { Id = 15, Name = InjuryGroups.Lesiones_LesionesOrganoDigestivo });
            injuriesGroupsList.Add(new InjuryGroup { Id = 16, Name = InjuryGroups.Lesiones_LesionesSistemaUrinario });
            injuriesGroupsList.Add(new InjuryGroup { Id = 17, Name = InjuryGroups.Lesiones_Quemaduras });
            injuriesGroupsList.Add(new InjuryGroup { Id = 18, Name = InjuryGroups.Lesiones_LesionesNeurologicasMedulares });
            injuriesGroupsList.Add(new InjuryGroup { Id = 19, Name = InjuryGroups.Lesiones_LesionesRespitarorias });

            return injuriesGroupsList;
        }

        public List<SelectListGroup> InjuriesSelectGroups { get; set; }

        public static List<SelectListGroup> fillInjuriesSelectListGroup(AccidentViewModel model) {

            List<SelectListGroup> injuriesSelectListGroup = new List<SelectListGroup>();
            foreach (InjuryGroup injuryGroup in model.InjuriesGroups) {
                injuriesSelectListGroup.Add(new SelectListGroup { Name = injuryGroup.Name });
            }

            return injuriesSelectListGroup;
        }

        //

        public List<Injury> Injuries { get; set; }        

        public static List<Injury> fillInjuriesList(AccidentViewModel model)
        {
            InjuryGroup Lesiones_AfectacionesNerviosas = model.InjuriesGroups[0];
            InjuryGroup Lesiones_TranstornosPsicologicos = model.InjuriesGroups[1];
            InjuryGroup Lesiones_LesionesOculares = model.InjuriesGroups[2];
            InjuryGroup Lesiones_LesionesAuditivas = model.InjuriesGroups[3];
            InjuryGroup Lesiones_LesionesNasales = model.InjuriesGroups[4];
            InjuryGroup Lesiones_LesionesMandibulares = model.InjuriesGroups[5];
            InjuryGroup Lesiones_LesionesCervicales = model.InjuriesGroups[6];
            InjuryGroup Lesiones_LesionesExtremidadesSuperiores = model.InjuriesGroups[7];
            InjuryGroup Lesiones_LesionesExtremidadesInferiores = model.InjuriesGroups[8];
            InjuryGroup Lesiones_LesionesRodilla = model.InjuriesGroups[9];
            InjuryGroup Lesiones_LesionesTobillo = model.InjuriesGroups[10];
            InjuryGroup Lesiones_LesionesPie = model.InjuriesGroups[11];
            InjuryGroup Lesiones_LesionesCadera = model.InjuriesGroups[12];
            InjuryGroup Lesiones_LesionesCardiacas = model.InjuriesGroups[13];
            InjuryGroup Lesiones_LesionesRespitarorias = model.InjuriesGroups[14];
            InjuryGroup Lesiones_LesionesOrganoDigestivo = model.InjuriesGroups[15];
            InjuryGroup Lesiones_LesionesSistemaUrinario = model.InjuriesGroups[16];
            InjuryGroup Lesiones_Quemaduras = model.InjuriesGroups[17];
            InjuryGroup Lesiones_LesionesNeurologicasMedulares = model.InjuriesGroups[18];

            List<Injury> injuries = new List<Injury>();

            injuries.Add(new Injury { Id = 1, Text = languages.Lesiones_AfectacionesNerviosas_AfectacionNerviosaAuditiva, Value = int.Parse(Helpers.Utils.getFromWebConfig("Lesiones_AfectacionesNerviosas_AfectacionNerviosaAuditiva")), Group = Lesiones_AfectacionesNerviosas });
            injuries.Add(new Injury { Id = 2, Text = languages.Lesiones_AfectacionesNerviosas_AfectacionNerviosaOcular, Value = int.Parse(Helpers.Utils.getFromWebConfig("Lesiones_AfectacionesNerviosas_AfectacionNerviosaOcular")), Group = Lesiones_AfectacionesNerviosas });
            injuries.Add(new Injury { Id = 3, Text = languages.Lesiones_AfectacionesNerviosas_AfectacionNervioCiatico, Value = int.Parse(Helpers.Utils.getFromWebConfig("Lesiones_AfectacionesNerviosas_AfectacionNervioCiatico")), Group = Lesiones_AfectacionesNerviosas });
            injuries.Add(new Injury { Id = 4, Text = languages.Lesiones_AfectacionesNerviosas_AfectacionNerviosaMandibular, Value = int.Parse(Helpers.Utils.getFromWebConfig("Lesiones_AfectacionesNerviosas_AfectacionNerviosaMandibular")), Group = Lesiones_AfectacionesNerviosas });
            injuries.Add(new Injury { Id = 5, Text = languages.Lesiones_AfectacionesNerviosas_AfectacionNerviosaRadioCubito, Value = int.Parse(Helpers.Utils.getFromWebConfig("Lesiones_AfectacionesNerviosas_AfectacionNerviosaRadioCubito")), Group = Lesiones_AfectacionesNerviosas });
            injuries.Add(new Injury { Id = 6, Text = languages.Lesiones_AfectacionesNerviosas_AfectacionNerviosaTibia, Value = int.Parse(Helpers.Utils.getFromWebConfig("Lesiones_AfectacionesNerviosas_AfectacionNerviosaTibia")), Group = Lesiones_AfectacionesNerviosas });

            ...

            return injuries;
        }

        public IEnumerable<SelectListItem> InjuriesSelect { get; set; }

        public static IEnumerable<SelectListItem> fillInjuriesSelectList(AccidentViewModel model)
        {
            List<SelectListItem> injuriesSelectList = new List<SelectListItem>();

            foreach (InjuryGroup injuryGroup in model.InjuriesGroups) {
                foreach (Injury injury in model.Injuries.Where(x => x.Group == injuryGroup).ToList()) {
                    injuriesSelectList.Add(new SelectListItem { Text = injury.Text, Value = injury.Id.ToString(), Group = model.InjuriesSelectGroups.Where(x => x.Name == injuryGroup.Name).First() });
                }
            }

            return injuriesSelectList;
        }
    }

Модель травмы:

using xxx.App_GlobalResources;

namespace xxx.Models
{
    public class Injury
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int Value { get; set; }
        public InjuryGroup Group { get; set; }
    }

    public static class InjuryGroups
    {
        public static string Lesiones_AfectacionesNerviosas { get { return languages.Lesiones_AfectacionesNerviosas; } }
        public static string Lesiones_TranstornosPsicologicos { get { return languages.Lesiones_TranstornosPsicologicos; } }
        public static string Lesiones_LesionesOculares { get { return languages.Lesiones_LesionesOculares; } }
        public static string Lesiones_LesionesAuditivas { get { return languages.Lesiones_LesionesAuditivas; } }
        public static string Lesiones_LesionesNasales { get { return languages.Lesiones_LesionesNasales; } }
        public static string Lesiones_LesionesMandibulares { get { return languages.Lesiones_LesionesMandibulares; } }
        public static string Lesiones_LesionesCervicales { get { return languages.Lesiones_LesionesCervicales; } }
        public static string Lesiones_LesionesExtremidadesSuperiores { get { return languages.Lesiones_LesionesExtremidadesSuperiores; } }
        public static string Lesiones_LesionesExtremidadesInferiores { get { return languages.Lesiones_LesionesExtremidadesInferiores; } }
        public static string Lesiones_LesionesRodilla { get { return languages.Lesiones_LesionesRodilla; } }
        public static string Lesiones_LesionesTobillo { get { return languages.Lesiones_LesionesTobillo; } }
        public static string Lesiones_LesionesPie { get { return languages.Lesiones_LesionesPie; } }
        public static string Lesiones_LesionesCadera { get { return languages.Lesiones_LesionesCadera; } }
        public static string Lesiones_LesionesCardiacas { get { return languages.Lesiones_LesionesCardiacas; } }
        public static string Lesiones_LesionesRespitarorias { get { return languages.Lesiones_LesionesRespitarorias; } }
        public static string Lesiones_LesionesOrganoDigestivo { get { return languages.Lesiones_LesionesOrganoDigestivo; } }
        public static string Lesiones_LesionesSistemaUrinario { get { return languages.Lesiones_LesionesSistemaUrinario; } }
        public static string Lesiones_Quemaduras { get { return languages.Lesiones_Quemaduras; } }
        public static string Lesiones_LesionesNeurologicasMedulares { get { return languages.Lesiones_LesionesNeurologicasMedulares; } }
    }
}

Модель InjuryGroup:

с использованием System.Collections.Generic;

компенсация пространства именCalc.Models {открытый класс InjuryGroup {public int Id {get;задавать;} публичная строка Name {get;задавать;} Публичный список травм {get;задавать;}}}

В конце концов, я не могу связать выпадающие списки травм с моделью, чтобы при отправке формы список травм содержал все выбранные травмы, в остальномсловами, когда пользователь выбирает (добавляет) новую травму, модель обновляет свой список травм соответствующей величиной.

Что я также не понимаю (это концептуально), так это то, что если я добавлю выпадающие списки травм с помощьюшаблон через PartialView, и я делаю это с помощью пост-вызова javascript, что происходит с новыми добавленными идентификаторами выпадающих в HTML?Нужно ли переименовывать их с помощью javascript, чтобы новый идентификатор выпадающего списка не повторялся в DOM каждый раз, когда я добавляю новую травму?

Самое важное - это получить некоторую помощь по наилучшему способу привязки моего "спискаdropdowns "с моей моделью несчастного случая (и, конечно, чтобы каждый новый добавленный выпадающий список тоже связывался с моделью).

Я знаю, что должен использовать DropDownListFor вместо DropDownList, но я не уверен, как это сделатьвот так.

Спасибо.

Answer 1

Ну, я закончу отвечать на свой вопрос, если это поможет кому-то еще столкнуться с чем-то похожим.

Если у вас есть список в вашей модели, один из способов справиться с ним - следующий:

В модели я добавляю новое свойство для удержания SelectedInjury (в моем случае) из выпадающего списка.

public int SelectedInjury { get; set; }

В связи с этим я создаю DropDownList следующим образом:

@Html.DropDownListFor(model => model.Accident.Injuries[0].SelectedInjury, Model.Injuries, Model.SelectInjuryText, new { @class = "form-control", @style = "width: 300px;", onchange = @"" })

Затем в javascript у меня есть счетчик травм, и всякий раз, когда я добавляю новые DropDowns (которые приходят из контроллера из шаблона через вызов ajax), я просто заменяю «0» в Accident_Injuries [0] (это более или менее сгенерированный html id) с соответствующим новым индексом перед добавлением html в DOM. Таким образом, когда вы выбираете новый элемент в раскрывающемся списке, новый объект Injury автоматически добавляется в список, поэтому модель обновляется без необходимости делать ajax-вызов контроллера или чего-либо еще (это была моя проблема с почтой).

Ура и счастливого кодирования!