javascript - 如何像在 Facebook 上一样使用 ajaxify 编写短信

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

在 google 中输入 asp.net mvc ajax jquery 通常会产生足够多的结果。但无论如何，这就是你可以做的。假设您有一个文本字段，用户将在其中键入消息:

@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>
}

您可以 AJAX 化此表单:

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

最后，您将有一个 Controller 操作，它将执行将消息实际添加到数据库的操作:

[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>