根據狀態代碼選擇不同的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");