Как загрузить контент страницы асинхронно с помощью jQuery? - PullRequest
Новая
       35

Как загрузить контент страницы асинхронно с помощью jQuery?

0 голосов
/ 18 декабря 2009

TGIF,

У меня есть веб-сайт, который я разрабатываю и который использует ASP.NET masterpage / sitemap / content pages setup. Я ненавижу «мерцание», которое делает сайт при навигации по контентным страницам с помощью элемента управления 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>

Ответы [ 3 ]

2 голосов
/ 18 декабря 2009

Вы можете использовать плагин SuperFish для jQuery вместе с SiteMap и Меню. Вот аналогичный вопрос .

1 голос
/ 20 декабря 2009

Ваши страницы контента являются статическими или динамическими? Если они статичны, вы всегда можете получить и обменять содержимое следующим образом: 

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

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

  });
}

где contentSource - ваш URL контента, который вы хотите получить. Вы можете избавиться от своего меню Asp и пойти на простой Asp: Repeater и кормить его своими данными.

Если честно, карта сайта слишком сложная и довольно негибкая по сравнению с простыми навигационными решениями jQuery, где вы строите свои меню с помощью тегов ul / li. Проще свернуть свою собственную структуру данных и передать ее клиенту для манипулирования jQuery.

0 голосов
/ 18 декабря 2009

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

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

 // process data return on callback

});
...