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

我试图在这里关注这个post,这可能是错误的,以了解更多关于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”,不确定哪个是对的)

    $(document).ready(function () { $('#hideme').click(function () { $(this).hide(); }); });  
@Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"}) @Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})

部分视图1(Page1.cshtml)

 @{ ViewBag.Title = "Page1"; } 

Page1

部分视图2(Page2.cshtml)

 @{ ViewBag.Title = "Page2"; } 

Page2

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

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

   $("button").click(function () { $("#mainDiv").load("Test/Page2"); });  enter code here 

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

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

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

使用Ajax.ActionLink创建全新的MVC4项目

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

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

 $( document ).ready(function() { $("#lnkPage1").click(function( event ) { $('#mainDiv').load('Test/Pag1'); }); $("#lnkPage2").click(function( event ) { $('#mainDiv').load('Test/Pag2'); }); }); 
 @using (Ajax.BeginForm("AjaxViewCall", "Home", new AjaxOptions { UpdateTargetId = "result" })) { 

}

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

  

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

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

我得到了同样的问题; 将局部视图加载为整个页面而不是定义的div。

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

在我的_Layout.cshtml视图中,它定义了@RenderSection("scripts", required: false)哪个是英文的; 可以选择在视图中包含一个名为@scripts的部分。 因此,如果您不包含它(@section脚本),则不会抛出任何错误,但症状是如果您不这样做,Ajax只会在新页面中呈现。

要解决此问题:在您的视图中添加以下内容(我将其放在...ViewBag.Title; }

 @section scripts{  } 

对不起,如果我的解释有点简陋,我对此有点新鲜。 希望这有助于某人。

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

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

这里,返回的数据是json数据或数据之类的

数据

。 使用警报来检查数据。