ASP.net - Incertain sur la façon de générer la table

Question

Étant donné le code HTML suivant:

<asp:content id="Content1" contentplaceholderid="mainContent" runat="server"> 

<div class="scrollRow"> 
    <table width="100%"> 
     <tr> 
      <td width="25%">Site name: <b>My site</b></td> 
      <td>Created on 12th Aug 2010</td> 
      <td align="right"><button onclick="doRevert(1)">Revert to this</button></td> 
     </tr> 
    </table> 
</div> 

<div class="scrollRow"> 
    <table width="100%"> 
     <tr> 
      <td width="25%">Site name: <b>Another site</b></td> 
      <td>Created on 3rd Aug 2010</td> 
      <td align="right"><button onclick="doRevert(1)">Revert to this</button></td> 
     </tr> 
    </table> 
</div> 

<div class="scrollRow scrollRowOn"> 
    <table width="100%"> 
     <tr> 
      <td width="25%">Site name: <b>Another site</b></td> 
      <td>Created on 3rd Aug 2010</td> 
      <td align="right"></td> 
     </tr> 
    </table> 
</div> 

</asp:content> 

Ce qui est une liste de lignes, comment suis-je voulais dire pour générer ces programatically après avoir récupéré les lignes SQL à partir du code derrière? Ai-je besoin de faire mon propre contrôle, ou quelque chose du genre?

Answer 1

Essayez quelque chose le long de ces lignes:

<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_OnItemDataBound"> 
    <ItemTemplate> 
     <div class='<%# SetClass(Eval("SiteId")) %>'> 
      <table width="100%"> 
       <tr> 
        <td width="25%">Site name: <b><%# Eval("SiteName") %></b></td> 
        <td>Created on <%# DataBinder.Eval(Container.DataItem, "CreateDate", "{0:dd MMM yyyy}")%></td> 
        <td align="right"><button id="btnRevert" runat="server" onclick="doRevert(1)">Revert to this</button></td> 
      </tr> 
      </table> 
      </div> 
     </ItemTemplate> 
    </asp:Repeater> 

En cas de Repeater1_OnItemDataBound codebehind vous pouvez définir le bouton pour être visible ou non, selon que l'élément est l'actuel.

protected void Repeater1_OnItemDataBound(object sender, RepeaterItemEventArgs e) 
    { 
     RepeaterItem item = e.Item; 
     if (item.ItemType == ListItemType.AlternatingItem || item.ItemType == ListItemType.Item) 
     { 
      Site site = e.Item.DataItem as Site; //List<Site> is what you are binding to the repeater 
      if (site.SiteId == currentSiteId) 
      { 
       var btn = e.Item.FindControl("btnRevert") as Button; 
       if (btn != null) 
       { 
        btn.Visible = false; 
       } 
      } 
     } 
    } 

classes CSS pour vos articles peuvent être configurés comme ceci:

protected string SetClass(object obj) { 
     int siteId; 
     if (int.TryParse(obj.ToString(), out siteId)){ 
      if (siteId == currentSiteId) //currentSiteId determined elsewhere 
      { 
       return "scrollRow"; 
      } 
     } 
     return "scrollRow scrollRowOn"; 
    } 

Answer 2

Je suggère le contrôle du répéteur. Vous pouvez l'utiliser quelque chose comme ceci:

<asp:Repeater runat="server" id="myRepeater"> 
<ItemTemplate> 
<div class="scrollRow scrollRowOn"> 
    <table width="100%"> 
     <tr> 
      <td width="25%">Site name: <b><% Eval("SiteName")%></b></td> 
      <td>Created on <% Eval("CreatedOn")%></td> 
      <td align="right"></td> 
     </tr> 
    </table> 
</div> 
</ItemTemplate> 
</asp:Repeater> 

Ensuite, vous devez lier vos données dans l'événement Page_Load:

myRepeater.DataSource = myData; 
myRepeater.DataBind(); 

Lorsque mes données sont les données que vous extraire de la base de données.

Answer 3

Il y a beaucoup de façons d'arriver à cela, bien sûr, mais voici un (peut-être pas le meilleur, mais c'est subjectif de toute façon):

En supposant C# des formulaires Web et ADO.Net, et en supposant que vous avez besoin exactement que html, vous pouvez boucle sur les lignes dans le DataSet et la sortie du code HTML.

DataSet ds = {data set from your sql} 
StringBuilder html = new StringBuilder(); 
foreach (DataRow row in DataSet.Tables[0].Rows) { 
    html.Append(string.Format(@"<div class=""scrollRow""> 
    <table width=""100%""> 
     <tr> 
      <td width=""25%"">Site name: <b>{0}</b></td> 
      <td>Created on {1}</td> 
      <td align="right"><button onclick="doRevert(1)">Revert to this</button></td> 
     </tr> 
    </table>",row["sitename"], row["createdate"])); 
} 

Vous pouvez inclure le code HTML en ayant un <asp:Literal> dans le code de la page et définir la propriété Text.

Vous pouvez également le faire en créant des noeuds System.Web.UI.WebControls.Table dans le code et en leur ajoutant TableRows et TableCells, en utilisant la même boucle, puis en les ajoutant à la page en utilisant. Compte tenu de ce que vous nous avez donné jusqu'à présent, vous semblez ajouter des contrôles à une page avec une page MasterPage, vous devrez donc ajouter vos tables au ContentPlaceHolder du Master, que vous pouvez trouver et ajouter comme contrôles:

ContentPlaceHolder ph = (ContentPlaceHolder)this.Master.FindControl("ContentPlaceHolder1"); 

    foreach (DataRow row in DataSet.Tables[0].Rows) { 
     Panel pnl = new Panel(); 
     Table tbl = new Table(); 
     TableRow tblrow = new TableRow(); 
     TableCell cell1 = new TableCell(); 
     cell1.Text = string.Format("Site name: <b>{0}</b>",row["sitename"]); 
     row.Cells.Add(cell1); 
     tbl.Rows.Add(tblrow); 
     pnl.Controls.Add(tbl); 
     ph.Controls.Add(pnl); 
    } 

Vous pouvez définir des propriétés sur les TableRows et les TableCells, mais si vous le faites de cette façon, vous perdrez un peu de contrôle sur le code html généré, notamment les attributs d'ID html. Vous ne semblez pas les utiliser, alors peut-être que c'est ok.