c# - 在 jquery ui 选项卡选择上执行 .net 回发

Question

我的 Web 表单上有一组使用 JQueryUI 选项卡的选项卡。

当我单击一个选项卡时，我希望加载该选项卡上的数据（仅当我单击该选项卡时）。因为我不想在初始页面加载时加载所有选项卡数据。

我在选项卡上使用了一个链接按钮，因此当我单击选项卡时，按钮单击事件应该触发并导致回发。但这不会发生。

我的问题是。JQueryUI选项卡插件是否禁用选项卡中链接的默认操作？我注意到，如果我不在 tab li 元素中使用某种锚链接，则无法正确呈现该选项卡，因此 JQuery 显然需要一个锚来呈现。

如何仅在选择选项卡时才加载数据？

Answer 1

http://jqueryui.com/tabs/#ajax

右侧菜单中通过 ajax 的内容

然后你可以做类似的事情

ajaxpostback.ashx?page=page1

然后你只返回预期的内容

代码示例

Javascript

<script type="text/javascript">
$(function () {
    $("#tabs").tabs();
});

HTML

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="Handler1.ashx?page=1">Tab 1</a></li>
    <li><a href="Handler1.ashx?page=2">Tab 2</a></li>
    <li><a href="Handler1.ashx?page=3">Tab 3 (slow)</a></li>
    <li><a href="Handler1.ashx?page=4">Tab 4 (broken)</a></li>
</ul>
<div id="tabs-1">
    <p>
       Nunc tristique tempus lectus.</p>
</div>

处理程序

    public void ProcessRequest(HttpContext context)
    {
        if (string.Compare(context.Request.QueryString["page"].ToString(), "1") == 0)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("1");
        }
        else if (string.Compare(context.Request.QueryString["page"].ToString(), "2") == 0)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("2");
        }
        else
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("rest");
        }
    }