Как ajaxify писать короткие сообщения, как на Facebook

Question

У меня есть одно текстовое поле, где пользователь может написать короткое сообщение (например, статус на g + или fb) ниже этого поля. У меня есть список, где эти сообщения должны отображаться. Когда пользователь отправляет это сообщение, оно сохраняется в базе данных, после чего я обновляю весь View. Вот как я отображаю этот список:

@foreach (var m in @Model.Messages){
   <div>
      <p>@m.Author</p>
      <p>@m.Text</p>
   </div>
}

Теперь я не хочу улучшать пользовательский опыт. Я не хочу добавлять это сообщение без обновления во время просмотра. Я знаю, что должен использовать JQuery, Ajax и т. Д., Но я искал в Google и не могу найти хорошего учебника или примера для ASP MVC / Razor и подобной функции. Кто-нибудь может дать мне какое-то направление?

Answer 1

Ввод asp.net mvc ajax jquery в Google обычно дает достаточно результатов.Но в любом случае вот что вы могли бы сделать.Предполагая, что у вас есть текстовое поле, в которое пользователи будут вводить свои сообщения:

@using (Html.BeginForm("AddMessage", "Messages", FormMethod.Post, new { id = "addMessageForm" }))
{
    @Html.TextBoxFor(x => x.Author)
    @Html.TextAreaFor(x => x.Text)
    <button type="submit">Add message</button>
}

, вы можете AJAXify эту форму:

$(function() {
    $('addMessageForm').submit(function() {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
                $('#messages').append(result);
            }
        });
        return false;
    });
});

и, наконец, вы получите действие контроллера, которое будет выполнятьфактическое добавление сообщения в базу данных:

[HttpPost]
public ActionResult AddMessage(MessageViewModel message)
{
    // TODO: add the message to the database
    return PartialView("~/Views/Messages/DisplayTemplates/MessageViewModel.cshtml", model);
}

и соответствующий шаблон отображения (~/Views/Messages/DisplayTemplates/MessageViewModel.cshtml):

@model MessageViewModel
<div>
    @Html.DisplayFor(x => x.Author)
    @Html.DisplayFor(x => x.Text)
</div>

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

<div id="messages">
    @Html.DisplayFor(x => x.Messages)
</div>