Как я могу сделать частичное представление через AJAX?

Question

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

• У меня есть представление, которое не является строго типизированным, просто ViewPage<dynamic>.
• В этом представлении у меня есть одно текстовое поле, которое расширяется с помощью автозаполнения jQuery
• Когда пользователь вводит что-то в текстовое поле, автозаполнение вызывает AJAX-вызов контроллера, который вызывает хранимую процедуру, возвращая коллекцию записей JSON с двумя свойствами:
  • ID (Идентификатор предмета)
  • Имя (Название для предмета)

Теперь с помощью плагина пользовательского интерфейса jQuery AutoComplete, когда пользователь щелкает один из элементов, отображаемых в автозаполнении, вызывается событие на стороне клиента, проходящее через объект JSON:

// .. snip heaps of jQuery
select: function (event, ui) {
   // ui is a JSON object:
   //    ui.item.id
   //    ui.item.name
}

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

Как я могу это сделать? Единственное, о чем я могу думать, это просто заставить jQuery вызывать другой контроллер, который возвращает один JsonResult, и вручную анализировать этот JSON, отображая нужный мне HTML.

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

Я действительно надеялся, что смогу создать частичное представление со строгой типизацией и каким-то образом вызвать RenderPartial для этого частичного представления, передавая идентификатор элемента, который я хочу отобразить. Возможно ли это со стороны клиента / AJAX?

Answer 1

Вы можете использовать jQuery для запроса html, а также Json с контроллера. Так что ваш jQuery может выглядеть так:

$.get(action, null, function(data){
  $('#someDiv').html(data);
}, 'html');

и ваш контроллер может вернуть:

return PartialView("SomePartial", Model)

И HTML будет отображаться на экране