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

本文关键字：jquery ui 选项 代码 隐藏 状态 选择 | 更新日期: 2023-09-27 18:19:38

我正在制作一个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文件。但是，服务器会忽略这一点。此外，问题是，在数据发送到服务器之前，我们不知道是想要第二个选项卡还是第三个选项卡。

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

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

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

$("#tabs").tabs({ active: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...
}

然后，为了将该信息中继到客户端，您可以注册一个脚本：

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
    });
});

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

就我个人而言，我会做这样的事情。

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

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

然后，您可以通过actionlink通过单击返回模型。

@Html.RenderAction（"RenderWhateverTab1"，"WhateverController"，型号）；

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

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

以下内容对我有效。

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);
}

如果div标签中有class，则可以使用以下命令直接激活选项卡：

$("#tab_1").addClass("active");
相关文章：