如何防止 Ajax 重定向到 Asp.net Mvc 5 中的另一个页面
How to prevent Ajax redirects to another page in Asp.net Mvc 5
我在一个表单里有两个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 的表单数据而不是重定向到另一个页面?
我知道有类似的问题,但我找不到确切的答案。
感谢任何帮助。
您在“添加评论”视图中使用了表单,该表单在您的控制器中调用了 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 + '¶meter2=' + 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。不过现在好像记不太清了。
我在一个表单里有两个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 的表单数据而不是重定向到另一个页面?
我知道有类似的问题,但我找不到确切的答案。 感谢任何帮助。
您在“添加评论”视图中使用了表单,该表单在您的控制器中调用了 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 + '¶meter2=' + 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。不过现在好像记不太清了。