如何改變在asp.net形式動態

Question

在Web表單的設計的div的位置我有四個div的

• divGeneralDetails
• divLanguageDetails
• divLinkDetails
• divOperationalDetails

上面提到的div在表單中垂直顯示。

我的問題是。 根據查詢字符串中的值，我將不得不改變顯示div的順序。

在我Page_Load事件

string FirstDiv = Request.QueryString["id"]; 

如果FirstDiv的值等於 「常規」

then order should be 
    - divGeneralDetails  
    - divLanguageDetails  
    - divLinkDetails 
    - divOperationalDetails 

如果FirstDiv值等於 「操作」

then order should be 
- divOperationalDetails 
- divGeneralDetails  
- divLanguageDetails  
- divLinkDetails  

如何我是否在Page_Load事件中設置了此項。任何幫助將不勝感激。 感謝

Answer 1

您可以使用面板。

例子：

<asp:Panel ID="panelMain" runat="server"> 
    <asp:Panel ID="divGeneralDetails" runat="server"></asp:Panel> 
    <asp:Panel ID="divLanguageDetails" runat="server"></asp:Panel> 
    <asp:Panel ID="divLinkDetails" runat="server"></asp:Panel> 
    <asp:Panel ID="divOperationalDetails" runat="server"></asp:Panel> 
</asp:Panel> 

然後重新將其添加後臺代碼：

panelMain.Controls.Clear(); 
panelMain.Controls.Add(divOperationalDetails); 
panelMain.Controls.Add(divGeneralDetails); 
panelMain.Controls.Add(divLanguageDetails); 
panelMain.Controls.Add(divLinkDetails); 

Answer 2

如果你想這樣做的服務器端，然後ViewState中的良好的工作（如果正在使用它）的div必須在PreInit事件的使用Page.Controls.Add()所需的順序添加頁。任何後來可能會拋出ViewState。

完全不同的辦法是使用jQuery在瀏覽器中操作的div，見下面的一種方式實現這一目標的片段：

function moveOperationalToTop() { 
 
    var specialId = "divOperationalDetails"; 
 
    var $main = $("#divMain"); 
 
    var $divs = $main.find('div'); 
 
    $main.empty(); 
 
    $divs.each(function() { 
 
    if (this.id == specialId) $main.append($(this)); 
 
    }); 
 
    $divs.each(function() { 
 
    if (this.id != specialId) $main.append($(this)); 
 
    }); 
 
}

#divOperationalDetails { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divMain"> 
 
    <div id="divGeneralDetails">divGeneralDetails</div> 
 
    <div id="divLanguageDetails">divLanguageDetails</div> 
 
    <div id="divLinkDetails">divLinkDetails</div> 
 
    <div id="divOperationalDetails">divOperationalDetails</div> 
 
</div> 
 
<button onclick="moveOperationalToTop()">Move Operational to top</button>