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

#

UpdateTargetId = "#mainDiv"

确保您的网页上引用了jquery.unobtrusive-ajax.min.js脚本。

Answer 2

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

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

Brand new MVC4 project with Ajax.ActionLink

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

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 \ 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数据或数据，如

data

。使用警报检查数据。

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

7 个答案: