jquery - 在 .NET MVC4 中使用 Ajax 进行部分 View 加载

Question

我正在尝试关注帖子 here ，这很可能是错误的，了解更多有关 MVC 中的部分 View 加载的信息。我了解 MVC 的基础知识，但想做更多在开始使用 MVC 之前做过的 ajax 工作。

目标是在 div 内部加载部分 View 。它只是将部分 View 作为整个页面加载，而不是在 Div 内部。

代码如下:

Controller :

namespace LDP.WebUI.Controllers
{
    public class TestController : Controller
    {
        //
        // GET: /Test/

        public ActionResult Index()
        {
            return View();
        }
        public PartialViewResult Page1()
        {
            return PartialView("Page1");
        }
        public PartialViewResult Page2()
        {
            return PartialView("Page2");
        }
    }
}

主视图(索引):(我也尝试过不带井号的“mainDiv”，不确定哪个是正确的)

<script src="@Url.Content("~/Scripts/libs/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/libs/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#hideme').click(function () {
            $(this).hide();
        });
    });
</script>
<div>
@Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
@Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
<div id ='mainDiv'>

</div>
<button id ="hideme">Hide Me</button>
</div>

部分 View 1 (Page1.cshtml)

@{
    ViewBag.Title = "Page1";
}

<h2>Page1</h2>

部分 View 2 (Page2.cshtml)

@{
    ViewBag.Title = "Page2";
}

<h2>Page2</h2>

更新: 我创建了一个全新的 MVC 4 项目。默认情况下，它附带 Jquery 1.7.1 和来自 microsoft 的 unobtrusive-ajax 库。它仍然在新页面中加载部分 View ...

更新:不确定这是否有帮助，但以下确实达到了我想要的结果...但仍然没有解决为什么这个解决方案不起作用的问题

<button>load about</button>
<script type="text/javascript">
    $("button").click(function () {
        $("#mainDiv").load("Test/Page2");
    });

</script>
    enter code here

Answer 1

1. 放弃 UpdateTargetId = "#mainDiv" 中的 #
2. 确保您的页面上引用了 jquery.unobtrusive-ajax.min.js 脚本。