javascript - 为什么我的 ajax.beginform 操作调用的部分 View 没有出现在页面上？

Question

我有一个带有 View 模型的页面，在页面上单击按钮正在提交 ajax 表单:

@using (Ajax.BeginForm("finalstatus", "User", null, new AjaxOptions
                {
                    HttpMethod = "POST",
                    OnSuccess = "popupappear()",

                }, new { id = "progForm"}))
                {
                    @Html.HiddenFor(Model => Model.SectionID)
                    @Html.HiddenFor(Model => Model.CourseID)
                }

这使用 Controller 操作:

[HttpPost]
    public ActionResult finalstatus(SubSectionViewModel model)
    {

        string currentuser = User.Identity.GetUserId();

        var viewModel = db.enrollment
            .Where(i => i.UserID == currentuser)
            .Where(i => i.course.CourseID == model.CourseID)

            .Select(x => new CurrentProgressViewModel
            {

                ovpcnt = (int)Math.Round((double)(100 * x.progress.Sum(c => c.progress)) / x.course.course_sections.SelectMany(i => i.course_subsections).Sum(c => c.scenes)),

            }).Single();


        return PartialView("_endofsection", viewModel);

    }

这应该计算用户的进度百分比，并将该百分比以部分 View “_endofsection”返回到页面。部分 View 使用持有百分比的 CurrentProgressViewModel。

一切似乎都正常，但是部分 View 似乎没有加载到页面上，我可以看到它正在被访问并在谷歌浏览器的网络选项卡中正确预览。但是，它不会出现在表单所在的页面上，而这是我期望加载部分 View 的位置。

我在这里缺少什么？为什么没有出现？

此外，表单成功提交时调用的 onsuccess 函数似乎仅在第二次单击时调用，但这是次要问题。

Answer 1

您正在使用 Ajax.BeginForm 辅助方法进行 ajax 调用。因此，您需要指定要在 DOM 中替换(ajax 调用的)响应的位置。您可以使用 UpdateTargetId 属性来指定。它应该是您想要添加从 ajax 调用返回的响应的元素的 ID。

您还需要一个提交按钮来提交您的表单。

假设您的操作方法正确返回部分 View 结果且没有任何错误，这应该可以工作。

<div id="YourDivToShowResult"></div>

@using (Ajax.BeginForm("finalstatus", "User", null, new AjaxOptions
{
    HttpMethod = "POST",
    OnSuccess = "popupappear()",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "YourDivToShowResult"

}, new { id = "progForm" }))
{
    @Html.HiddenFor(Model => Model.SectionID)
    @Html.HiddenFor(Model => Model.CourseID)

    <input type="submit"/>
}