c# - 根据代码隐藏状态选择不同的 jquery-ui 选项卡

Question

我正在制作一个 Web 应用程序，使用 ASP.NET、C# 和 jQuery 以及 4 个选项卡，第三个选项卡上有一个表单供用户填写。但是，每当用户提交表单数据时，它都会返回到第一个选项卡，我希望它转到第二个选项卡，或者留在第三个选项卡上，具体取决于用户在表单中输入的内容。不过到目前为止，我能让它起作用的唯一方法是使用 Response.redirect() 重新加载带有适当 anchor 标记(#tab-2 或 #tab-3)的页面，这将使页面显示正确的标记。但是，这样做会丢失表单中提交的所有数据，因此我还需要将所有表单数据放入查询字符串中，这似乎是个糟糕的主意。

理想情况下，我想做的是将页面加载到正确的选项卡。

所以我目前有这个函数，它在用户单击按钮后被调用(我认为它在服务器加载页面时被调用):

public virtual void editClicked (object sender, EventArgs args)
{
    // Get the data
    string primaryUser = Request.Form.Get (CompPrimUser.UniqueID);
    string computerName = Request.Form.Get (compCompName.UniqueID);

    // Data verification
    if (computerName == "") {
        // Bad data, reload third tab with user's entered data
        // and inform them they need to fix it.
        compeditId.Value = POSTED;
        return;
    }

    // Store the Data, display second tab
}

compeditId 是一个隐藏字段，在该页面的 Page_Load() 调用中，将根据发布的数据而不是空字段(或来自 mysql 数据库)正确填写表单.

我想过调用 Server.Transfer() 作为加载带有正确 anchor 标记的页面的方法，但它只使用 .aspx 文件，忽略任何剩余的查询字符串。

最后，我直接使用来自 jquery 网站的剪辑将查询字符串转换为正确的选项卡，即:

<script type="text/javascript">
    $(function () {
        $("a, intput:submit", ".toplevelnav").button();
        $("a", ".toplevelnav").click(function () { return true; });
    });
    $(function () { $("#accordion").accordion({ header: "h3" }); });
    $(function() { $( "#tabs" ).tabs(); });
</script>

并在 html 中列出实际的选项卡:

<div id="tabs" style=" font-size:14px;">
    <ul>
        <li><a href="#tabs-1">Clients Overview</a></li>
        <li><a href="#tabs-2">Client Detail</a></li>
        <li><a href="#tabs-3">Computers</a></li>
        <li><a href="#tabs-4">Settings</a></li>

    </ul>
    <div id="tabs-1">
        <cab:ClientList ID="clientList" runat="server" />
    </div>

    <div id="tabs-2">
        <cab:ClientDetail ID="clientDetail" runat="server" />
    </div>

    <div id="tabs-3">
        <cab:Computers ID="computers" runat="server" />    
    </div>

    <div id="tabs-4">

    </div>

</div>

那么有没有人知道如何让服务器发送默认选择的选项卡而不是基于查询字符串的选项卡？或者至少让服务器在不丢失表单中发布的数据的情况下更改查询字符串？

谢谢。

编辑:我还尝试使用 html 表单的 action 属性标记告诉它提交到带有 #tab-3 anchor 的 aspx 文件。但是，服务器忽略了这一点。此外，这样做的问题是，在数据发送到服务器之前，我们不知道是否需要第二个或第三个选项卡。

Answer 1

提交表单后，您可以使用$("#tabs").tabs("select",2)来选择第三个标签。

如果您使用的是 jQuery UI 1.9+，则必须使用 active 属性:

$("#tabs").tabs({ active:2 });