Conditional HTML Attributes using Razor MVC3

Question

The variable strCSSClass often has a value but sometimes is empty    I do not want to include an empty class    in this input element s HTML  which means if strCSSClass is empty  I don t want the class  attribute at all   The following is one way to do a conditional HTML attribute    lt input type  text  id   strElementID    CSSClass IsEmpty           class     strCSSClass    gt    Is there a more elegant way of doing this  Specifically one where I could follow the same syntax as is used in the other parts of the element  class   strCSSClass

User · Accepted Answer

You didn t hear it from me  the PM for Razor  but in Razor 2  Web Pages 2 and MVC 4  we ll have conditional attributes built into Razor as of MVC 4 RC tested successfully   so you can just say things like this      lt input type  text  id   strElementID  class   strCSSClass    gt    If strCSSClass is null then the class attribute won t render at all   SSSHHH   don t tell

User · Answer

Note you can do something like this at least in MVC3     lt td align  left    isOddRow    class TopBorder     style border 0px    gt    What I believed was razor adding quotes was actually the browser   As Rism pointed out when testing with MVC 4 I haven t tested with MVC 3 but I assume behavior hasn t changed   this actually produces class TopBorder but browsers are able to parse this fine   The HTML parsers are somewhat forgiving on missing attribute quotes  but this can break if you have spaces or certain characters    lt td align  left  class  TopBorder   gt    OR   lt td align  left  style  border 0px   gt    What goes wrong with providing your own quotes  If you try to use some of the usual C  conventions for nested quotes  you ll end up with more quotes than you bargained for because Razor is trying to safely escape them   For example    lt button type  button    true    style   border 0px      string Empty  gt    This should evaluate to  lt button type  button  style  border 0px  gt  but Razor escapes all output from C  and thus produces   style  amp quot border 0px amp quot    You will only see this if you view the response over the network   If you use an HTML inspector  often you are actually seeing the DOM  not the raw HTML   Browsers parse HTML into the DOM  and the after-parsing DOM representation already has some niceties applied   In this case the Browser sees there aren t quotes around the attribute value  adds them   style   amp quot border 0px amp quot     But in the DOM inspector HTML character codes display properly so you actually see   style   border 0px     In Chrome  if you right-click and select Edit HTML  it switch back so you can see those nasty HTML character codes  making it clear you have real outer quotes  and HTML encoded inner quotes   So the problem with trying to do the quoting yourself is Razor escapes these     If you want complete control of quotes  Use Html Raw to prevent quote escaping    lt td  Html Raw  someBoolean    rel  tooltip  data-container   drillDown a          gt    Renders as    lt td rel  tooltip  title  Drilldown  data-container   drillDown a  gt    The above is perfectly safe because I m not outputting any HTML from a variable   The only variable involved is the ternary condition  However  beware that this last technique might expose you to certain security problems if building strings from user supplied data  E g  if you built an attribute from data fields that originated from user supplied data  use of Html Raw means that string could contain a premature ending of the attribute and tag  then begin a script tag that does something on behalf of the currently logged in user possibly different than the logged in user    Maybe you have a page with a list of all users pictures and you are setting a tooltip to be the username of each person  and one users named himself    gt  lt script gt   post  changepassword php password 123   lt  script gt  and now any other user who views this page has their password instantly changed to a password that the malicious user knows

User · Answer

I guess a little more convenient and structured way is to use Html helper  In your view it can be look like       var htmlAttr   new Dictionary lt string  object gt      htmlAttr Add  id   strElementId    if   CSSClass IsEmpty          htmlAttr Add  class   strCSSClass                     Html TextBox  somename       htmlAttr    If this way will be useful for you i recommend to define dictionary htmlAttr in your model so your view doesn t need any      logic blocks  be more clear

[html] Conditional HTML Attributes using Razor MVC3

Examples related to html

Examples related to asp.net-mvc-3

Examples related to razor