我目前很难使用 Ajax 更新部分视图而无需刷新整个页面。我正在使用 MVC 和实体框架来构建视图。
我将尝试尽可能多地包括在内以帮助解释自己:
我有一个 div 将用于保存我所有评论的列表视图
<div id="ContainAnnouncementComments"> </div>
该 div 使用以下内容填充:
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Custom_Scripts/BuildAnnouncement.js"></script>
@Scripts.Render("~/bundles/jqueryval")
$(document).ready(function () {
$.ajax({
url: '/Comments/BuildAnnouncementComment',
data: { AnnouncementId: @Model.AnnouncementId},
success: function (result) {
$('#ContainAnnouncementComments').html(result);
}
});
});
这称为BuildAnnouncementComment()
我的控制器中的方法:
public ActionResult BuildAnnouncementComment(int? AnnouncementId)
{
return PartialView("_AnnouncementComment", db.Comments.ToList().Where(x => x.AnnouncementId == AnnouncementId));
}
然后,我有第二个 div 容器,用于保存文本框,供用户输入一些“应该”然后更新的信息ContainAnnouncementComments
使用 Ajax 替换调用:
<div id="ContainAnnouncementCommentCreate">
@using (Ajax.BeginForm("AJAXCreate", "Comments", new { announcementId = Model.AnnouncementId }, new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "ContainAnnouncementComments"
}))
{
<div class="form-group">
@Html.AntiForgeryToken()
<div class="col-md-10">
@Html.EditorFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
</div>
</div>
}
</div>
Ajax方法调用控制器中的AJAXCreate方法:
public ActionResult AJAXCreate(int announcementId, [Bind(Include = "CommentId, Message")] Comment comment)
{
if (ModelState.IsValid)
{
comment.UserId = User.Identity.GetUserId();
comment.AnnouncementId = announcementId;
db.Comments.Add(comment);
db.SaveChanges();
}
return PartialView("_AnnouncementComment", db.Comments.ToList());
}
从这里开始,运行时,我尝试创建新评论,但提交时,不是更新partialView,而是显示的只是partialview。
不确定我是否正确解释了这一点,因此如果我缺少任何信息,请告诉我,我会相应更新。