Question

I have one text field where user can write short message (like status on g+ or fb) bellow that field I have a list where that messages need to be displayed. When user submit that message it is stored in database, after that I refresh whole View. This is how I display that list:

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

Now I wan’t to make better user experience. I wan’t to add that message without refreshing while View. I know that I have to use JQuery, Ajax etc. but I have searched on the google and can’t find any good tutorial or example for ASP MVC / Razor and this like feature. Can somebody give me some direction?

Answer 1

Typing asp.net mvc ajax jquery in google usually yields sufficiently enough results. But anyway here’s what you could do. Assuming you have a text field where the users will type their messages:

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

you could AJAXify this form:

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

and finally you would have a controller action which will perform the actual adding of the message to the database:

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

and a corresponding display template (~/Views/Messages/DisplayTemplates/MessageViewModel.cshtml):

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

and the list of messages will be shown using display templates and not using loops:

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