C#, welke class voor deze indeling

[Stefke]

Voor een C#-cursus moet ik een webpagina maken. Deze pagina geeft een aantal producten weer (bijv. telefoon), en van elk product een aantal gegevens: naam, omschrijving, prijs, afbeelding

Die producten zou je onder elkaar kunnen weergeven, met een repeater of een datagridview. Daar hebben we uitleg over gekregen. Het ontwerp dat we moeten maken geeft de producten in blokken weer, die zien er globaal zo uit

code:

_______________________
|naam..................|
|                      | 
|        omschrijving  |
|  afb.  omschrijving  | 
|                      | 
|        prijs [INFO]  | 
_______________________

Bovenin de naam, links een afbeelding, rechts een omschrijving van 2 regels en onder de omschrijving de prijs en een INFO-knop.

Ook dat is met een repeater wel te maken lijkt mij, sterker,dat lijkt mij geen probleem

Het ontwerp is echter zo dat op de pagina 2x2 of 2x3 van deze blokken staan. Ze staan niet (repeterend) onder elkaar, maar de producten moeten op deze manier worden weergegeven:
1 3
2 4
of
1 2
3 4

Ik heb te weinig kennis om in te schatten of dit nu mogelijk is met een repeater of datagrid. Kan iemand me een hint geven? Of zou ik hier een andere class voor kunnen gebruiken.
Of moet/kan ik een teller mee laten lopen en de repeater van plek laten verspringen oid?

[D-Raven]

Ik zou eerst eens nadenken over hoe je HTML eruit ziet. Een mockup maken in puur html. En dan eens kijken hoe je dit met een repeater/datagrid/listview whatever door asp.net gaat laten renderen.

[Stefke]

D-Raven schreef op vrijdag 28 september 2012 @ 20:34:
Ik zou eerst eens nadenken over hoe je HTML eruit ziet. Een mockup maken in puur html. En dan eens kijken hoe je dit met een repeater/datagrid/listview whatever door asp.net gaat laten renderen.

Dat is het "probleem": we hebben een complete webshop in (statische) HTML-meegekregen om (deels) om te zetten naar een dynamische webpagina. Dat is dus het ontwerp (ligt 99% vast) en daar hoef ik dus niet over na te denken. Ik zal even een plaatje van de indexpagina online zetten

[RobIII]

stefijn schreef op zaterdag 29 september 2012 @ 11:32:
Ik zal even een plaatje van de indexpagina online zetten

Plaatjes hebben we niks aan, relevante(!) delen(!) HTML/CSS wél. Wat is er mis met, bijvoorbeeld, zoiets (2x2) of zoiets (3x2)? Je zou zelfs een UL kunnen gebruiken en er zijn nog, wat, zo'n 1001 alternatieven.

[ Voor 38% gewijzigd door RobIII op 29-09-2012 11:45 ]

[Stefke]

Te laat

http://www.stefijn.com/in...Tg1Y2U3NTRiMjAyZTg5ZmRiNA

Als ze onder elkaar zouden staan die 4 producten, dan zou ik het met een repeater gemaakt krijgen, geen probleem. Maar in deze "grid" zou ik niet weten hoe. De datagrid hebben we ook even snel uitgelegd gekregen, maar ik heb geen enkel idee wat de mogelijkheden daarvan zijn in relatie tot een dergelijke indeling.

Deze HTML gaat het om

* Als we zeggen relevante(!) delen(!) HTML doelen we niet op 150+ regels puinzooi "code" *

[ Voor 102% gewijzigd door RobIII op 29-09-2012 13:10 ]

[Caelorum]

OMG! Die html kan je beter zelf opnieuw maken. Tables voor layout is zo not done. Het lijkt wel alsof ze een photoshop export to html hebben gedaan

[Stefke]

Ja, dat is ook zo. Ik meen dat deze pagina is gemaakt met Dreamweaver... Ik krijg ook honderden warnings per pagina in VS10 over dat de boel niet aan XHTML voldoet

RobIII schreef op zaterdag 29 september 2012 @ 11:36:
[...]

Plaatjes hebben we niks aan, relevante(!) delen(!) HTML/CSS wél. Wat is er mis met, bijvoorbeeld, zoiets (2x2) of zoiets (3x2)? Je zou zelfs een UL kunnen gebruiken en er zijn nog, wat, zo'n 1001 alternatieven.

Op zich helpt dit al: ik begrijp uit deze voorbeelden dat de CSS zorgt voor de juiste indeling. Nu kan ik even gaan zoeken hoe de CSS van deze pagina in elkaar zit, misschien is het hier al in geregeld.

[ Voor 84% gewijzigd door Stefke op 29-09-2012 11:55 ]

[NMe]

Tijd om die HTML te scrappen en opnieuw te beginnen. RobIII heeft hierboven laten zien hoe...

[RobIII]

stefijn schreef op zaterdag 29 september 2012 @ 11:52:

Op zich helpt dit al: ik begrijp uit deze voorbeelden dat de CSS zorgt voor de juiste indeling. Nu kan ik even gaan zoeken hoe de CSS van deze pagina in elkaar zit, misschien is het hier al in geregeld.

Whatever you do: probeer alsjeblieft zo veel mogelijk van die bras die je postte te vergeten; alles wat je er van leert is hoe 't niet moet. Er gaat 't 'gezegde' rond in ons wereldje: "The goggles! They do nothing!"; dat is van toepassing op de code die je postte.

[Stefke]

Care to explain? (de goggles)

Ik zie ook al wel in de CSS dat daar niks in is geregeld voor het afhandelen van die "grid". Dat moet ik dus inderdaad zelf doen....

Vreemd eigenlijk, ik ben bezig met een cursus C#, niet HTML/CSS. Ik heb een redelijke basiskennis van beide, maar t lijkt erop dat ik minstens de helft van de tijd mijn aandacht moet focussen op de HTML/CSS. En dan moet ik nog gaan nadenken welke classes ik ga maken, want alles moet objectoriented zijn. Misschien had ik toch mijn eigen ontwerp moeten maken

Over die code, dat is wat we gekregen hebben. Daar vroeg je naar mijn mening om? Ik weet ook wel dat het rommel is

[ Voor 11% gewijzigd door Stefke op 29-09-2012 12:06 ]

[Zeebonk]

Ik zou me niet al te veel zorgen maken over de HTML/CSS die je aangeleverd hebt gekregen. Dat het niet mooi is heeft iedereen hier nu wel duidelijk gemaakt, maar is helemaal niet het probleem dat je moet oplossen. De serverside code staat nagenoeg los van de aangeleverde clientside spullen, en kan je zo netjes maken als je zelf maar wilt. Laat vooral je C# kennis zien tijdens een C# cursus

Ik zou even naar deze thread kijken, volgens mij sluit dit prima aan op de vraag die je oorspronkelijk stelde.

[ Voor 5% gewijzigd door Zeebonk op 29-09-2012 12:22 ]

[Stefke]

Zeebonk schreef op zaterdag 29 september 2012 @ 12:12:
Ik zou me niet al te veel zorgen maken over de HTML/CSS die je aangeleverd hebt gekregen. Dat het niet mooi is heeft iedereen hier nu wel duidelijk gemaakt, maar is helemaal niet het probleem dat je moet oplossen. De serverside code staat nagenoeg los van de aangeleverde clientside spullen, en kan je zo netjes maken als je zelf maar wilt. Laat vooral je C# kennis zien tijdens een C# cursus

Ik zou even naar deze thread kijken, volgens mij sluit dit prima aan op de vraag die je oorspronkelijk stelde.

Ziet er veelbelovend uit! Bedankt, hiermee los ik met C# het probleem op, dat zal de docent beter bevallen (Iedereen bedankt hoor tot zover! )

[NMe]

Zeebonk schreef op zaterdag 29 september 2012 @ 12:12:
De serverside code staat nagenoeg los van de aangeleverde clientside spullen

Niet helemaal hoor. Met goeie code heb je een unordered list of een groepje divs. Hier moet je in je logica rekening gaan houden met rijen en kolommen. Domweg een cel dumpen is nogal wat makkelijker dan zelf alterneren tussen rijen, die bovendien semantisch nog eens incorrect zijn ook.

[Zeebonk]

Ja daarom staat er ook "nagenoeg" en niet "compleet" of "totaal"

[Grijze Vos]

Aangezien het twee kolommen moeten zijn kun je misbruik maken van ItemTemplate/AlternativeItemTemplate.
Ik kan de html nu niet meer zien, maar als het een table layout is dan kun je dit doen:

header template:

C#:

<table>

footer template:

C#:

</table>

item template:

C#:

<tr><td> item </td>

alt item template:

C#:

<td> item </td> </tr>

Zit je alleen nog met het probleem als je lijst een oneven aantal items heeft, maar goed, dan mis je een closing tr, wat niet eens erg is in html4. (niet alsof het daadwerkelijk xhtml is, die markup.