如何防止 Ajax 重定向到 Asp.net Mvc 5 中的另一个页面

Question

我在一个表单里有两个page.One，一个是加评论，一个是博客主要内容如下

我的目标是让博客页面添加评论 functionality.When 用户添加评论，我想 post 评论另一个控制器使用 ajax.When 提供此功能，我希望用户保持在同一页面并在 page.However 更新评论部分视图我无法使用以下代码实现此目的。

主要博客内容

@model WforViolation.Models.Violation

@{
    ViewBag.Title = "Details";
}


<h1>@Model.Title</h1>
<p class="lead">
    Posted by @Model.CreatorUser.UserName<a href="#"></a>
</p>
<hr>
<!-- Date/Time -->
<p><span class="glyphicon glyphicon-time"></span> Posted on @Model.CreationDateTime <span class="glyphicon glyphicon-flag"></span> @Model.Severity Severity <span class="glyphicon glyphicon-comment"> </span> @Model.Comments.Count Comments </p>
<p><span class="glyphicon glyphicon-eye-open"> People Viewed</span></p>
<hr>
<!-- Preview Image -->
<img class="img-responsive" src="@Model.Picture.FirstOrDefault().MediumPath" alt="">
<hr>
<!-- Post Content -->
<p class="lead">@Model.Title</p>
<p>@Model.Description</p>

<hr>
<!-- Blog Comments -->
<!-- Comments Form -->
@Html.Partial("_AddComment", new WforViolation.Models.CommentViewModel() { ViolationId=Model.Id,Content=""})
<hr>
<!-- Posted Comments -->
<!-- Comment -->
@Html.Partial("_Comments",Model)

添加评论查看

@model WforViolation.Models.CommentViewModel
<div class="well">
    <h4>Leave a Comment:</h4>

    @using (Ajax.BeginForm("AddComment", "Comment", null, new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = "SuccessMessage",
        OnFailure = "FailMessage"
        //UpdateTargetId = "resultTarget"
    }, new { id = "MyNewNameId", role = "form" })) // set new Id name for  Form
    {
        @Html.AntiForgeryToken()
        <div class="form-group">
            @Html.TextAreaFor(model => model.Content, new { @rows = 3 })
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        @Html.HiddenFor(model=>model.ViolationId)
    }
    </div>
<script>
    //\\\\ JS  retrun message SucccessPost or FailPost
    function SuccessMessage() {
        alert("Succcess Post");
    }
    function FailMessage() {
        alert("Fail Post");
    }
</script>

我的评论控制器

  [HttpPost]
    public ActionResult AddComment(CommentViewModel commentViewModel)
    {
         Comment comment = new Comment();
         var userID = User.Identity.GetUserId();

        if (!string.IsNullOrEmpty(userID))
        {
            var manager = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(context));
            var currentUser = manager.FindById(User.Identity.GetUserId());
            comment.ApplicationUser=currentUser;
        }
        var violationId = commentViewModel.ViolationId;
        Violation violationCommentedOn = context.Violations.Where(x => x.Id == violationId).FirstOrDefault();
        comment.Violation = violationCommentedOn;
        context.Comments.Add(comment);
        context.SaveChanges();
        var result = Json(
                       new
                       {
                           Success = true,//success
                           StatusMessage = "Object created successfully"
                       });
        return result;
    }

当我添加评论时，它会将我重定向到另一个名为 localhost/Comment/AddComment 的页面，其内容只是 Json。是否可以仅检索 Json 结果并停留在同一页面？

或者我不能 post 使用 ajax 的表单数据而不是重定向到另一个页面？

我知道有类似的问题，但我找不到确切的答案。感谢任何帮助。

Answer 1

您在“添加评论”视图中使用了表单，该表单在您的控制器中调用了 return 一个 json 数据的 AddComment。表单确实会导致重定向到它们调用的方法，并且因为您的控制器正在 returning json，浏览器只是将其显示在新页面上。

您可以 return 来自控制器中 AddComment 方法的视图。该视图可以是评论视图。这样控件将重定向回具有新数据的相同视图。这是一个示例代码，实际上，这段代码应该与控制器的 ShowAddCommentView 方法中的代码几乎相同。

CommentViewModel commentVM; 
/// populate commentVM from DB or comment store
/// remove return result;
return View("AddCommentView", commentVM);  /// your add comment view name

或者不使用 Form 将数据发送到控制器，而是使用简单的 ajax 调用而不使用 AjaxForm。当用户点击按钮时，您可以在 javascript 中调用 Ajax。我有一个 jquery 例子。 parameter1、parameter2 与 CommentViewModel 的属性相同。当然，您也可以在此调用中使用 json 数据参数，而不是像以下示例中那样传递参数。

$.ajax({
        url: '/Comment/AddComment?parameter1='+ pvalue1 + '&parameter2=' + pvalue2,
        async: false,
        cache: false,
        type: 'POST',
        success: function (msg) {
            /// this msg object is actually the json object your controller is returning. 
        }
    });

此调用不会导致页面重定向。当 json 被 return 编辑时，您可以在 javascript 中编写代码来处理该数据，也许将其显示回添加评论页面。

可以直接从 asp.net 进行此 ajax 调用，而无需使用单独的 javascript。不过现在好像记不太清了。

如何防止 Ajax 重定向到 Asp.net Mvc 5 中的另一个页面

How to prevent Ajax redirects to another page in Asp.net Mvc 5

json

ajax

asp.net-mvc

asp.net-mvc-partialview