Question

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

所以我在MyTab.aspx中添加了一个updatepanel。现在问题是Default.aspx上的所有链接都被破坏了，它只是在点击时打开整个窗口中的选定选项卡。很奇怪，但我读过有时候让updatepanel与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>

Answer 1

在更新面板外设置标签。它将解决问题。

Answer 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
            }
        });


    }
}

asp.net jquery选项卡和updatepanels

2 个答案: