16

我正在尝试关注这里的帖子，这很可能是错误的，以了解更多关于 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
4

7 回答 7

16
  1. 投入#_UpdateTargetId = "#mainDiv"
  2. 确保您jquery.unobtrusive-ajax.min.js的页面上引用了脚本。
于 2013-01-25T21:12:00.123 回答
13

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

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

带有 Ajax.ActionLink 的全新 MVC4 项目

希望这会给您提示可能出现的问题。

于 2013-04-03T12:05:14.460 回答
4

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

$( document ).ready(function() {

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

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

  });

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

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

  });

});
于 2013-01-25T21:01:48.160 回答
1 
@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 调用中使用“#”。

于 2013-01-25T23:30:02.900 回答
0

我对原始示例的唯一问题是脚本 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";
}
于 2013-04-30T15:42:29.920 回答
0

我遇到了同样的问题；将部分视图作为整个页面而不是在定义的 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>
}

抱歉，如果我的解释有点初级，我对此有点陌生。希望这对某人有所帮助。

于 2013-07-22T15:05:30.927 回答
0

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

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

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

数据

. 使用警报检查数据。

于 2013-11-10T20:33:14.930 回答