2016-10-07 3 views
0

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

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

Ajax.BeginForm inside 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) 
} 

В формы сообщений обратно в действие со следующей signiture:

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

мнение, модель выглядит например:

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

? опечатать, я думаю? ваш вопрос неясен в настоящее время – Dbl

+0

Да, спасибо, я исправил это. – chrism233

+0

Как выглядит частичное изображение _Rooms? Где подает форму? –

ответ

0

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

В основном эта проблема возникает из-за того, что связующее устройство ASP.net 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- элементы-часть-1/

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