我目前无法使用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容器,用于容纳一个文本框供用户输入一些信息,这些信息应该是&#39;然后使用Ajax替换调用更新ContainAnnouncementComments
:
<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());
}
从这里开始,我尝试创建一个新的评论,但是在提交时,而不是更新的部分视图,显示的所有内容都是部分视图。
我不确定我是否正确解释了这一点,所以如果我遗漏了任何信息,请告诉我,我会相应更新。
答案 0 :(得分:0)
经过3个小时的盯着我的代码后,我意识到实现没有任何问题,所有错误的是我没有通过NuGet管理器安装AJAX。
乐趣。