Dynamiske hjemmeside med Html Server Controls Og Web User Controls 1. del


23 May 2002 @ 15:39

Vi skal i denne artikel se på hvordan med med hjælp af Html Server Controls, og User Controls f.eks. kan lave en template eller skabelon til en hjemmeside.


Vi skal i denne artikel se på hvordan med med hjælp af Html Server Controls, og User Controls f.eks.  kan lave en template eller skabelon til en hjemmeside. Metoden er den samme som bruges til denne hjemmeside (Codebehind.dk).

Alt indholdet i Codebehind.dk bliver præsenteret udfra den samme side (default.aspx) Rammerne for siden er en "Header Tabel",  en "Content Tabel" og en "Footer Tabel".

TD elementerne i Content Tabellen er lavet om til en Html Server Controls. Det gør man ved at indsætte runat og id attributterne i en almindelig html <td> kode som vi skal se i det første eksempel 1.  <td id="LeftCell" runat="server"> . Med disse to attributter er td koden gjort programmerbar. Og nu kan du ændre på dens egenskaber, f.eks baggrundsfarve eller størrelse. Du kan også tilføje andre kontroller - Web User Controls eller Web Server Controls med Add funktionen som vi skal se i mere til i Eksempel 2.

For at tilføje eksempel 1.  lidt dynamik.har jeg tilføjet en button som er knyttet til en funktion der ændre på tabellens BgColor og Border. Den højre celle er gjort inaktiv med Visible = false ;

Eksempel 1.  Controls1.aspx         

<% @Page Language="C#"  %>
<script language="C#" runat="server">
 void Page_Load(Object Src, EventArgs E ) {
  Table1.Border = 1;
  RightCell.Visible = true;
  Table1.BgColor = "";
  if(!Page.IsPostBack) {
   Table1.Width = "600";
   Table1.Height = "400";
  }
 }
 
 void Button1_Click(Object Sender, EventArgs e) {
  
   Table1.Border = 10;
   Table1.BgColor = "C3C3C3";
   RightCell.Visible = false;
 }
</script>
<HTML>
 <HEAD>
  <title>Controls</title>
 </HEAD>
 <body id="MyBody" runat="server">
 <form id="Controls" method="post" runat="server">
  <h1>HTML Server Controls<BR>
  </h1>
  <table id="Table1" runat="server">
  <tr>
    <td id="LeftCell" runat="server">
      Venstre Celle
    </td>
    <td id="RightCell" runat="server">
      Højre Celle
   </td>
  </tr>
  </table>
 <asp:Button id="Button1" runat="server" 

            Text="Button" OnClick="Button1_Click" />
  </form>
 </body>
</HTML>

 

Du kan naturligvis også tilføje celler i tabellen som vist her

void Button2_Click(Object Sender, EventArgs e) {
  
 HtmlTableRow row = new HtmlTableRow();
 HtmlTableCell cell = new HtmlTableCell();
 

         cell.Controls.Add(new LiteralControl("Venstre"));

         cell2.Controls.Add(new LiteralControl("Højre")); 
 

         row.Cells.Add(cell);

         row.Cells.Add(cell2); 
 

         HtmlTableCell cell2 = new HtmlTableCell();
   

         Table1.Controls.Add(row);
}

Først oprettes et HtmlTableRow objekt, dernæst 2 HtmlTableCell objekter som så knyttes til deres parent control med Add funktionen.

I næste del vil se på hvordan man tilføjer User Controls  til Tabellen og dermed hvordan metoden med HTML Server Controls kan blive særdeles brugbar til at opbygge et site dynamisk og objektorienteret.

Prøv iøvrigt at tænke på hvor meget kode du ville skulle have skrevet hvis du havde skrevet dette eksempel i ASP eller PHP med den samme dynamik og fleksibilitet. Det kan godt være at indlæringskurven for ASP.NET er stejl i begyndelsen. Men når først du er kommer over begynder vanskelighederne vil du bliv mange gange mere produktiv som web udvikler. Så der er ikke rigtigt nogle gode undskyldninger for at vente med at komme igang NU.

2 Del



Valid XHTML 1.0!