使用 AJAX 将 ASPX 页面加载到 jQuery UI 选项卡中答案

【问题标题】：loading an ASPX page into a jQuery UI Tab with AJAX使用 AJAX 将 ASPX 页面加载到 jQuery UI 选项卡中
【发布时间】：2012-03-15 20:58:45
【问题描述】：

我对 jquery 和常规 html 页面有一些经验，但才刚刚开始学习 .net。我到处搜索，但找不到一个很好的教程或示例，说明如何使用 ajax 将 aspx 页面加载到 jquery ui 选项卡中。我有一个 Main.aspx 页面，其中有一些用于导航的 jquery ui 选项卡。我想用 ajax 加载每个选项卡的内容。我曾尝试使用 jquery ui 选项卡的Ajax mode，但似乎当 aspx 页面包含某些 Web 控件时，它由于某种原因无法加载。我要加载到选项卡中的 aspx 文件只有一个按钮控件，单击该按钮控件时，会将其文本更改为“你好”。

这是 Main.aspx 的选项卡部分：

<div id="tabs">
    <ul>
        <li><a href="test.aspx"><span>Test</span></a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
   </ul>
   <div id="tabs-2">Second Tab</div>
   <div id="tabs-3">Third Tab</div>
</div>

这里是 test.aspx 代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" 
    Inherits="TropicalServerGUI.test" %>
<div>
    <asp:button ID="btn" runat="server" text="Button" />
</div>

及其代码隐藏：

namespace TropicalServerGUI {
    public partial class test : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void btn_Click(object sender, EventArgs e) {
            //btn.Text = "hello";
        }
    }
}

静态的第二个和第三个选项卡工作正常，但没有任何内容加载到第一个选项卡中。例如，如果我要删除按钮控件并放置<h1>Hello World</h1>，那么它会正确加载页面。我知道我做错了什么，我找不到任何解决这个话题的网站，所以任何帮助都将不胜感激！

【问题讨论】：

您的代码可以在我的机器上运行。你的test.aspx 只需要完整的 html 结构。

标签： asp.net ajax jquery-ui tabs

【解决方案1】：

您是否正在初始化 JQueryUI 选项卡？

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

【讨论】：

是的，我初始化了标签。我的问题是带有静态内容的两个选项卡看起来不错，但加载 aspx 文件的选项卡是空的。