Шаблон редактора .Net MVC не возвращает данные при обратной передаче

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

public class AmenitiesListViewModel
    {
        public int AmenityId { get; set; }
        public string Title { get; set; }
        public bool Checked { get; set; }
        public string ImageSrc { get; set; }
    }

Другая модель представления, которая имеет объект ICollection для этой модели представления.

public class HouseAmenityViewModel
    {
        public HouseAmenityViewModel()
        {
            Amenities = new HashSet<AmenitiesListViewModel>();
        }

        [HiddenInput]
        public Guid HouseId { get; set; }
        public ICollection<AmenitiesListViewModel> Amenities { get; set; }
    }

Затем я создал сервис для подготовки списка флажков из базы данных.

var amenities = await _amenityRepository.ListAmenitiesAsync();
                if (amenities != null)
                {
                    model.HouseId = houseId;
                    foreach (var amenity in amenities)
                    {
                        model.Amenities.Add(new AmenitiesListViewModel
                        {
                            AmenityId = amenity.AmenityId,
                            Title = amenity.Description,
                            Checked = false,
                            ImageSrc = string.Format(_imageOptions.AmenityImagePath, amenity.ImageFileName)
                        });
                    }
                }

На мой взгляд, я использую @Html.EditorFor для отображения списка флажков.

<form asp-action="UpdateHouseAmenity" asp-controller="Admin" method="post" id="update-amenity-form" class="amenity-form">

        <input asp-for="HouseId" />
        <div class="row"><div class="col-md-12">@Html.EditorFor(m => m.Amenities)</div></div>
        <div class="row">
            <div class="col-md-12 mt-10">
                <button type="submit" class="btn btn-primary" id="update-amenity-button">Submit</button>
                <button type="button" class="btn btn-danger">Reset</button>
            </div>
        </div>

</form>

и шаблон редактора выглядит следующим образом:

@model HouseRentalManagement.Models.AdminViewModels.AmenitiesListViewModel

<div class="container mt-10" style="width: 30%;
  display: inline-block;
  float: left;">

    <label>
        <img src="@Model.ImageSrc" style="height: 30px; width: 30px;" />

        <input type="checkbox" @string.Format("{0}", Model.Checked ? "checked" : "") /> @Model.Title
    </label>
</div>

У меня правильно отображается список флажков в моем представлении. Моя форма отправляется на указанное действие.

Проблема в том, что при отправке я ничего не получаю из @Html.EditorFor(m => m.Amenities) коллекции.

контроллер:

public async Task<IActionResult> UpdateHouseAmenity(HouseAmenityViewModel model)
        {
            var result = await _houseService.UpdateHouseAmenitiesAsync(model);            
        }

Здесь следует отметить одну вещь: это представление отображается с использованием Ajax после загрузки страницы. Аякс:

var loadAmenity = function () {
        $.ajax({
            url: "/Admin/GetHouseAmenities"
        }).done(function (data) {
            $('#amenity-info').html(data);
        }).fail(function (a, textError) {
            console.error(textError);
        });
    };

Контроллер:

var model = await _houseService.GetHouseAmenityViewModelAsync(new Guid());
            return PartialView("~/Views/Admin/_HouseAmenityPartial.cshtml", model);

person Pirate    schedule 10.06.2018    source источник
comment
У вас есть вложенные формы! Удалите @using (Html.BeginForm())   -  person Shyju    schedule 10.06.2018
comment
Я понятия не имею, как это влияет на функциональность. Я не так опытен в использовании помощников HTML. Но в режиме проверки браузера для моей разметки создана только одна форма. Может ли вложение формы быть проблемой? Я попробую удалить его и опубликовать обновление.   -  person Pirate    schedule 10.06.2018
comment
удаление @using (Html.BeginForm()) не помогло :(   -  person Pirate    schedule 10.06.2018
comment
Так что же происходит сейчас? Отображает ли он желаемый HTML?   -  person Shyju    schedule 10.06.2018


Ответы (1)


Ваш текущий код шаблона редактора будет генерировать HTML-разметку, как показано ниже, для каждого элемента в коллекции Amenities.

<label>
       <img src="SomeImageSourceValue" style="height: 30px; width: 30px;">
       <input type="checkbox"> AminityTitle
</label>

Флажок не имеет значения атрибута name! Чтобы привязка модели работала, значение атрибута name элемента формы должно совпадать с именем свойства вашего класса (того, которое вы используете в качестве параметра метода действия HttpPost). Так что в идеале нам нужно, чтобы он был сгенерирован вот так

<input type="checkbox" name="Amenities[0].Checked" value="true">
<input type="checkbox" name="Amenities[1].Checked" value="true">
<input type="checkbox" name="Amenities[2].Checked" value="true">

Хорошая новость заключается в том, что если вы правильно используете вспомогательную функцию входного тега, она сгенерирует для вас правильную разметку.

@model HouseRentalManagement.Models.AdminViewModels.AmenitiesListViewModel

<div class="container mt-10" >

    <img src="@Model.ImageSrc" style="height: 30px; width: 30px;" />

    <input type="checkbox" asp-for="Checked" /> @Model.Title
    <input type="hidden" asp-for="AmenityId" />

</div>
person Shyju    schedule 10.06.2018