我在一个页面中有两种形式,一种是用于添加评论,另一种是博客的主要内容,如下所示。
我的目标是使博客页面具有添加评论功能。当用户添加评论时,我想使用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发布表单数据并且无法重定向到另一页?
我知道也有类似的问题,但我找不到确切的答案。任何帮助表示赞赏。
您正在“添加评论”视图中使用“表单”,并且该表单在您的控制器中调用AddComment返回json数据。表单确实会导致重定向到它们调用的方法,并且由于您的控制器返回的是json,因此浏览器只是将其显示在新页面上。
您可以从控制器的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时,您可以使用JavaScript编写代码以对该数据进行处理,或者将其显示回添加注释页面上。
可以直接从asp.net进行此Ajax调用,而无需使用单独的JavaScript。但是我现在似乎似乎还记不清它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句