如何從點擊佈局頁面鏈接異步加載內容頁面鏈接

我正在使用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

如何從點擊佈局頁面鏈接異步加載內容頁面鏈接

回答

相關問題