如何使用 jQuery 异步加载内容页面？答案

【问题标题】：How to load content pages async using jQuery?如何使用 jQuery 异步加载内容页面？
【发布时间】：2009-12-18 19:48:54
【问题描述】：

TGIF，

我正在开发一个使用 ASP.NET 母版页/站点地图/内容页面设置的网站。我讨厌使用 asp:menu 控件在内容页面之间导航时网站的“闪烁”。关于如何使用 jQuery ajax 而不是 AJAX.NET 更新面板的任何建议？我过去使用过更新面板，但我讨厌它；笨重而臃肿。

代码如下：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="styles/master.css" rel="stylesheet" type="text/css" />
    <title>Impeccable Construction Service</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/scripts/jquery-1.3.2.js" />
        </Scripts>
    </cc1:ToolkitScriptManager>
    <div id="main">
        <div class="header">
            <asp:Image ID="HeaderLogo" runat="server" ImageUrl="images/header-logo.png" />
            <asp:Image ID="SubHeader" runat="server" ImageUrl="images/sub-header.png" />
        </div>
        <div class="navbar">
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
            <asp:Menu ID="NavMenu" runat="server" Orientation="Horizontal" DataSourceID="SiteMapDataSource1"
                StaticDisplayLevels="2" MaximumDynamicDisplayLevels="4" DynamicHorizontalOffset="1"
                StaticSubMenuIndent="1px" DynamicPopOutImageUrl="images/right-arrow.gif" StaticPopOutImageUrl="images/drop-arrow.gif"
                CssClass="NavMenu" Height="30px">
                <StaticMenuItemStyle ItemSpacing="10" CssClass="staticMenuItemStyle" />
                <StaticHoverStyle CssClass="staticHoverStyle" />
                <StaticSelectedStyle CssClass="staticMenuItemSelectedStyle" />
                <DynamicMenuItemStyle CssClass="dynamicMenuItemStyle" />
                <DynamicHoverStyle CssClass="menuItemMouseOver" />
                <DynamicMenuStyle CssClass="menuItem" />
                <DynamicSelectedStyle CssClass="menuItemSelected" />
                <DataBindings>
                    <asp:MenuItemBinding DataMember="siteMapNode" NavigateUrlField="url" TextField="title"
                        ToolTipField="description" />
                </DataBindings>
            </asp:Menu>
            <asp:SiteMapPath ID="SiteMapPath1" runat="server" RenderCurrentNodeAsLink="true"
                PathSeparator=" >> " CssClass="currentNodeStyle">
                <PathSeparatorStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
                <CurrentNodeStyle ForeColor="#333333" CssClass="currentNodeStyle" />
                <NodeStyle ForeColor="#7C6F57" CssClass="currentNodeStyle" />
                <RootNodeStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
            </asp:SiteMapPath>
        </div>
        <div id="content">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div class="footer">
            <h4>
                Rivera Design Studio
            </h4>
        </div>
    </div>
    </form>
</body>
</html>

【问题讨论】：

见stackoverflow.com/questions/1929497/loading-gif-in-mvc

标签： asp.net jquery sitemap master-pages

【解决方案1】：

您可以将 jQuery 的 SuperFish plugin 与您的站点地图和菜单结合使用。这是一个similar question。

【讨论】：

【解决方案2】：

您的内容页面是静态的还是动态的？如果它们是静态的，您始终可以执行获取并换出内容，如下所示：

function GetNewContent(contentSource)
{
  $.get(contentSource, function(content){

     $('#contentArea').html(content);   

  });
}

其中 contentSource 是您要检索的内容的 URL。您可以摆脱您的 Asp 菜单并使用简单的 asp:repeater 并将您的数据提供给它。

老实说，与使用 ul/li 标签构建菜单的简单 jQuery nav 解决方案相比，站点地图设计过度且相当不灵活。滚动您自己的数据结构并将其泵送到客户端以供 jQuery 操作会更容易。

【讨论】：

【解决方案3】：

http://docs.jquery.com/Ajax/jQuery.getJSON

$.getJSON(myAction, { Data: myData }, function(data) {

 // process data return on callback

});

【讨论】：