使用 Ajax Beginform 加载不同的局部视图答案

【问题标题】：Loading different partial view with Ajax Beginform使用 Ajax Beginform 加载不同的局部视图
【发布时间】：2015-12-29 14:25:43
【问题描述】：

我刚刚创建了一个小型测试项目，以查看是否可以在 ASP.NET MVC Razor 页面上加载不同的局部视图，但似乎我没有这样做。它不是用“Partial”替换“partial” div，而是将“Partial”作为新页面打开......

谁能告诉我我做错了什么？

目前情况：

概述/Index.cshtml：

@model dynamic

@{
    ViewBag.Title = "title";
}

<h2>title</h2>

@Html.Partial("AnotherPartial")

概述/AnotherPartial.cshtml：

@model dynamic

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

@{
    ViewBag.Title = "title";
}

    <h2>title</h2>
    @using(Ajax.BeginForm("Post", "Overview", new AjaxOptions{InsertionMode = InsertionMode.Replace, UpdateTargetId = "partial", HttpMethod = "POST"}))
    {
        <button type="submit">Submit</button>
    }
<div id="partial">
</div>

报告/Partial.cshtml：

@model dynamic

@{
    ViewBag.Title = "title";
}

<h2>Partial</h2>

概览控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxWebTest.Controllers
{
    public class OverviewController : Controller
    {
        // GET: Overview
        public ActionResult AnotherPartial()
        {
            return PartialView();
        }

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public PartialViewResult Post()
        {
            return PartialView("~/Views/Report/Partial.cshtml");
        }
    }
}

报告控制器：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxWebTest.Controllers
{
    public class ReportController : Controller
    {
        // GET: Report
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Partial()
        {
            return PartialView();
        }
    }
}

编辑：找到解决方案：

发现问题，我的页面上没有定义jQuery，所以unobtrusive-ajax js文件没有正确加载。在我的 unobtrusive-ajax 之前添加了以下参考：

<script src="~/Scripts/jquery-1.10.2.js"></script>

【问题讨论】：

为什么要使用HttpMethodGET？使用POST。
@teovankot 我的错，因为我用两个 HttpMethods 都尝试过，所以就这样离开了，不幸的是这并没有解决它......更新了我的帖子
纯属胡扯。您是否尝试将 div 放在表单中？
在我可以用谷歌搜索相同问题的任何地方，人们都说您添加的脚本可能存在问题，我可以看到您的部分视图中有<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>。将其放在您的_Layout 中，希望对您有所帮助。
接受一个答案。

标签： c# ajax asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

您应该将 unobtrusive-ajax 脚本引用放在主视图的 Scripts 部分。

@model dynamic

@{
    ViewBag.Title = "title";
}

<h2>Main Index page title</h2>

@Html.Partial("AnotherPartial")

@section Scripts
{
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}

在 Layout 文件中，@RenderSection("scripts", required: false) 在加载 jQuery 库后在最底部被调用。 unobtrusive-ajax 脚本期望 jQuery 可用/已经加载。

<div id="pageContent">
    @RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

因此，如果您想从其他视图执行一些 js 文件，则需要将这些文件包含在脚本部分中，以便当页面完全呈现时，它将被添加到底部（在 jQuery 等其他依赖库之后加载）；

【讨论】：

【解决方案2】：

发现问题，我的页面上没有定义jQuery，所以unobtrusive-ajax js文件没有正确加载。在我的 unobtrusive-ajax 之前添加了以下参考：

<script src="~/Scripts/jquery-1.10.2.js"></script>

【讨论】：