Tech Junkie Blog - Real World Tutorials, Happy Coding!: End-to-End ASP.NET MVC 5 : Using Conditional Comments to Support Older Versions Of IE

Monday, June 8, 2015

End-to-End ASP.NET MVC 5 : 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

19 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
  4. https://natury-smak.pl Your information is really fascinating.

    ReplyDelete
  5. nutrisolutions.pl Wow cuz this is excellent work! Congrats and keep it up.

    ReplyDelete
  6. Commonly way about accomplishing this is exactly to make a cleaning company which might come for and do the cleaning for your needs. Generally, this is exactly done subsequently after hours when workers commonly are not present, so the business functions aren't altered. cleaning services abu dhabi

    ReplyDelete
  7. LEGIT FULLZ & TOOLS STORE

    Hello to All !

    We are offering all types of tools & Fullz on discounted price.
    If you are in search of anything regarding fullz, tools, tutorials, Hack Pack, etc
    Feel Free to contact

    ***CONTACT 24/7***
    **Telegram > @leadsupplier
    **ICQ > 752822040
    **Skype > Peeterhacks
    **Wicker me > peeterhacks

    "SSN LEADS/FULLZ AVAILABLE"
    "TOOLS & TUTORIALS AVAILABLE FOR HACKING, SPAMMING,
    CARDING, CASHOUT, CLONING, SCRIPTING ETC"

    **************************************
    "Fresh Spammed SSN Fullz info included"
    >>SSN FULLZ with complete info
    >>CC With CVV (vbv & non vbv) Fullz USA
    >>FULLZ FOR SBA, PUA & TAX RETURN FILLING
    >>USA I.D Photos Front & Back
    >>High Credit Score fullz (700+ Scores)
    >>DL number, Employee Details, Bank Details Included
    >>Complete Premium Info with Relative Info

    ***************************************
    COMPLETE GUIDE FOR TUTORIALS & TOOLS

    "SPAMMING" "HACKING" "CARDING" "CASH OUT"
    "KALI LINUX" "BLOCKCHAIN BLUE PRINTS" "SCRIPTING"
    "FRAUD BIBLE"

    "TOOLS & TUTORIALS LIST"
    =>Ethical Hacking Ebooks, Tools & Tutorials
    =>Bitcoin Hacking
    =>Kali Linux
    =>Fraud Bible
    =>RAT
    =>Keylogger & Keystroke Logger
    =>WhatsApp Hacking & Hacked Version of WhatsApp
    =>Facebook & Google Hacking
    =>Bitcoin Flasher
    =>SQL Injector
    =>Premium Logs (PayPal/Amazon/Coinbase/Netflix/FedEx/Banks)
    =>Bitcoin Cracker
    =>SMTP Linux Root
    =>Shell Scripting
    =>DUMPS with pins track 1 and 2 with & without pin
    =>SMTP's, Safe Socks, Rdp's brute
    =>PHP mailer
    =>SMS Sender & Email Blaster
    =>Cpanel
    =>Server I.P's & Proxies
    =>Viruses & VPN's
    =>HQ Email Combo (Gmail, Yahoo, Hotmail, MSN, AOL, etc.)

    *Serious buyers will always welcome
    *Price will be reduce in bulk order
    *Discount offers will give to serious buyers
    *Hope we do a great business together

    ===>Contact 24/7<===
    ==>Telegram > @leadsupplier
    ==>ICQ > 752822040
    ==>Skype > Peeterhacks
    ==>Wicker me > peeterhacks

    ReplyDelete

Search This Blog