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

时间:2012-03-15 20:58:46

标签: asp.net ajax jquery-ui tabs

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

以下是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>,那么它会正确加载页面。我知道我做的事情完全错了,我找不到任何解决这个问题的网站,所以对此的任何帮助都将不胜感激!

1 个答案:

答案 0 :(得分:0)

您是否正在初始化JQueryUI标签?

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