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

Question

I just created a small test project to see if it's possible to load a different partial view on an ASP.NET MVC Razor page, but it seems like I failed to do so. Instead of replacing the "partial" div by "Partial", it opens "Partial" as a new page...

Can anyone tell me what I'm doing wrong?

Current situation:

Overview/Index.cshtml:

@model dynamic

@{
    ViewBag.Title = "title";
}

<h2>title</h2>

@Html.Partial("AnotherPartial")

Overview/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>

Report/Partial.cshtml:

@model dynamic

@{
    ViewBag.Title = "title";
}

<h2>Partial</h2>

OverviewController:

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");
        }
    }
}

ReportController:

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();
        }
    }
}

---

EDIT: Found the solution:

Found the problem, jQuery wasn't defined on my page, so the unobtrusive-ajax js file didn't load properly. Added following reference BEFORE my unobtrusive-ajax include:

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

Answer 1

You should put your unobtrusive-ajax script reference in the Scripts section of your main view.

@model dynamic

@{
    ViewBag.Title = "title";
}

<h2>Main Index page title</h2>

@Html.Partial("AnotherPartial")

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

In the Layout file, @RenderSection("scripts", required: false) is called at the very bottom after loading jQuery library. The unobtrusive-ajax script is expecting jQuery to be available/already loaded.

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

So if you want to execute some js files from your other views, you need to include those in the scripts section so that when the page is fully rendered, it will be added to the bottom ( After other dependeny libraries like jQuery is loaded);

Answer 2

Found the problem, jQuery wasn't defined on my page, so the unobtrusive-ajax js file didn't load properly. Added following reference BEFORE my unobtrusive-ajax include:

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