Bootstrap 5 CDN Fallback

Bootstrap 5 has a lot of changes and one of them is the fallback method in case the CDN link doesn’t load. Here is the Razor syntax for Bootstrap 5 fallback:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
  asp-fallback-src="js/bootstrap.bundle.min.js"
  asp-fallback-test="window.bootstrap">
</script>

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
  asp-fallback-href="css/bootstrap.min.css"
  asp-fallback-test-class="visually-hidden" 
  asp-fallback-test-property="position" 
  asp-fallback-test-value="absolute"
  integrity="..." 
  crossorigin="..." />

These samples still use Bootstrap 4 but there are still a lot of good information on the following pages:

Update on ASP.NET Forms Bootstrap Menu Control

I finally took the time to move my ASP.NET Forms Bootstrap Menu Control code over to a GitHub repository. Because of the move, I’ve closed the comments on the original post in hopes of moving all discussion regarding the control to its repository.

I’ve also built out 2 separate example projects. The first shows how to use the control with just the class file. The second shows how to use the control by referencing the project from a separate class library.

ASP.NET Forms Disabled CSS for BootStrap

The following CSS is to handle Enabled set to true in any WebControl.

/* -- Bootstrap Additions - ASP.NET Disabled ----------------- */

input[type="radio"].aspNetDisabled,
input[type="checkbox"].aspNetDisabled,
.radio-inline.aspNetDisabled,
.checkbox-inline.aspNetDisabled,
.radio.aspNetDisabled label,
.checkbox.aspNetDisabled label
{
    cursor: not-allowed;
}

.btn.aspNetDisabled
{
    pointer-events: none;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.btn-default.aspNetDisabled,
.btn-default.aspNetDisabled:hover,
.btn-default.aspNetDisabled:focus,
.btn-default.aspNetDisabled:active,
.btn-default.aspNetDisabled.active
{
    background-color: #fff;
    border-color: #ccc;
}

.btn-primary.aspNetDisabled,
.btn-primary.aspNetDisabled:hover,
.btn-primary.aspNetDisabled:focus,
.btn-primary.aspNetDisabled:active,
.btn-primary.aspNetDisabled.active
{
    background-color: #428bca;
    border-color: #357ebd;
}

.btn-success.aspNetDisabled,
.btn-success.aspNetDisabled:hover,
.btn-success.aspNetDisabled:focus,
.btn-success.aspNetDisabled:active,
.btn-success.aspNetDisabled.active
{
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.btn-info.aspNetDisabled,
.btn-info.aspNetDisabled:hover,
.btn-info.aspNetDisabled:focus,
.btn-info.aspNetDisabled:active,
.btn-info.aspNetDisabled.active
{
    background-color: #5bc0de;
    border-color: #46b8da;
}

.btn-warning.aspNetDisabled,
.btn-warning.aspNetDisabled:hover,
.btn-warning.aspNetDisabled:focus,
.btn-warning.aspNetDisabled:active,
.btn-warning.aspNetDisabled.active
{
    background-color: #f0ad4e;
    border-color: #eea236;
}

.btn-danger.aspNetDisabled,
.btn-danger.aspNetDisabled:hover,
.btn-danger.aspNetDisabled:focus,
.btn-danger.aspNetDisabled:active,
.btn-danger.aspNetDisabled.active
{
    background-color: #d9534f;
    border-color: #d43f3a;
}

.dropdown-menu > .aspNetDisabled > a,
.dropdown-menu > .aspNetDisabled > a:hover,
.dropdown-menu > .aspNetDisabled > a:focus,
.dropdown-menu > li > a.aspNetDisabled,
.dropdown-menu > li > a.aspNetDisabled:hover,
.dropdown-menu > li > a.aspNetDisabled:focus
{
    color: #777;
}

.dropdown-menu > .aspNetDisabled > a:hover,
.dropdown-menu > .aspNetDisabled > a:focus,
.dropdown-menu > li > a.aspNetDisabled:hover,
.dropdown-menu > li > a.aspNetDisabled:focus
{
    text-decoration: none;
    cursor: not-allowed;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

 

ASP.NET Forms Bootstrap Menu Control

UPDATE: I have closed the comments for this post. If you’d like to discuss the ASP.NET Forms Bootstrap Menu Control, please visit the GitHub repository located at: https://github.com/jeremyknight-me/aspnet-forms-bootstrap-menu


When I couldn’t find an ASP.NET Form menu control that was compatible with Bootstrap 3.1, I did what every other developer would do: I created one. Enjoy!

Here’s the HTML markup view:

&amp;amp;lt;div class="navbar navbar-inverse navbar-static-top" role="navigation"&amp;amp;gt;
    &amp;amp;lt;div class="container" style="padding: 0; margin: 0;"&amp;amp;gt;
        &amp;amp;lt;div class="navbar-header"&amp;amp;gt;
            &amp;amp;lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&amp;amp;gt;
                &amp;amp;lt;span class="sr-only"&amp;amp;gt;Toggle navigation&amp;amp;lt;/span&amp;amp;gt;
                &amp;amp;lt;span class="icon-bar"&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
                &amp;amp;lt;span class="icon-bar"&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
                &amp;amp;lt;span class="icon-bar"&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
            &amp;amp;lt;/button&amp;amp;gt;
        &amp;amp;lt;/div&amp;amp;gt;
        &amp;amp;lt;div class="navbar-collapse collapse"&amp;amp;gt;
            &amp;amp;lt;jk:BootstrapMenu ID="BootstrapMenu1" runat="server"&amp;amp;gt;
                &amp;amp;lt;Items&amp;amp;gt;
                    &amp;amp;lt;asp:MenuItem Text="Home" NavigateUrl="#" /&amp;amp;gt;
                    &amp;amp;lt;asp:MenuItem Text="About" NavigateUrl="#" /&amp;amp;gt;
                    &amp;amp;lt;asp:MenuItem Text="Contact" NavigateUrl="#" /&amp;amp;gt;
                    &amp;amp;lt;asp:MenuItem Text="Drop Down"&amp;amp;gt;
                        &amp;amp;lt;asp:MenuItem Text="Action" NavigateUrl="#" /&amp;amp;gt;
                        &amp;amp;lt;asp:MenuItem Text="Another action" NavigateUrl="#" /&amp;amp;gt;
                        &amp;amp;lt;asp:MenuItem Text="Something else here" NavigateUrl="#" /&amp;amp;gt;
                    &amp;amp;lt;/asp:MenuItem&amp;amp;gt;
                    &amp;amp;lt;asp:MenuItem Text="Help" NavigateUrl="#" /&amp;amp;gt;
                    &amp;amp;lt;asp:MenuItem Text="Nothing" /&amp;amp;gt;
                &amp;amp;lt;/Items&amp;amp;gt;
            &amp;amp;lt;/jk:BootstrapMenu&amp;amp;gt;
        &amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;!--/.nav-collapse --&amp;amp;gt;
    &amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;

Here’s the HTML markup view for using with a SiteMapDataSource:

&amp;amp;lt;div class="navbar navbar-inverse navbar-static-top" role="navigation"&amp;amp;gt;
    &amp;amp;lt;div class="container" style="padding: 0; margin: 0;"&amp;amp;gt;
        &amp;amp;lt;div class="navbar-header"&amp;amp;gt;
            &amp;amp;lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&amp;amp;gt;
                &amp;amp;lt;span class="sr-only"&amp;amp;gt;Toggle navigation&amp;amp;lt;/span&amp;amp;gt;
                &amp;amp;lt;span class="icon-bar"&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
                &amp;amp;lt;span class="icon-bar"&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
                &amp;amp;lt;span class="icon-bar"&amp;amp;gt;&amp;amp;lt;/span&amp;amp;gt;
            &amp;amp;lt;/button&amp;amp;gt;
        &amp;amp;lt;/div&amp;amp;gt;
        &amp;amp;lt;div class="navbar-collapse collapse"&amp;amp;gt;
            &amp;amp;lt;jk:BootstrapMenu ID="BootstrapMenu2" runat="server" DataSourceId="SiteMapDataSource1" /&amp;amp;gt;
            &amp;amp;lt;asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" /&amp;amp;gt;
        &amp;amp;lt;/div&amp;amp;gt;&amp;amp;lt;!--/.nav-collapse --&amp;amp;gt;
    &amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;

In either case you’ll need a page directive

&amp;amp;lt;%@ Register tagPrefix="jk" assembly="JK.Core.Web" namespace="JK.Core.Web.Controls" %&amp;amp;gt;

Updates:

  • 2017 January 23: Closed comments to push conversation to GitHub repository.
  • 2015 January 19: Added zip file sample project for download to OneDrive.
  • 2014 August 15: Added page directive needed to use control in page markup
  • 2014 April 11: Updated to work with SiteMapDataSource