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

10 comments:

  1. AnonymousJanuary 20, 2016 at 4:21 PM

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

    ReplyDelete
  2. UnknownJune 8, 2016 at 9:27 AM

    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. UnknownJanuary 23, 2017 at 12:18 PM

    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. AnonymousJanuary 26, 2021 at 7:27 PM

    https://natury-smak.pl Your information is really fascinating.

    ReplyDelete
  5. AnonymousJanuary 26, 2021 at 9:44 PM

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

    ReplyDelete
  6. vé máy bay từ canada về việt namNovember 24, 2021 at 9:38 PM

    Aivivu - đại lý chuyên vé máy bay trong nước và quốc tế

    kinh nghiệm mua vé máy bay đi Mỹ giá rẻ

    máy bay từ mỹ về việt nam

    mua vé máy bay từ đức về việt nam

    vietnamairline từ nhật về việt nam

    Máy bay từ Hàn Quốc về Việt Nam

    lịch bay từ canada về việt nam

    chi phí vé máy bay cho chuyên gia nước ngoài

    ReplyDelete
  7. 에볼루션카지노January 17, 2022 at 7:19 PM

    심심할때에는 에볼루션카지노 에서 즐거움을

    ReplyDelete
  8. Cleaning Company Dubai UAEFebruary 28, 2022 at 6:06 AM

    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
  9. Cool StuffMay 22, 2022 at 12:18 AM

    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
  10. Dani danielsJune 21, 2022 at 7:55 AM

    This is such a great web page with wonderful content.Vaishali Hot Girls ||Chattarpur Independent Girls ||Greater Kailash Night Service ||Hauz Khas Adult Service ||Saket High Class Girl ||Hot Bhabhi in Hauz khaz|| Guys to make your day I have the best link here

    ReplyDelete

Subscribe to: Post Comments (Atom)

Search This Blog