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

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表单的动作属性标记来告诉它提交到一个aspx文件与#tab-3锚点。但是，服务器会忽略这一点。另外，这个问题是我们不知道我们是否想要第二个或第三个选项卡，直到数据被发送到服务器。

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

你可以处理这几个d如前面的答案所示，可以使用会话，查询字符串或使用模型（查询字符串，只是更少的代码）来传递值。

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

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

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

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

@ Html.RenderAction（“RenderWhateverTab1”，“WhateverController”，model）;

如果后方链接需要位于不同的（汇总样式）页面上，则可以在摘要页面的模型上设置BackLinkUrl属性，并在每个Tab控制器调用中将BackLinkUrl设置为@Url。 Action（（“RenderWhateverTab1”，“WhateverController”，model）;

这允许每个标签页都被调用，它需要所有数据（粘性表单），并且标签状态的呈现可以被设置为之前的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");