Опубликовать страницу ASP.NET MVC, частично загруженную с помощью JQuery

Поэтому я работаю над страницей со списком объявлений, где мне нужно разрешить пользователю динамически добавлять комнаты в объявление, не размещая страницу обратно. Я хочу сделать это с Ajax, чтобы уменьшить количество необходимой навигации, улучшая UX.

Изначально я смотрел на использование вспомогательных методов Ajax для загрузки динамических элементов страницы. Однако это не сработало так хорошо, поскольку MVC/HTML не поддерживает вложенные формы.

Ajax.BeginForm внутри Html.BeginForm

В итоге я использовал JQuery для загрузки комнат и добавления / удаления комнат. JQuery вызывает действие на контроллере для загрузки комнат после добавления / удаления комнат.

$("[name='RemoveRoom']").click(function () {
    var url = $(this).data('url');

    $('#roomsWrapper').load(url);
});


[HttpGet]
public ActionResult GetRooms(int Id)
{
    var viewModel = this.roomAvailableAdvertStore.FindById(Id);

    return PartialView("_Rooms", viewModel.Rooms);
}

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что эти динамически загружаемые элементы не привязываются к модели представления при отправке формы. Чтобы объяснить более четко

<form>
    @Html.HiddenFor(m => m.AdvertId); 
    <div id=”roomsWrapper”>
       // These data items are not being bound to the model.
       @Html.Partial(“_Rooms”, Model.Rooms);
    </div>
    <input type="submit" />
<form>

Частичная страница _Rooms.cshtml выглядит следующим образом:

@model List<RoomViewModel>

@for (int roomIndex = 0; roomIndex < Model.Count(); roomIndex++)
{
    @Html.HiddenFor(m => m[roomIndex].RoomId)
}

Форма возвращается к действию со следующей подписью:

public async Task<ActionResult> Update(RoomAvailableAdvertViewModel model)
{
   ...
}

Модель вида выглядит так:

public class RoomAvailableAdvertViewModel
{
    public int AdvertId { get; set; }
    public List<RoomViewModel> Rooms { get; set; }
}

1 ответ

Решение

Мне удалось решить эту проблему благодаря ссылкам, оставленным в комментариях.

В основном эта проблема возникает из-за того, что механизм связывания модели ASPC MVC по умолчанию может связываться с коллекцией сложных типов только в том случае, если они могут быть однозначно определены. Это все объясняется гораздо более четко Филом Хааком в следующей статье:

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

Однако ограничение подхода Фила состоит в том, что он применяет числовой индекс к каждому элементу в коллекции. Этот подход не работает, когда вы пытаетесь добавить элементы динамически, так как индекс не будет уникальным. Вторая ссылка, приведенная в комментариях, решает эту проблему, применяя Guid к каждому элементу в коллекции, гарантируя, что каждый элемент в коллекции имеет уникальный ключ.

http://blogs.interknowlogy.com/2014/08/01/mvc-series-part-1-dynamically-adding- items-part-1 /

Было бы интересно, если бы механизм представления Razor мог быть расширен для смягчения этой проблемы.

Другие вопросы по тегам