Tech Junkie Blog: ASP.NET MVC 5 From Scratch : Using Conditional Comments to Support Older Versions Of IE

Monday, June 8, 2015

ASP.NET MVC 5 From Scratch : Using Conditional Comments to Support Older Versions Of IE

Older versions of IE have problems supporting the newer JavaScript libraries and HTML5 tags.  In the previous blog we've created responsive layout in ASP.NET MVC.  In this blog we are going to use conditional comments to support older versions of Internet Explorer (IE).  Since IE 9 seems to be the cutoff point we will use it in our conditional comment base condition to decide whether we want to do something different to support IE.  We will be working with the MvcApp project.

Step-By-Step Instructions:

1.  Open the MvcApp application
2.  Open the _Layout.cshtml
3.  Inside the <head> tag

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <![endif]-->



The code above says to include the html5shiv.min.js and response.min.js from maxcdn.com if the browser's version is less than IE 9 with the line <!--[if lt IE 9]>. The html5shiv library supports HTML5 elements in IE and the response library supports media queries in IE. Inside the "if" condition it also tells the layout to use JQuery 1.xxx versions for IE.

The complete code should look like the following in the _Layout.cshtml
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>@Page.Title</title>
        @RenderSection("head", required: false)
        @Styles.Render("~/Content/bootstrap")
        @Styles.Render("~/Content/css")
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <![endif]-->

    </head>
    <body>
        <header>
            <nav class="navbar navbar-default navbar-fixed-top">
                    <div class="row">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <a class="navbar-brand" href="#"></a>
                            </div>
                            <div id="navbar" class="navbar-collapse collapse">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a href="#">Home</a></li>
                                    <li><a href="#about">About</a></li>
                                    <li><a href="#contact">Contact</a></li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <span class="caret"></span></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Beverages</a></li>
                                            <li><a href="#">Condiments</a></li>
                                            <li><a href="#">Confections</a></li>
                                            <li><a href="#">Dairy Products</a></li>
                                            <li><a href="#">Grains/Cereals</a></li>
                                            <li><a href="#">Meat/Poultry</a></li>
                                            <li><a href="#">Produce</a></li>
                                            <li><a href="#">Seafood</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div><!--/.nav-collapse -->
                    </div>
                    
                </div>
            </nav>
            <div class="jumbotron" id="header-jumbotron">
                        <h2>Northwind Store</h2>
            </div>
        </header>
        @RenderBody()
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
    </body>
</html>

← Previous  
Create A Responsive Layout With Bootstrap

3 comments:

  1. Thank you for taking the time to make these instructions! They gave me a good grounding and helped jump-start my webapps.

    ReplyDelete
  2. Thanks, this is the best and most explanatory tutorial I`ve seen. It helped me a lot with my first steps in MVC.

    ReplyDelete
  3. Java Software Development, Java Mobile Application Development, Java Portal Development, Java Application Maintenance, Testing and other Java improvement benefits in a financially savvy way.Java

    ReplyDelete