Утрачено: получение полностью визуализированного представления с помощью Ajax в ASP.NET MVC3 / jQuery

Question

Все,

Я новичок в комбо MVC3 / jQuery и читаю учебные пособия.Хотя я немного понимаю концепцию, синтаксис бритвы и т. Д. Я все еще немного запутался в том, как реализовать базовую концепцию, которую я пытаюсь реализовать.

У меня есть текстовая область и когда кто-то вводит какой-то текст вэто и нажимает ввод, я хочу вызвать ajax-вызов на сервер с содержимым текстовой области, и получить обратно полностью сформированную HTML-рекламу, которую я могу вставить в div.Теперь, как я понимаю в MVC3, это будет представление, поэтому в некотором смысле я отображаю представление на сервере и отправляю его обратно, чтобы поместить его в HTML.

Возможно ли это?Любые примеры, которые я могу посмотреть, чтобы увидеть, как это сделано?Я знаю, как записывать нажатия клавиш, получать значения и т. Д., Я изо всех сил пытаюсь понять этот частичный рендеринг полностью сформированного HTML через ajax.

Спасибо,

Answer 1

Вы можете сделать с JQuery.Вот как это работает.вы прослушиваете событие keydown текстовой области и, когда происходит нажатие клавиши, проверяете, какой это ключ. Если это ключ ввода, затем выполните jQuery ajax после вызова страницы сервера (метод действия в вашем контроллере с данными)Сохраните данные в своих таблицах, верните разметку того, что вы хотите, и верните ее.в вашем скрипте загрузите его в ваш соответствующий div.

HTML

//Load jQuery library in your page

<textarea id="txtComment" > </textarea>
<div id="divComment"></div>

Javascript

$(function(){

 $("#txtComment").keydown(function (event) {

     if (event.keyCode == 10 || event.keyCode == 13) {

         var comment=$("#txtComment").val();
         comment=encodeURIComponent(comment);
         $.post("yourcontroller/actionmethod?data="+comment,function(response){
         $("#divComment").html(response);
       });

    }

 });    

});

и ваш метод действия контроллера

public ActionResult actionmethod(string data)
{
  //Do some sanitization on the data before saving.

  // Call your method to save the data to your tables.

   CommentViewModel objCommentVM=new CommentViewModel();
   objCommentVM.Comment=data;

  return View("PartialCommentView",objCommentVM);

}

У вас должен быть класс ViewMolde с именем "CommentViewModel", подобный этому

public class CommentViewModel
{
   public string Comment{ set; get; }
}

, и у вас должен быть вид с именем PartialCommentView, который сильнонапечатано в CommentViewModel

@model FlashRack.ViewModel.RackViewModel
@{
    Layout = null;
}
<div>
 @Model.Comment
</div>

Если вы просто возвращаете строку, а не возвращаете View, вы можете просто вернуть строку, используя также метод Return Content("your string here").Но я предпочитаю возвращать ViewModel через View, потому что это более масштабируемый и чистый подход для меня.

Ваш метод действия вернет разметку, имеющуюся в вашем PartialCommentView с данными.

Имейте в видучто вы должны позаботиться о специальных символах и избежать их должным образом.