在.NET MVC4中使用Ajax进行部分视图加载

Question

我试图在这里关注这个可能非常错误的帖子,以便更多地了解MVC中的部分视图加载.我知道MVC的基础知识但想要在开始使用MVC之前做更多我曾经做过的ajax.

目标是让局部视图加载到div中.它只是将局部视图加载为整个页面,而不是Div内部.

代码如下:

控制器:

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>

部分视图1(Page1.cshtml)

@{
    ViewBag.Title = "Page1";
}

<h2>Page1</h2>

部分视图2(Page2.cshtml)

@{
    ViewBag.Title = "Page2";
}

<h2>Page2</h2>

更新:我创建了一个全新的MVC 4项目.默认情况下,它来自Jquery 1.7.1和来自microsoft的unobtrusive-ajax库.它仍然在新页面加载局部视图......

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

<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的页面上引用了脚本.

Answer 2

我将您的代码复制到一个全新的MVC4项目中,它运行正常.

查看解决方案的屏幕截图:

希望这会给你一个可能出错的提示.