asp.net jquery 选项卡和更新面板答案

【问题标题】：asp.net jquery tabs and updatepanelsasp.net jquery 选项卡和更新面板
【发布时间】：2010-12-24 18:55:37
【问题描述】：

我将 asp.net 与 jquery 一起使用。在 Default.aspx 中，我实现了一些 jquery-tabs，它们通过 ajax 调用加载它们的数据。他们加载另一个 asp.net 页面 MyTab.aspx。我的问题是，当我在选项卡（MyTab.aspx）中导航时，它总是重新加载整个页面（整个 Default.aspx），但我只希望它在选项卡内重新加载。例如，当添加一个项目时，我只想重新加载选项卡。

所以我在 MyTab.aspx 中添加了一个更新面板。现在的问题是 Default.aspx 上的所有链接都已损坏，它只是在单击时在整个窗口中打开选定的选项卡。很奇怪，但我读到有时让 updatepanels 与 jquery 一起工作会很麻烦。

你可以在下面看到我的代码，有什么我可以做的不同来让它工作吗？

在 Default.aspx 中：

<html>
    <head runat="server">
        <script type="text/javascript">
            $(function() {
                $('.tabs').tabs();
            }); 
        </script>
    </head>
    <body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
        <div class="tabs">
            <ul>
                <li><a href="#PanelTab">Tab0</a></li>
                <li><a href='MyTab.aspx?type=1'>Tab1</a></li>
                <li><a href='MyTab.aspx?type=2'>Tab2</a></li>
            </ul>
            <div id="PanelTab">Content0</div>
        </div>
    </form>
    <body>
<html>

在 MyTab.aspx 中：

<html>
    <body>
        <form id="formTab" runat="server">
            <asp:ScriptManager ID="ScriptManagerTab" runat="server" EnablePartialRendering="true" />
            <asp:UpdatePanel runat="server" ChildrenAsTriggers="true" ID="UpdatePanelList" UpdateMode="Always">
                <ContentTemplate>
                    <asp:SqlDataSource ID="DSTab" 
                        runat="server"
                        DataSourceMode="DataSet"  
                        ConnectionString="XXX"
                        ProviderName="MySql.Data.MySqlClient" 
                        SelectCommand="XXX" 
                        >
                        <SelectParameters>
                            <asp:QueryStringParameter QueryStringField="type" Name="?type" />
                        </SelectParameters>
                    </asp:SqlDataSource>
                    <asp:GridView ID="GridViewTab" DataKeyNames="id" DataSourceID="DSTab" AutoGenerateColumns="false" runat="server" >
                        <Columns>
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <asp:HyperLink ID="HyperLinkTab" NavigateUrl='Item.aspx' runat="server"><%# Eval("title")%></asp:HyperLink>
                                    <asp:Button OnClick="AddItem" ID="ButtonAddItem" Text="Add" runat="server" /> 

                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                    <asp:Button OnClick="CreateNewItem" ID="ButtonCreateNewItem" Text="Create New" runat="server" /> 
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
</html>

【问题讨论】：

标签： asp.net jquery updatepanel tabs

【解决方案1】：

在更新面板之外创建您的标签。它会解决这个问题。

【讨论】：

【解决方案2】：

<script type="text/javascript">
$(function () {
    $("#tabs").tabs({
        cookie: {
            // store cookie for a day, without, it would be a session cookie
            expires: 1
        }
    });

});
function pageLoad(sender, args) {
    if (args.get_isPartialLoad()) {
        //Dialog Code
        $("#tabs").tabs({
            cookie: {
                // store cookie for a day, without, it would be a session cookie
                expires: 1
            }
        });


    }
}

【讨论】：