загрузка страницы ASPX во вкладку пользовательского интерфейса jQuery с помощью AJAX

Question

У меня есть некоторый опыт работы с jquery и обычными html-страницами, но я только начал изучать .net. Я искал везде, и я не могу найти хороший учебник или пример того, как загрузить страницы aspx во вкладки jquery ui с помощью ajax. У меня есть страница Main.aspx, на которой есть несколько вкладок jquery ui для навигации. Я хотел бы загрузить содержимое для каждой вкладки с помощью AJAX. Я пытался использовать Ajax mode вкладок jquery ui, но похоже, что когда страница aspx содержит определенные веб-элементы управления, она по какой-то причине не загружается. Файл 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>, то он загрузил бы страницу правильно. Я знаю, что делаю что-то совершенно не так и не могу найти ни одного сайта, посвященного этой теме, поэтому любая помощь с этим будет принята с благодарностью!

Answer 1

Вы инициализируете вкладки JQueryUI?

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