Confirming ASP.NET Buttons With Bootstrap And Bootbox!

I have been doing a lot of work in ASP.NET with Bootstrap. One challenge has been getting ASP.NET server controls to behave nicely within the Bootstrap scaffolding. I needed an elegant way to confirm a postback action wired to an ASP.NET button control. 

One can easily leverage the Javascript confirm function along with the OnClientClick property of the button controls.  

<asp:Button ID="Button1" runat="server" Text="Delete" 
OnClientClick="return confirm('Are you sure?');"></asp:LinkButton>

However, I am using Bootstrap.  I wanted a fancy Bootstrap dialog box to appear for such a prompt instead of the generic-looking alert box.  This is what I came up with.

<script type="text/javascript">
    var confirmed = false;
    function Confirm(btn) {
        if (confirmed) return true;
        bootbox.confirm("Are you sure?", function (result) {
            if (result) {
                confirmed = true;
                btn.click();
            }
        });
        return false;
    }
</script>

<asp:Button runat="server" ID="Button1" Text="Update" CssClass="btn btn-warning" 
OnClick="UpdateButton_OnClick" OnClientClick="return Confirm(this);" />

The code requires not only Bootstrap, but also Bootbox.js.  In a nutshell, Bootbox is a library that simplifies the creation of Bootstrap dialog boxes.  You should check it out!

There is a global boolean variable named "confirmed" that starts its life out as false. When the button if clicked, the "confirmed" variable is evaluated, found to be false, and a Bootbox confirm dialog is displayed. The event function returns a false to prevent the button action from firing. If the Bootbox confirm dialog that appears returns a true response, meaning the user approves the action, the confirmed variable is changed to true and the button click event is fired once again.

This time, however, the "confirmed" variable is found to be true, so the event is returned as "true" allowing the button to do its thing.

How I Upgraded (Hacked) The SASS Compiler for Mads Christensen's WebCompiler

Mads Christensen's Web Compiler has not been updated since 2015. However, I discovered a way to freshen the SASS compiler to the most recent version of node-sass available. Here are my steps...

Use Void Tools' Everything to find the WebCompiler temp directory by searching for WebCompiler.exe. Mine was located in "C:\Users\[user_name]\AppData\Local\Temp\WebCompiler1.12.394". By the way, if you are not already using Everything to search for files, do yourself a favor and install it!

Run “npm install node-sass” in WebCompiler temp directory. This will upgrade the SASS compiler to the latest version.

Next you will need to upgrade the node.exe file that is found in the WebCompiler temp directory. I do not know the "proper" way to accomplish this; but here is what I did...

1. Use Everything to find latest version of node.exe (v20.12.0)
2. Copy the latest version to the WebCompiler temp directory

That should do it!

Visual Studio 2013, Resharper, & Why I Could Not Update My Project Files

I learned early on that Resharper is an invaluable tool as much as it is a finicky animal. This problem is a perfect example: Upon opening a file within a project that I frequently visit, I found that I could not update it. Anything I typed on the keyboard was not making it's way through the Visual Studio plumbing to the editor window.

I so tried opening a different project in another instance of Visual Studio. That one behaved normally. I rebooted my workstation and went back into the problem project; but the problem persisted.

If you ever have this problem and you are running Resharper, look for the Resharper icon located in the bottom status bar of Visual Studio. It's location is all the way to the right of the bar. In my case, it was missing when the problem project was loaded.

So, what I did was clear the Resharper cache from within the options window...

Upon restarting Visual Studio, VIOLA! The status icon returned and so did my ability to edit documents.

I Could Not Publish My Web App via FTP In Visual Studio. *SOLVED!*

Google and I were able to resolve a bizarre issue with Visual Studio 2013 (and 2015, for that matter) Community Edition.

Here is the Microsoft Connect link.

The message I was seeing during the attempt to publish via FTP was, "The components for communicating with FTP servers are not installed." Turns out that the issue was that I recently added a newer-format Microsoft Access file in the App_Data directory.

The fix was to convert the Access database file to the older "mdb" format. After doing that, the ability for me to publish the site was restored.

Now isn't that crazy? Silly, Visual Studio!

The Proper Use Of The ASP.NET Label Control

ASP.NET Label controls are not quite the same as their WinForms counterparts. Sure, if you want to just display text on your ASP.NET form page, you COULD do the WinForms thing by placing a Label control and assigning it a text value; but that is NOT what ASP.NET label controls are actually for, and there is a better approach.

The ASP.NET Label control is actually meant for defining HTML elements. consider the following:
Above is a typical use of an HTML label. In this case, it is providing an HTML definition for an element through the use of its "for" attribute that is assigned to the input id "userName".
Creating this HTML with ASP.NET is the true intention of the ASP.NET Label control. Now lets look at how to do it:

This will produce similar HTML as in the first example. The Label control's "AssociatedControlID" generates the "for" HTML attribute; but with all the proper ASP.NET ID munging required to make the HTML work.

So what's the "correct" way to just display text using ASP.NET controls?

Remember that you only NEED to use ASP.NET controls at all if they are going to be manipulated by server-side code. For example, if you aren't displaying data-bound text, just throw that text inside a span tag on your page. But, the best way to display server-manipulated text on an ASP.NET page is to use a Literal control. The following is a snippet from inside a data-bound control:
Since I am not including an ID attribute, the resulting HTML will simply be a data-bound decimal value rounded to 2 decimal places. If I HAD included an ID, then the result would be nestled inside a span tag with a corresponding munged ASP.NET ID.

So remember, kids: ASP.NET Labels are for creating HTML text-based relationships for your ASP.NET controls and Literals should be used when you merely need to display some text that has been generated server-side.

UPDATE: There are some caveats to attempting to completely replace all of your unassigned Label controls with Literal controls. One that has stood out for me is that Literal controls do not implement the "CssClass" property. So, if you want to display a tag with server-side functionality that gives you the ability to apply a CSS class, then go ahead and use that Label.

Applying Styles To Controls

So I have a custom control that inherits the BoundField class. Inside it, I added some validators. My problem was that I needed to apply styles to the TextBox in edit mode that should not be applied to the validators. The "ControlStyle" property that is already a part of the BoundField class applies to ALL the child controls rendered - so that won't work.

My solution was to create a "TextBoxStyle" property that gets applied (using ApplyStyle) once the TextBox is grabbed within the overridden InitializeDataCell method.

Here is the solution...

And here is a snippet of the implementation. Notice the "TextBoxStyle-CssClass" property...