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

Question

我正在尝试关注 here 的帖子，这很可能是错误的，以了解更多关于 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 项目中，它运行良好。

查看解决方案截图：

希望这会给您一个提示，告诉您可能出了什么问题。

Answer 3

我通常使用 JQuery 加载这样的部分

$( document ).ready(function() {

  $("#lnkPage1").click(function( event ) {

    $('#mainDiv').load('Test/Pag1');

  });

  $("#lnkPage2").click(function( event ) {

    $('#mainDiv').load('Test/Pag2');

  });

});

Answer 4

@using (Ajax.BeginForm("AjaxViewCall", "Home", new AjaxOptions { UpdateTargetId = "result" }))   
{
    <p>
        <input type="submit" value="Ajax Form Action" />
    </p>
}

<div id="result></div>

在单击按钮时，它应该调用返回 PartialView 的 Action。您的 Ajax.BeginForm 调用中不需要“#”。

Answer 5

我在原始示例中遇到的唯一问题是脚本 src 路径中的 \lib\。默认 MVC 4 Web 应用程序会将 js 文件放在“Scripts”中，而不是“Scripts\Lib”中。您的屏幕截图示例是正确的。

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" 

同样在原始示例中 - 放入 ViewBag.Title 将导致此操作无效：

@{
    ViewBag.Title = "Some Title";
}

Answer 6

我遇到了同样的问题；将部分视图作为整个页面而不是在定义的 div 中加载。

我错误地认为我的 _Layout.cshtml 包含了 jquery.unobtrusive-ajax.js 文件，因为我不明白 Bundles thingy(?) 在做什么。我以为是Bundles添加的。

在我的_Layout.cshtml 查看它定义了@RenderSection("scripts", required: false) 英文是哪个；在视图中包含一个名为@scripts 的部分是可选的。 因此，如果您不包含它（@section 脚本），则不会引发错误，但症状是如果您不包含它，Ajax 只会在新页面中呈现。

修复它：将以下内容放在您的视图中（我将其放在...ViewBag.Title; } 下方）

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

对不起，如果我的解释有点粗略，我对此有点陌生。希望这对某人有所帮助。

Answer 7

加载 json 数据或表格部分视图。不是全格式视图。

success:function(data){
    alert(data);
    debugger;
    ('#div_id').data(data);
}

这里，返回的数据是json数据或者类似数据

数据

。 使用警报检查数据。