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);
    }

Could you add your action code ? Create action in the Comment controller — Selman Genç
– Selman Genç, Commented Dec 30, 2013 at 12:21

Amila · Accepted Answer · 2014-01-06 10:05:41Z

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.

your comment section should be in a partial view and strongly type it (for your solution it might be a list of comments)
you should check if the request is ajax within the Action, using 'Request.IsAjaxRequest()'
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

I am using ArticleViewModel: public class ArticleViewModel { public Article _article { get; set; } public List<Comment> _comment { get; set; } } and after I added your solution i get error: "The model item passed into the dictionary is of type 'System.Collections.Generic.List`1[portal01.Models.Comment]', but this dictionary requires a model item of type 'portal01.Models.ArticleViewModel'." when calling @Html.Partial("_Comment", Model._comment)
Well, the error clearly explains itself. Check what you are strongly typing your partial view as. It should be @model List<Comment> not @model ArticleViewModel
Ok, it was my fault. I changed it as you suggest, but it works like before. I must refresh page by myself. Check my question I'll update it with my controller code.
How do you submit new comment? is it using a form generated by @Html.BeginForm or @Ajax.BeginForm ?
Ajax - like in your answer. I edited my question and add code from View where I'm submitting new comment.

Stefan · Accepted Answer · 2013-12-30 10:58:08Z

2

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

answered Dec 30, 2013 at 10:58

Stefan

4463 silver badges9 bronze badges

1 Comment

user2962215 Over a year ago

where should i put this? i modified my function reloadpage with this code and add to ipnut onClick, but nothing is changed :(

Selman Genç · Accepted Answer · 2013-12-30 12:34:12Z

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
}

user2962215 · Accepted Answer · 2014-01-17 21:01:33Z

1

Problem solved with changing

return View()

in POST Create Action to

ControllerContext.HttpContext.Response.Redirect(ControllerContext.HttpContext.Request.Url.ToString());

without any Partial Views, AJAX and Jquery

answered Jan 17, 2014 at 21:01

user2962215

557 bronze badges

Comments

Selman Genç · Accepted Answer · 2014-01-27 05:20:34Z

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.

Collectives™ on Stack Overflow

ASP.NET MVC4 Refresh view after adding a comment

5 Answers 5

10 Comments

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

1 Comment

Comments

Comments

Comments

Related