如何从点击布局页面链接异步加载内容页面链接

我正在使用Asp.net mvc。我有一个包含左窗格和中心窗格（内容窗格）的传统布局页面，即当用户单击任何选项卡时，我的左窗格包含一些选项卡，例如主页，事件等等，相应的操作将发生并且页面被加载。但我想要异步加载内容窗格，即不加载整个页面，即布局页面和内容页面我只想加载内容页面。对，我已经使用jQuery的AJAX调用和意见的RenderPartial类似的机制，如何从点击布局页面链接异步加载内容页面链接

$('#lnkHome').click(function() { 
       $.ajax({ 
        url: '/Home/Home', 
        type: 'POST', 
        cache: false, 
        success: function (data) { 
         $('div.ContentPane').html(data); 
        } 
       }); 
      }); 
public actionresult Home() 
{ 
return Partial("_home"); 
}

，但我无法用我所有的JavaScript代码，我认为这是重叠的布局页面的脚本。是否有任何方法来加载与我的场景匹配的异步页面。请指导我。

来源

2012-10-04 Karthik Bammidi

如果这些链接是锚，你应该确保通过点击处理程序返回false就取消默认事件：

$(function() { 
    $('.menuLink').click(function() { 
     $.ajax({ 
      url: this.href, 
      type: 'GET', 
      cache: false, 
      success: function (data) { 
       $('div.ContentPane').html(data); 
      } 
     }); 

     return false; 
    }); 
});

现在你可以在你的左侧窗格中许多环节：

@Html.ActionLink("go to home", "index", "home", null, new { @class = "menuLink" }) 
@Html.ActionLink("go to events", "events", "home", null, new { @class = "menuLink" }) 
...

或者干脆使用Ajax.ActionLinks：

@Ajax.ActionLink("go to home", "index", "home", new AjaxOptions { UpdateTargetId = "contentPane", HttpMethod = "POST" }) 
@Ajax.ActionLink("go to events", "events", "home", new AjaxOptions { UpdateTargetId = "contentPane", HttpMethod = "POST" }) 
...

你只需要给一个id给你的con 10吨窗格ID因为Ajax.ActionLink预期目标DOM元素的ID：

<div id="contentPane"> 
    ... 
</div>

，不要忘记引用jquery.unobtrusive-ajax脚本在你的页面，以便Ajax.ActionLinks实际上是悄悄地支持Ajax和发送AJAX请求，而不是常规请求：

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

来源

2012-10-04 14:34:53

如何从点击布局页面链接异步加载内容页面链接

回答

相关问题