為什么我的操作從ajax.beginform調用的部分視圖沒有出現在頁面上？

Question

我有一個包含視圖模型的頁面，在頁面上單擊一個按鈕即可提交一個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)
                }

這使用控制器動作：

[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);

    }

這應該為用戶計算進度百分比，並在部分視圖“ _endofsection”中將該百分比返回到頁面。 局部視圖使用CurrentProgressViewModel來保存百分比。

一切似乎正常，但是部分視圖似乎未加載到頁面上，我可以看到它正在訪問並且可以在google chrome的“網絡”標簽中正確預覽。 但是，它沒有出現在表單所在的頁面上，這是我希望加載partialview的位置。

我在這里想念什么？ 為什么沒有出現？

此外，成功提交表單時調用的onsuccess函數似乎僅在第二次單擊時調用，但這是次要問題。

Answer 1

您正在使用Ajax.BeginForm helper方法進行ajax調用。 因此，您需要指定在DOM中替換（ajax調用的）響應的位置。 您可以使用UpdateTargetId屬性來指定。 它應該是要向其添加從ajax調用返回的響應的元素的ID。

另外，您還需要一個提交按鈕來提交表格。

假設您的操作方法正確返回了部分視圖結果而沒有任何錯誤，則此方法應該起作用。

<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"/>
}