Question

我正在制作一个webapp，使用带有4个选项卡的ASP.NET，C＃和jQuery，以及第三个选项卡上的表单供用户填写。但是，每当用户提交表单数据时，它都会返回到第一个选项卡，我希望它转到第二个选项卡，或者保留在第三个选项卡上，具体取决于用户放入表单的内容。到目前为止，我能让这个工作的唯一方法是使用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

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

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

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

5 个答案: