ASP.NET MVC4 Refresh view after adding a comment

Question

I am writing ASP.NET web application. I am using views generated by Visual Studio (Create/Delete/Details/Edit/Index). In my application I have Articles which can be commented by logged users. Everything works fine (adding comment and viewing it), but to view newly added comment I have to manually refresh page.

Structure of Article/Details View looks like:

@if (Request.IsAuthenticated)
{
using (Ajax.BeginForm("Create", "Comment", new { articleId = Model._article.ArticleId }, new AjaxOptions
    {
        HttpMethod = "post",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "myDisplayID"
    }))
    {
    @Html.ValidationSummary(true)

    <fieldset>
        <h4>Dodaj komentarz</h4>
        <p>
            @Html.TextArea("komentarz", new { @class = "form-control" })
        </p>
        <p>
            <input type="submit" value="Dodaj" class="btn btn-primary btn-large" />
        </p>
    </fieldset>
    }
}
else
{
    <p>
        <a href="~/Account/Login">Zaloguj się</a> aby dodać komentarz.
    </p>
}

<hr />
<div id="myDisplayID">
    @Html.Partial("_Comment", Model._comment)
</div>

EDIT Comment/Create GET method

public ActionResult Create(int articleId)
    {
        var komentarz = new Comment();
        komentarz.ArticleId = articleId;
        return View(komentarz);
    }

Comment/Create POST

 [HttpPost]
    public ActionResult Create(Comment comment, string komentarz, int articleId)
    {
        if (komentarz != String.Empty)
        {
            if (ModelState.IsValid)
            {
                comment.UserId = (int)WebSecurity.GetUserId(User.Identity.Name);
                comment.Content = komentarz;
                comment.ArticleId = articleId;
                db.Comments.Add(comment);
                db.SaveChanges();

            }

        }
        ArticleViewModel widok = new ArticleViewModel();
        widok._comment = (from b in db.Comments where b.ArticleId == articleId select b).ToList();
        return PartialView("_Comment", widok._comment);

    }

Article/Details GET method

public ActionResult Details(int id = 0)
    {
        ArticleViewModel widok = new ArticleViewModel();
        widok._comment = (from b in db.Comments where b.ArticleId == id select b).ToList();
        widok._article = (from t in db.Articles where t.ArticleId == id select t).FirstOrDefault();
        if (Request.IsAjaxRequest())
        {
            return PartialView("_Comment", widok._comment);
        }
        if (widok == null)
        {
            return HttpNotFound();
        }
        return View(widok);
    }

Answer 1

If you are to use Ajax.BeginFrom like you have shown. (but with some modifications)

using (Ajax.BeginForm(new AjaxOptions {
       HttpMethod= "get",
       InsertionMode=InsertionMode.Replace, 
       UpdateTargetId = "myDisplayID"
}))

, there are 3 things you need.

1. your comment section should be in a partial view and strongly type it (for your solution it might be a list of comments)
2. you should check if the request is ajax within the Action, using 'Request.IsAjaxRequest()'
3. if it's an ajax request, then you should return a partial view not the view.

.

public ActionResult Details()
{   
    //what ever the data retrieve code you have
    return View(alldata);         
}

[HttpPost]
public ActionResult Create(Comment comment, string komentarz)
{
    if (komentarz != String.Empty)
    {
        if (ModelState.IsValid)
        {
            comment.UserId = (int)WebSecurity.GetUserId(User.Identity.Name);
            comment.Content = komentarz;
            db.Comments.Add(comment);
            db.SaveChanges();
        }            
    }

    ArticleViewModel widok = new ArticleViewModel();
    widok._comment = (from b in db.Comments where b.ArticleId == id select b).ToList();
    return PartialView("_Comments",widok._comment);
}

submit comment - view

using (Ajax.BeginForm("Create", new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "myDisplayID"
    }))
    {
    @Html.ValidationSummary(true)

    <fieldset>
        <h4>Dodaj komentarz</h4>
        <p>
            @Html.TextArea("komentarz", new { @class = "form-control" })
        </p>
        <p>
            <input type="submit" value="Dodaj" class="btn btn-primary btn-large" />
        </p>
    </fieldset>
    }

in your view instead of

<h4>Comments</h4>
<table>
    // table with comments for this article
</table>

put

<div id="myDisplayID">
    @Html.Partial("_Comments", Model.Comments)
</div>

_Comments partial view

@model IEnumerable<Comments>
<h4>Comments</h4>
<table>
    // table with comments for this article
</table>

I think doing it this way will improve the user experience if you also happen to add new comments using ajax

Answer 2

You can refresh in javascript with window.location.href=window.location.href. Reload posts the data again.

Answer 3

Best option to do this send a post request with an ajax Call, like this:

 var comment = $("#txtComment).val(); // change this id with your textarea id
 var id = @Model._article.ArticleId;
 $.ajax({
            url: "/Comment/Create",
            type: "POST",
            dataType: "json",
            data: JSON.stringify({ content: comment, articleId: id }),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                // if you returning all your comment use this
                $("table").html(data.allContent);
                // or if you return just a row with this comment
                $("table").prepend(data.Comment);

           }

I assume your Action method like this:

[HttpPost]
public ActionResult Create(string content,int articleId)
{
   ...
   return Json(new { allContent = comments }); // just for example
}

Answer 4

Problem solved with changing

return View()

in POST Create Action to

ControllerContext.HttpContext.Response.Redirect(ControllerContext.HttpContext.Re​quest.Url.ToString());

without any Partial Views, AJAX and Jquery

Answer 5

Try this :

return RedirectToAction("Index", "Comments");

or however your controller is called. But..

The best solution for me is to add comment asynchronously with jquery ajax. Comment/Create should return html as response (partialview), and you should replace old table with new one.

$.ajax({

            url: "Comments/Create",
            data: {comment : "bla bla", articleId : 1},
            success: function (response) {

                if (response == 'True') {
                    $('table').html(response);

                }
            }
        });

Check some jquery ajax tutorials, it's very useful for such things. You can also use javascript when you are firing the action, which will prepare some html code with another row, and append it to table. Both of these ways are very nice, because you are not forced to reload the page.