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

Question

我正在制作一个 web 应用程序，使用 ASP.NET、C# 和 jQuery，带有 4 个选项卡，第三个选项卡上有一个表单供用户填写。但是，每当用户提交表单数据时，它都会返回到第一个选项卡，我希望它转到第二个选项卡或停留在第三个选项卡上，具体取决于用户在表单中输入的内容。到目前为止，我可以让它工作的唯一方法是使用Response.redirect() 使用正确的锚标记（#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() 来加载具有正确锚标记的页面，但它只使用 .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 锚点的 aspx 文件。但是，服务器忽略了这一点。此外，这样做的问题是，在数据发送到服务器之前，我们不知道是否需要第二个或第三个选项卡。

Answer 1

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

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

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

Answer 2

由于您的服务器显然从表单的action 属性中剥离了片段，因此您必须将所选选项卡视为应在服务器上维护并传输到客户端的状态。

服务器端，您可以跟踪要选择的选项卡：

private int _tabToSelect = 0;  // Default to first tab.

public virtual void editClicked(object sender, EventArgs e)
{
    // 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.
        _tabToSelect = 2;
        compeditId.Value = POSTED;
        return;
    }

    // Display second tab.
    _tabToSelect = 1;

    // Store the data...
}

然后，将该信息传递给客户端，您可以register a script：

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    Page.ClientScript.RegisterStartupScript(typeof(ThisClass),
        "TabToSelect", String.Format(CultureInfo.InvariantCulture,
            "var _Page_tabToSelect = {0};", _tabToSelect), true);
}

从那里，您只需选择正确的标签客户端：

$(function() {
    $("#tabs").tabs({
        selected: _Page_tabToSelect
    });
});

Answer 3

您可以通过几种不同的方式来处理此问题，如先前的答案所示，您可以使用会话、查询字符串或使用模型（查询字符串，只需更少的代码）来传递值。

我个人会做这样的事情。

您需要为每个表单选项卡设置单独的控制器操作。 例如，您将拥有 ActionResult RenderWhateverTab1（WhateverModel 模型）。

JQ 选项卡支持使用 RenderAction 或 RenderPartial 作为链接的内容。

然后，您可以通过 actionlink 将模型传回。

@Html.RenderAction("RenderWhateverTab1", "WhateverController", 模型);

如果返回链接需要在不同的（摘要样式）页面上，那么您可以在模型上为摘要页面设置 BackLinkUrl 属性，并在每个选项卡控制器调用中将 BackLinkUrl 设置为 @Url.Action (("RenderWhateverTab1", "WhateverController", 模型);

这允许使用它需要的所有数据（粘性表单）调用每个选项卡，并且可以将选项卡状态的呈现设置为每个单独的选项卡调用的前一个 url。

Answer 4

以下内容对我有用。

if (allIsGood)
{
    do this and that
}
else
{
    //keep user on 3rd tab (note: change CurrClass to your codebehind class name)
    base.OnPreRender(e);
    Page.ClientScript.RegisterStartupScript(typeof(CurrClass),
    "TabToSelect", "$('#tabs').tabs({ selected: 2 })", true);
}

Answer 5

如果您在div 标签中有class，您可以使用以下方法直接激活标签：

$("#tab_1").addClass("active");