Var placera dynamisk css kod i mvc app?

3 svar · 354 visningar · startad av doggelito 20 juni 2010

doggelitoMedlem sedan juni 20003 076 inlägg

Frågan20 juni 2010 17:04#1

Hej,
håller på å labbar lite MVC 2 och har en fundering.
Min usercontrol vy ser ut så här nu:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IList<Category>>" %>

<ul class="categories">
    <%
        foreach (Mvc.Entities.Category category in Model)
        {
            if (category.IsExpanded)
            {                
                var css = "";
                var padding = "";        

                if (category.Depth == 0)
                {
                    css += " topItem";
                }
                else
                {
                    css += " subItem";
                    padding = "style=\"padding-left:" + (category.Depth * 20) + "px;\"";
                }

                if (category.IsSelected)
                {
                    css += " selected";
                }
            %>
                <li class="<%=css %>"><a <%=padding %> href="<%=Url.Action("Index","Home",new {categoryid=category.ID}) %>" title="<%=category.Name %>"><%=category.Name%></a></li>
            <% 
            }
        }    
    %>
</ul>

Är det ok att ha csskoden så här?
Varför jag undrar är för man ska väl egentligen inte ha matematik i en vy?!

onkelborgMedlem sedan juli 2003555 inlägg

20 juni 2010 17:20#2

Hm, det där är väl bra ut, nästan? Att räkna ut rent grafiska saker (avstånd, hur saker ska renderas osv) ska se ut är ju ett jobb för just vyn. Däremot tycker jag att du har lite feltänk, det känns som att din färdiga lista borde se ut ungefär såhär istället:

Dvs, inte använda padding utan nästa istället. På så sätt behöver du ingen inline-css utan kan skapa indenteringen snyggt i din stylesheet

rhdfMedlem sedan okt. 2007446 inlägg

20 juni 2010 17:25#3

Hur ser den renderade html:en ut?
Jag gissar på att det är någon form av trädstruktur du försöker rendera, eller?

men du borde kunna flytta ut den där logiken till en metod i nån klass
så att du bara behöver skriva

<li class="<%=GetCssClasses(category.IsExpanded,category.Depth,category.IsSelected) %>"><a <%=padding %> href="<%=Url.Action("Index","Home",new {categoryid=category.ID}) %>" title="<%=category.Name %>"><%=category.Name%></a></li>

doggelitoMedlem sedan juni 20003 076 inlägg

20 juni 2010 17:47#4

Tack båda! :bire
Visst borde listan vara nästlad istället för padding! Tänkte inte på det! :)
En GetCss klass vore annars ett alternativ. :)