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:

SQL Last Day of Month

How do I get the last day of the month in a SQL query? Someone recently asked me this question and as with so many questions in development the answer is: it depends.

Prior to SQL Server 2012, this is what typical T-SQL to compute last day of the month would look like:

DECLARE @date DATE = '2017-12-15';
DECLARE @firstOfMonth DATE = DATEFROMPARTS(YEAR(@date), MONTH(@date), 1);
SELECT DATEADD(DAY,-1, DATEADD(MONTH, 1, @firstOfMonth));

With SQL Server 2012 or later, the EOMONTH() gives you a much more concise option which looks like:

DECLARE @date DATE = '2017-12-15';
SELECT EOMONTH(@date)

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.

Using a Recursive CTE to Build Paths

Here’s the scenario. You have a hierarchical data set like categories, folders, etc. and you need to output the entire path for each.

Let’s say we take the category example and we have a table that looks like:

CREATE TABLE [dbo].[Category](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[Name] [nvarchar](max) NOT NULL,
	[ParentCategoryId] [int] NULL,
    -- normal PK script removed to keep this short
) 

To get the full path for each category, the SQL would look like:

WITH CTE_CategoriesWithPaths AS
( 
    SELECT 
        c.Id, 
        c.Name, 
        c.ParentCategoryId, 
        c.Name AS [Path] 
    FROM Category c 
    WHERE c.ParentCategoryId IS NULL 
    UNION ALL
    SELECT 
        c.Id, 
        c.Name, 
        c.ParentCategoryId,
        cte.[Path] + '/' + c.Name AS [Path] 
    FROM 
        Category c 
        INNER JOIN CTE_CategoriesWithPaths cte 
            ON c.ParentCategoryId = cte.Id
    WHERE c.ParentCategoryId IS NOT NULL 
)
SELECT * 
from CTE_CategoriesWithPaths

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);
}