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

发布于 2024-08-15 18:57:24 字数 3756 浏览 2 评论 0原文

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>

原文

TGIF,

I have a website I'm developing which is using ASP.NET masterpage/sitemap/content pages setup. I hate the "blinking" the site does when navigating between content pages using the asp:menu control. Any suggestions on how to use jQuery ajax instead of AJAX.NET updatepanels? I've used updatepanels in the past and I hate it; clunky and bloated.

Here's the code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

高冷爸爸 2024-08-22 18:57:24

您可以使用SuperFish 插件将 jQuery 与您的站点地图和菜单结合使用。这是一个类似问题。

回复收藏 0 原文

何其悲哀 2024-08-22 18:57:24

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

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

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

  });
}

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

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

Are your content pages static or dynamic? If they are static you can always perform a get and swap out the content like so:

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

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

  });
}

where contentSource is your URL of the content you wish to retrieve. You could get rid of your Asp menu and go for simple asp:repeater and feed it with your data.

To be honest, the site map is over engineered and pretty inflexible when compared to simple jQuery nav solutions where you build out your menus with ul/ li tags. It is easier to roll your own data structure and pump it down to the client for jQuery to manipulate.

回复收藏 0 原文

岁月流歌 2024-08-22 18:57:24

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

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

 // process data return on callback

});

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

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

 // process data return on callback

});

回复收藏 0 原文

~没有更多了~

关于作者

我是男神闪亮亮

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。