Опубликовать страницу 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 мог быть расширен для смягчения этой проблемы.