12

Here is the code I currently have:

@{
    if (Request.Browser.Browser == "IE") {
        if (Request.Browser.MajorVersion == 7) { <body class="ie7"> }
        if (Request.Browser.MajorVersion == 8) { <body class="ie8"> }
        if (Request.Browser.MajorVersion == 9) { <body class="ie9"> }
        if (Request.Browser.MajorVersion > 9) { <body> }
    } else {
        <body>
    }
}

Here is the error that it returns when the browser attempts to render it:

Parser Error Message: The code block is missing a closing "}" character. Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup.

What the heck? I was able to do this in the standard ASP.NET template syntax! Here's what that looked like:

<% // Adaptation of paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
   if ( (Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion == 7) ) { %><body class="ie7"><% } %>
<% if ( (Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion == 8) ) { %><body class="ie8"><% } %>
<% if ( (Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion == 9) ) { %><body class="ie9"><% } %>
<% if ( (Request.Browser.Browser == "IE") && (Request.Browser.MajorVersion > 9) ) { %><body><% } %>
<% if   (Request.Browser.Browser != "IE") { %><body><% } %>
Improve this question
3

5 Answers 5

Reset to default
27

A better option might be to declare an ieClass variable at the top of your view, and then reference it in your body tag.

@{
    string ieClass = "";
    if (Request.Browser.Browser == "IE") {
        if (Request.Browser.MajorVersion == 7) { ieClass="ie7"; }
        else if (Request.Browser.MajorVersion == 8) { ieClass="ie8"; }
        else if (Request.Browser.MajorVersion == 9) { ieClass="ie9"; }
    }
}

...

<body class="@ieClass">
Improve this answer
2
  • This works! However, in Firefox, I now have a <body class=""> sitting there. I'm not sure how thrilled I am with that.
    – Joshua Hayworth
    Commented Oct 18, 2011 at 23:08
  • Start with ieClass as "" then on the first match start with " class=" + "ie7" for example such that if ieClass == "" then ieClass = " class=" then work your magic from there. But having "class=""" is ok and browsers should not have any issues.
    – Jeff Willener
    Commented Oct 18, 2011 at 23:35
7 
@if (Request.Browser.Browser == "IE" || Request.Browser.Browser == "InternetExplorer")
{

}
Improve this answer
1
  • I was going to add this answer and saw yours. Microsoft must have changed what the Request Browser returns.
    – Trevor Nestman
    Commented Dec 28, 2016 at 17:20
2

I would also recommend a bit cleaner approach by placing razor/c# code at the top of your page and using variables to logically assign values for use within your page. First, it resolves the issue of the tags but also assists in code maintenance.

@{
    string bodyCssClass = string.Empty;
    switch(Request.Browser.Browser)
    {
        case "IE":
            switch(Request.Browser.MajorVersion)
            {
                case 7:
                    bodyCssClass = "browser-ie7";
                    break;
                case 8:
                    bodyCssClass = "browser-ie8";
                    break;
                case 9:
                    bodyCssClass = "browser-ie9";
                    break;
                default:
                    bodyCssClass = "browser-ie6";
            }
            break;
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>@Page.Title</title>
</head>
<body class="@bodyCssClass">
    <div>@RenderBody()</div>
</body>
</html>

With all that said; unless it's not available to this page, the work performed should not be on the presentation element (cshtml file) but rather from the ViewBag (e.g. ViewBag.BodyCssClass).

[Edit] I forgot the break for the outer switch statement for the 'IE' case. :)

Improve this answer
1
  • This works too! I ended up using a combination of yours and jrummell's code to solve my problem.
    – Joshua Hayworth
    Commented Oct 18, 2011 at 23:10
0

You open a lot of <body> tags, but do not close them. Razor is "intelligent" so it remembers the open and closed tags while parsing.

You can tell razor to ignore the tags by using

  @:<body class="ieX">

if you escape the last <body> you should also escape the </body> tag like @:</body>. My advice is to leave one <body> tag as is.

But there is more.

Your formatting of everything on one line probably also confuses razor. So (not tested) you need something like:

if (Request.Browser.MajorVersion == 7) { <text>@:<body class="ie7"></text> }

If that does not work, format it like:

if (Request.Browser.MajorVersion == 7) { 
    @:<body class="ie7">
}

(See JRummel's answer) And probably the easiest solution is:

     @{
       var bodyClass = string.Empty;

       if (Request.Browser.MajorVersion == 7) { bodyClass = "ie7"; }
       if (Request.Browser.MajorVersion == 8) { bodyClass = "ie8"; }
       // etc
     }
     <body class="@bodyClass">
     </body>

Improve this answer
0

JRummel's answer is the correct one. To expand on it I modified his script to allow me to support older versions of IE and remain backwards compatible.

@{
Layout = null;

string ieClass = "";
if (Request.Browser.Browser == "IE")
{
    ieClass += " ie";
    if (Request.Browser.MajorVersion == 9) { ieClass += " lt-ie10"; }
    if (Request.Browser.MajorVersion == 8) { ieClass += " lt-ie9"; }
    if (Request.Browser.MajorVersion == 7) { ieClass = " lt-ie8"; }
}
}
<!doctype html>
<html lang="en-us" dir="ltr" class="no-js @ieClass.Trim()">
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.