С ASP.NET MVC, что предпочтительным путем является к Ajaxify простая форма?
Я пытаюсь добавить простые комментарии/окно сообщения к веб-странице. Когда пользователь вводит комментарий, и хиты отправляют, я хотел бы сохранить это сообщение к базе данных и добавить комментарий к списку, отображенному на странице, не обновляя всю страницу.
Однако я не уверен в лучшем способе сделать это в эти дни. Я использую ASP.NET MVC 2. Я пытался читать при использовании JQuery для этого типа функциональности, но у меня есть проблемы при получении полного изображения корректного подхода, который также не устарел (т.е. это использует версию предварительного просмотра MVC 1 или более старую версию JQuery).
Я могу или найти отрывки различных частей без информации того, как они сотрудничают, или информация, кажется, вполне датирована и больше не действительная.
Кто-то может указать на меня в правильном направлении для чего-то вроде этого?
Идеально, я ищу простой пример кода JQuery, отрывок любых основных отличий в HTML-форме из нормального метода сообщения и основной метод, используемый в Контроллере MVC. Мне нужно что-то, чтобы помочь лампочке понимания включить.:)
Любая справка значительно ценилась бы!!
4 ответа
Я обычно делаю что-то вроде
<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, за исключением того, что вы, вероятно, возвращаете другое представление - то, которое не содержит полной страницы разметки, в зависимости от того, какие данные вы хотите получить с сервера. Возможно, вам вообще не нужно возвращать какие-либо данные - ваш код «манипулировать страницей» может уже иметь всю необходимую информацию.
Вы должны проверить плагин jQuery Form . Вы можете отправить комментарий на свой контроллер с помощью ajax, сохранить комментарий и вернуть bool с JSON. В jquery определите обработчик успеха (см. Вкладку примеров) и отобразите комментарий внизу вашей страницы. Вы также можете проверить шаблоны javascript ( здесь - это реализация, предложенная Microsoft), если вам нужен некоторый контроль форматирования при отображении комментария (без загромождения JS).
Существует вспомогательный метод, позволяющий создавать формы с поддержкой Ajax. Эта статья должна помочь вам начать работу:
Для вашей системы комментариев вы можете попробовать механизм, подобный этому:
Если у вас есть такая модель
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});
}
}
}