Grid soll exakt vorgegebenes html erzeugen

29/07/2009 - 10:54 von Patrick Finger | Report spam
Hallo zusammen

Ich soll für einen Kunden neue Gui-Controls in asp.net erstellen.. Da es
zahlreiche gute Gui-Control-Suites gibt (telerik, coolite, etc) möchte
ich das natürlich nicht komplett selber machen.

Das Problem: Der Kunde stellt das Template als pures html zur Verfügung.
Das Stylesheet dazu wird von der CI/CD-Abteilung vom Kunden selber
verwaltet. Alle Applikationen (java, php, perl, etc) verwenden dieses
Stylesheet welches sie von einem zentralen Ort einbinden.

Somit sollten meine Gui-Controls exakt den html-Code erzeugen welchen
der Kunde vorgibt damit dessen Stylsheets auch greifen.

Dabei gibt es zahlreiche Probleme:
- Nicht auf allen html-Tags welche ein Control erzeugt kann ich das
class-Attribut beeinflussen
- Die Controls repràsentieren sich nicht in den html-Tags welche mein
Kunde vorgibt, das kann ich meines Wissens auch nicht beeinflussen.
- Eigene CustomControls erzeugen im Minimum ein weiteres div-Tag..

Ich wage fast zu behaupten, dass dieses Anforderung: "Exakt diesen
html-Code zu erzeugen" mit Asp.net Gui-Controls kaum möglich ist.
Lasse mich aber sehr gerne belehren..

Wie geht Ihr solche Probleme an?

Hier der Vorgabe-Code für ein Grid meines Kunden mit den zahlreichen divs:


<div class="block top">
<div class="table-title">
<h5>
Tabellentitel</h5>
<a href="#">
<img src="./images/assets/btn-collapse.gif"
id="myTable-toggle" alt="Collapse" /></a>
</div>


<div id="myTable" class="table-content">
<div class="table-header">
<div class="table-header-left">
<span class="table-total">Total Elemente
<strong>98</strong></span> <span class="table-pro-seite">
Anzahl Elemente pro Seite: <a href="#">5</a> |
<span class="selected">10</span>
| <a href="#">20</a> | <a href="#">50</a> | <a
href="#">Alle Elemente</a></span>
</div>
<div class="table-header-right">
<span><a href="#" class="icon_16px icon_199_pen"
alt="Edit"></a><a href="#" class="icon_16px icon_084_printer icon_last"
alt="Print"></a></span>
</div>
</div>
<table cellspacing="0" summary="Vorlagentabelle">
<thead>
<tr class="table-top">
<th class="table-column">
<a href="#">
<img
src="./images/assets/table-sort-asc.gif" alt="Sortierung absteigend" /></a>
</th>
<th class="table-column column-width-100">
<a href="#"><span>Name Name Name
Name</span><img src="./images/assets/table-sort-default.gif"
alt="Sortierung absteigend" /></a>
</th>
<th class="table-column column-width-100">
<a href="#"><span>Name</span><img
src="./images/assets/table-sort-default.gif" alt="Sortierung absteigend"
/></a>
</th>
<th class="table-column column-width-100">
<a href="#"><span>Name</span><img
src="./images/assets/table-sort-default.gif" alt="Sortierung absteigend"
/></a>
</th>
<th class="table-column column-width-100">
<a href="#"><span>Name</span><img
src="./images/assets/table-sort-default.gif" alt="Sortierung absteigend"
/></a>
</th>
<th class="table-right-ohne">
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-left">
<img
src="./images/assets/icons/16px/051_caution_04_cmyk.gif" width="16"
height="16"
alt="Bearbeiten" />
</td>
<td>
Eintrag 1
</td>
<td>
Eintrag 2
</td>
<td>
Eintrag 3
</td>
<td>
Eintrag 4
</td>
<td class="table-right-ohne">
</td>
</tr>
<tr onmouseover="hoverRow(this,true);"
onmouseout="hoverRow(this,false);">
<td class="table-left">
<img
src="./images/assets/icons/16px/051_caution_04_cmyk.gif" width="16"
height="16"
alt="Bearbeiten" />
</td>
<td>
<a href="#">Eintrag 1</a>
</td>
<td>
<a href="#">Eintrag 2</a>
</td>
<td>
<a href="#">Eintrag 3</a>
</td>
<td>
<a href="#">Eintrag 4</a>
</td>
<td class="table-right"
onmouseover="this.className='table-right-over';"
onmouseout="this.className='table-right';">
<div class="table-menu">
<div class="table-menu-popup">
<ul>
<li class="pen"><a
href="#">Bearbeiten</a></li>
<li class="document"><a
href="#">Neue Referenz</a></li>
<li class="last cancel"><a
href="#">Löschen</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr onmouseover="hoverRow(this,true);"
onmouseout="hoverRow(this,false);">
<td class="table-left">
<img
src="./images/assets/icons/16px/051_caution_04_cmyk.gif" width="16"
height="16"
alt="Bearbeiten" />
</td>
<td>
<a href="#">Eintrag 1</a>
</td>
<td>
<a href="#">Eintrag 2</a>
</td>
<td>
<a href="#">Eintrag 3</a>
</td>
<td>
<a href="#">Eintrag 4</a>
</td>
<td class="table-right"
onmouseover="this.className='table-right-over';"
onmouseout="this.className='table-right';">
<div class="table-menu">
<div class="table-menu-popup">
<ul>
<li class="pen"><a
href="#">Bearbeiten</a></li>
<li class="document"><a
href="#">Neue Referenz</a></li>
<li class="cancel last"><a
href="#">Löschen</a></li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="table-footer">
<form action="">
<div class="table-von-bis">
Seite 1 von 7</div>
<div class="table-paging">
<a href="#">1</a> <a href="#">&lt;&lt;</a>
<input type="text" value="4" class="table-input" />
<a href="#">>></a> <a href="#">10</a></div>
</form>
</div>
</div>
</div>
 

Lesen sie die antworten

#1 Thomas Bandt
29/07/2009 - 11:49 | Warnen spam
Patrick Finger schrieb:
Ich wage fast zu behaupten, dass dieses Anforderung: "Exakt diesen
html-Code zu erzeugen" mit Asp.net Gui-Controls kaum möglich ist.
Lasse mich aber sehr gerne belehren..



Wenn du auf Standard-Komponenten zurückgreifst, kannst du
das vergessen.

Wie geht Ihr solche Probleme an?



Die Controls selbst entwickeln. Mit ListView oder Repeater
kannst du den Output selbst bestimmen.

Wenn du die IDs usw. noch steuern willst, die gerendert werden,
wirst du aber um ASP.NET 4.0 (WebForms) bzw. ASP.NET MVC nicht
herumkommen.

Gruß, Thomas [MVP ASP/ASP.NET]
http://www.69grad.de - Die ASP.NET-Profis aus Nürnberg
http://blog.thomasbandt.de - Privates Blog

Ähnliche fragen