Что является предпочтительным способом Ajaxify простой формы в ASP.NET MVC?

Question

Я пытаюсь добавить простое окно комментариев / сообщений на веб-страницу. Когда пользователь вводит комментарий и нажимает кнопку Отправить, я хотел бы сохранить это сообщение в базе данных и добавить комментарий в список, отображаемый на странице, без обновления всей страницы.

Однако я не уверен в том, как лучше всего это сделать в наши дни. Я использую ASP.NET MVC 2. Я пытался прочитать об использовании JQuery для этого типа функций, но у меня возникают проблемы с получением полной картины правильного подхода, который также не устарел (т.е. используя предварительную версию MVC 1 или более старую версию JQuery).

Я могу либо найти фрагменты разных частей без информации о том, как они работают вместе, либо информация выглядит устаревшей и более не действительной.

Может ли кто-нибудь указать мне правильное направление для чего-то подобного?

В идеале я ищу простой пример кода JQuery, фрагмент любых ключевых отличий в форме HTML от обычного метода post и базовый метод, используемый в контроллере MVC. Мне нужно что-то, чтобы помочь лампочке понимания включиться. :)

Любая помощь будет принята с благодарностью !!

Answer 1

Я обычно делаю что-то вроде

<form action="/controller/action" method="post" id="formID">
</form>

$("#formID").submit(function(){
  var form = $(this);
  $.post(form.attr("href"), form.serialize(), function(data){/*manipulate page*/}, "text")
  return false;
});

Контроллер MVC такой же, как если бы вы не использовали Ajax, за исключением того, что вы, вероятно, возвращаете другое представление, которое не содержит полную страницу разметки, в зависимости от того, какие данные вы хотите получить. сервер. Вам может вообще не понадобиться возвращать какие-либо данные - ваш код «манипулирования страницей» может содержать всю необходимую информацию.

Answer 2

Вы должны проверить плагин jQuery Form . Вы можете отправить комментарий на свой контроллер с помощью ajax, сохранить комментарий и вернуть bool с JSON. В jquery определите обработчик успеха (см. Вкладку «Примеры») и разместите комментарий внизу вашей страницы. Вы также можете проверить шаблоны javascript ( здесь - это предложенная Microsoft реализация), если вы хотите, чтобы некоторый контроль форматирования отображал комментарий (не загромождая ваш JS).

Answer 3

Есть вспомогательный метод, который позволяет вам создавать формы с поддержкой Ajax. Эта статья должна помочь вам начать:

http://msdn.microsoft.com/en-us/library/dd381533.aspx

Answer 4

Для вашей системы комментариев вы можете попробовать механизм, подобный этому:

Если у вас есть такая модель

public class Message
{
    public int Id {get;set;}
    public string Text {get;set;}
    public Comment[] Comments {get;set;}
}

public class Comment
{
    public int Id {get;set;}
    public string Text {get;set;}
}

В вашем сообщении

Message: 

<%: Model.Text%>
<div id="divComments">
    <% Html.RenderPartial("Comment",Model.Comments); %>
</div>
<% using(Ajax.BeginForm("AddComment", new{id=Model.Id}, new AjaxOptions{HttpMethod="POST",UpdatetargetId ="divComments" }))
   { %>
       <%: Html.TextArea("comment") %> 
       <input type="submit" value="Add comment" />      
<% } %>

В вашем комментарии частичное представление

<% foreach(var comment in Model) { %>
    <li><%: comment.Text %>
<%}

В вашем контроллере

public MessageController: Controller
{
    public ActionResult Message(int id)
    {
        using(MessageRepository messageRepo = new MessageRepository())
        {
            return View(messageRepo.SelectById(id));
        }
    }

    public ActionResult AddComment([Bind(Prefix="id")]int messageId, string comment)
    {
        using(MessageRepository messageRepo = new MessageRepository())
        {
            messageRepo.InsertComment(messageId,comment);

            if(this.Request.IsAjaxRequest())
                return View(messageRepo.SelectById(messageId).Comments));
            return RedirectToAction("Message", new{id=messageId});
        }
    }
}