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

发布于 2024-08-14 05:59:48 字数 3262 浏览 1 评论 0原文

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

所以我在 MyTab.aspx 中添加了一个 updatepanel。现在的问题是 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>

原文

I'm using asp.net together with jquery. In Default.aspx I have implemented some jquery-tabs that load their data with ajax call. They load another asp.net page MyTab.aspx. My problem is that when I navigate in the tab (MyTab.aspx) it always reloads the full page (whole Default.aspx) but I only want it to reload inside the tab. For example when adding an item I just want the tab to reload.

So I added a updatepanel inside MyTab.aspx. The problem is now instead that all links on Default.aspx is broken, it just open the selected tab in the whole window when clicking. Very strange, but I've read that sometimes it can be messy to get updatepanels to work with jquery.

You can see my code below, is there anything I can do different to get it working?

In 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>

In 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>

分享到QQ

分享到微博

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

发布评论

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

因为看清所以看轻 2024-08-21 05:59:48

将选项卡置于更新面板之外。它会解决这个问题。

回复收藏 0 原文

纵性 2024-08-21 05:59:48

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


    }
}

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


    }
}

回复收藏 0 原文

~没有更多了~