使用UpdatePanel動態刷新HTML表格中的行

Question

最近我一直在使用ASP.NET AJAX UpdatePanel控件來處理一些我一直在使用的Intranet應用程序，並且大多數情況下我一直在使用它動態刷新數據或根據用戶的操作隱藏和顯示錶單上的控件。

有一個地方，我一直有一點麻煩，我想知道如果任何人有任何意見。我的表單使用了一個非常典型的基於表格的佈局，其中表格用於顯示用戶填寫的標籤和字段的網格。 （我已經知道基於表格的佈局被某些人所避開，我瞭解它的優點和缺點，但這是我做出的選擇，所以請不要回答「不要使用基於表格的佈局」。）

現在我的問題是，有些時候我會像圍繞一組行來包裝UpdatePanel，以便我可以隱藏和動態顯示它們，但UpdatePanel並不真的讓你這樣做。基本的問題是，它圍繞着他們包裹一個div，據我所知，你不能在表格行中包裝div。這不是有效的HTML。

所以我一直在處理它的方式是將我的動態行全部作爲整個新表的一部分，這是可以的，但是您必須處理將所有列手動對齊到上面的表，那是一種真正的痛苦，非常脆弱。

所以，問題是...有誰知道任何使用UpdatePanel或類似的東西動態生成或刷新行的技術？希望這個解決方案與在頁面上放置一個UpdatePanel幾乎一樣簡單，但即使不是，我仍然希望聽到它。

Answer 1

答：最後，有沒有辦法做到這一點使用一個UpdatePanel。您可以實現的最好效果是刷新整個表格，但不是單個行。

Answer 2

UpdatePanel呈現爲DIV標記，因此在表格行之間無效。如果你想要的是隱藏的內容，同時保持你的（非常非常壞的）表佈局，包括與在那裏的ASP VAR的知名度值這樣的行中的風格標籤：

<tr style="display: <%= visible %>"> 
    <td></td> 
</tr> 

然後你操縱根據需要顯示可見變量。

這就是說，撇開適當的佈局在這裏傷害你。

Answer 3

如果您正在動態創建控件，則可以在生成控件時決定顯示或隱藏哪些內容。

你也可以做這樣的事情：

<table> 
    <tr id="row1" runat="server"> 
     <td>Label</td><td>Field</td> 
    </tr> 
</table> 

而從後面的代碼：

row1.visible = false; 

@Rob艾倫的回答的修改，這樣做：

CSS

.hidden_row { 
    display: none; 
} 

ASP X

<tr class="<%= variable %>"> 

相同的想法，只是使用一個類，而不是直接將CSS編碼到表中。

Answer 4

不應該使用UpdatePanels（或通常的AJAX回發）來隱藏或顯示元素。如果您需要更新數據，那是一回事......但除此之外，只需使用javascript來更改顯示CSS屬性。

如果你使用像jQuery的客戶端框架，這使得它更容易 - 你可以做這樣的事情：

<button onclick="$('.inactive').toggle();">Toogle Inactive</button> 

<table> 
<tr class="inactive"><td>Inactive 1</td></tr> 
<tr class="inactive"><td>Inactive 2</td></tr> 
<tr><td>Active 1</td></tr> 
<tr><td>Active 2</td></tr> 
</table> 

Answer 5

在我們的項目中，我們發現了這個問題的一些解決方案。我們必須在每一行中創建包含許多活動元素的複雜遊戲（用於編輯，接受等的按鈕）。

我們創建了放置在updatepanel中的div（用於在需要時更新整個表）。在這個div中，我們創建了包含頭部定義的表格，併爲每個行創建了單獨的表格（這些表格放置在更新面板中）。爲了在每行中創建相等的列，我們必須爲每個表格單元格使用css類。

因此，我們有這樣的事情（每行中，我們有幾個按鈕，下拉菜單，工具提示等，但要了解的想法，我已經將其截斷爲單柱）：

<UpdatePanel> 
<DIV> 
    <TABLE> 
    <TR> 
    <TH class="h1">Name</TH> 
    </TR> 
    </TABLE> 

    <UpdatePanel Id='InnerPanel1'> 
     <TABLE> 
     <TR> 
     <TD class="h1">John</TD> 
     </TR> 
     </TABLE> 
    </UpdatePanel> 
</DIV> 
</UpdatePanel> 

這是不優雅和生成大型HTML，但工程。

Answer 6

我有同樣的問題，我遇到了一個解決方案。

如果整個表本身也在UpdatePanel中，您可以更新表的TD部分！

不知道爲什麼。這個對我有用。

<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate> <table ID="Table1"> 
<tr> 
<td > 
... 
</td> 
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
<td > 
.... 
</td> 
<td > 
... 
</td> 
<td > 
... 
</td> 
</ContentTemplate> 
</asp:UpdatePanel> 

</tr> 

</table></ContentTemplate></asp:UpdatePanel> 

Answer 7

asp代碼：

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<table width="100%"> 
    <tr> 
     <td style="width: 300px"> 
      Employee First Name 
     </td> 
     <td> 
      <asp:TextBox ID="txtFname" runat="server"></asp:TextBox> 
     </td> 
    </tr> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <tbody> 
       <tr> 
        <td style="width: 300px"> 
         Date Of Birth 
        </td> 
        <td> 
         <asp:TextBox ID="txtDOB1" runat="server" OnTextChanged="txtDOB_TextChanged" AutoPostBack="true"></asp:TextBox> 
         <asp:CalendarExtender ID="txtDOB1_CalendarExtender" runat="server" Enabled="True" 
          TargetControlID="txtDOB1"> 
         </asp:CalendarExtender> 
        </td> 
       </tr> 
       <tr> 
        <td style="width: 300px"> 
         Age 
        </td> 
        <td> 
         <asp:TextBox ID="txtAge" Style="font-weight: bold; font-size: large" runat="server" 
          Enabled="false"></asp:TextBox> 
        </td> 
       </tr> 
      </tbody> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
    <tr> 
     <td align="right" style="width: 300px"> 
      <asp:Button ID="btnSubmit" runat="server" CssClass="button" Text="Submit" /> 
     </td> 
     <td> 
      <asp:Button ID="btnClear" runat="server" CssClass="button" Text="Reset" /> 
     </td> 
    </tr> 
</table> 

類代碼：

protected void txtDOB_TextChanged(object sender, EventArgs e) 
{ 
    try 
    { 
     DateTime Today = DateTime.Now; 
     DateTime DOB = Convert.ToDateTime(txtDOB1.Text); 
     ArrayList arr = new ArrayList(); 
     arr = span(Today, DOB); 
     arr[0].ToString();//For Years 
     arr[1].ToString();//For Months 
     arr[2].ToString();//For Days 
     txtAge.Text = "Y: " + arr[0].ToString()+",M: "+arr[1].ToString()+",D: "+arr[2].ToString(); 

    } 
    catch (Exception ex) 
    { 

     lblError.Text = "Error : " + ex.Message ; 
    } 
} 
public ArrayList span(DateTime f, DateTime l) 
{ 
    int days; 
    int months; 
    int years; 

    int fird = f.Day; 
    int lasd = l.Day; 

    int firm = f.Month; 
    int lasm = l.Month; 

    if (fird >= lasd) 
    { 
     days = fird - lasd; 
     if (firm >= lasm) 
     { 
      months = firm - lasm; 
      years = f.Year - l.Year; 
     } 
     else 
     { 
      months = (firm + 12) - lasm; 
      years = f.AddYears(-1).Year - l.Year; 
     } 
    } 
    else 
    { 
     days = (fird + 30) - lasd; 
     if ((firm - 1) >= lasm) 
     { 
      months = (firm - 1) - lasm; 
      years = f.Year - l.Year; 
     } 
     else 
     { 
      months = (firm - 1 + 12) - lasm; 
      years = f.AddYears(-1).Year - l.Year; 
     } 
    } 


    if (days < 0) 
    { 
     days = 0 - days; 
    } 
    if (months < 0) 
    { 
     months = 0 - months; 
    } 
    ArrayList ar = new ArrayList(); 
    ar.Add(years.ToString()); 
    ar.Add(months.ToString()); 
    ar.Add(days.ToString()); 
    return ar; 
}