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

Question

我在一個頁面中有兩種形式。其中一種是添加評論，另一種是以下主要博客內容。

我的目標是讓博客頁面添加評論功能。當用戶添加評論時，我想使用ajax發佈評論另一個控制器。當提供此功能時，我希望用戶留在同一頁面並更新評論部分在頁面上查看。但是，我無法通過下面的代碼實現此目的。

主要的博客內容

@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。 是否有可能只是檢索JsonResult並留在同一頁面？

或者我不能使用ajax發佈表單數據而不是重定向到另一個頁面？

我知道有類似的問題，但我找不到確切的答案。 任何幫助表示讚賞。

Answer 1

您在您的添加評論視圖中使用表單，並且該表單在您的控制器中調用AddComment來返回一個json數據。表單確實會導致重定向到他們所調用的方法，並且由於您的控制器正在返回json，因此瀏覽器會將其顯示在新頁面上。

您可以從控制器中的添加註釋方法返回視圖。該視圖可以是評論視圖。通過這種方式，控件將使用新數據重新導向相同的視圖。這是一個示例代碼，實際上，這個代碼應該與控制器的ShowAddCommentView方法中的代碼幾乎相同。或者不使用Form將數據發送到控制器，而是使用簡單的Ajax調用而不使用AjaxForm，而不是使用Form向控制器發送數據。當用戶點擊按鈕時，您可以在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被返回時，你可以在javascript中編寫代碼來處理這些數據，也許將其顯示在添加評論頁面上。

可以直接從asp.net進行這個ajax調用，而無需使用單獨的javascript。但我現在似乎無法完全記住它。