Question

我正在编写ASP.NET Web应用程序。我正在使用Visual Studio生成的视图（创建/删除/详细信息/编辑/索引）。在我的应用程序中，我有文章，可以由登录用户评论。一切正常（添加评论和查看），但要查看新添加的评论，我必须手动刷新页面。

文章/细节的结构视图如下：

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

修改评论/创建GET方法

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

评论/创建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);

    }

文章/细节GET方法

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

如果你要像你所示的那样使用Ajax.BeginFrom。（但经过一些修改）

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

，你需要3件事。

您的评论部分应该是部分视图并强烈输入（对于您的解决方案，它可能是评论列表）
你应该使用'Request.IsAjaxRequest（）'
如果是ajax请求，那么您应该返回部分视图而不是视图。

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

提交评论 - 查看

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

而不是

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

把

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

如果你碰巧使用ajax添加新评论，我认为这样做可以改善用户体验

Answer 2

您可以使用window.location.href = window.location.href在javascript中刷新。重新加载再次发布数据。

Answer 3

执行此操作的最佳选择是使用ajax调用发送发布请求，如下所示：

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

           }

我假设你的Action方法是这样的：

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

Answer 4

通过更改

解决了问题

return View()

在POST中创建动作

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

没有任何部分视图，AJAX和Jquery

Answer 5

试试这个：

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

或者你的控制器被调用。但..

对我来说，最好的解决方案是使用jquery ajax异步添加注释。 Comment/Create应该返回html作为响应（partialview），你应该用新的表替换旧表。

$.ajax({

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

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

                }
            }
        });

检查一些jquery ajax教程，它对这些事情非常有用。您也可以在触发操作时使用javascript，这将使用另一行准备一些html代码，并将其附加到表中。这两种方式都非常好，因为您不必重新加载页面。

添加注释后的ASP.NET MVC4刷新视图

5 个答案: