Question

TGIF，

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

以下是代码：

<%@ 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>

Answer 1

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

Answer 2

您的内容页面是静态还是动态？如果它们是静态的，你总是可以执行get和交换内容，如下所示：

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

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

  });
}

其中contentSource是您要检索的内容的网址。你可以摆脱你的Asp菜单，然后选择简单的asp：repeater并将其与你的数据一起提供。

说实话，与使用ul / li标签构建菜单的简单jQuery导航解决方案相比，网站地图设计过于简单并且非常不灵活。滚动自己的数据结构并将其下载到客户端以供jQuery操作更容易。

Answer 3

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

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

 // process data return on callback

});

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

3 个答案: