johna's blog

ASP.NET bug with RadioButton GroupName in Repeater

2019-09-01T12:00:00+10:00

I was recently working on an ASP.NET Web Forms project where I needed to create a group of RadioButtons with a Repeater.

I rediscovered a bug in ASP.NET that results in each RadioButton having a unique GroupName which means they all operate independently.

Of course I attempted to take the easy route of Google-ing the problem and I found many discussions and posts about this issue. I looked at and tried some of the suggested workarounds but didn't like some and others didn't work.

Inspired by some JavaScript solutions that simply deselect all other RadioButtons in the same group, I put together the following simple jQuery script to do the same.

$(function(){
    $('[name$="$RadioButton1"]').click(function(){
        var clientId=$(this).attr('id');
        $('[name$="$RadioButton1"]').each(function(){
            if($(this).attr('id') != clientId){
                $(this).prop('checked',false);
            }
        });
    });
});

You need to replace "RadioButton1" with the ID of your RadioButton control in the two places in the script.

I added this script in the code-behind file in the Page_PreRender event when it was needed, like this:

Page.ClientScript.RegisterStartupScript(this.GetType(), "RadioButton1", "$(function(){$('[name$="$RadioButton1"]').click(function(){var clientId=$(this).attr('id');$('[name$="$RadioButton1"]').each(function(){if($(this).attr('id')!=clientId){$(this).prop('checked',false);}});});});", true);

I know this script could be improved a lot, but as is often the case, as soon as my prototype worked as required I left it as is and moved on to other priorities. No time for optimisation.

[A Google search shows many people have faced this problem... Wonder why it hasn't been fixed?]

More on Bootstrap 4 modals in ASP.NET Web Forms applications using UpdatePanels

2019-04-09T12:00:00+10:00

I've now written a couple of posts on the topic of using Bootstrap modals in ASP.NET Web Forms projects, one on using native Bootstrap modal methods with ClientScript and another attempting to control them with server-side code only. Both methods had some issues.

In this, my third post, I go over the methods I am using now and the problems I have encountered and overcome.

The previous server-side method was ideal, but I couldn't get around some issues, so I now believe the best method is to use the native JavaScript methods to hide and show the modals.

Here's some sample code for how I do this now:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" OnClick="Button1_Click" Text="Show Modal" />
	</ContentTemplate>
</asp:UpdatePanel>

<asp:Panel ID="Modal1" runat="server" CssClass="modal" data-backdrop="static" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Sample Modal</h5>
			</div>
			<div class="modal-body">
				Sample modal content.
			</div>
			<div class="modal-footer">
				<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
					<ContentTemplate>
						<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" OnClick="Button2_Click" Text="Continue" />
					</ContentTemplate>
				</asp:UpdatePanel>
			</div>
		</div>
	</div>
</asp:Panel>

protected void Button1_Click(object sender, EventArgs e)
{
	ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "Modal1_show", "$(function(){$('#" + Modal1.ClientID + "').modal('show');});", true);
}

protected void Button2_Click(object sender, EventArgs e)
{
	ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "Modal1_hide", "$(function(){$('#" + Modal1.ClientID + "').modal('hide');});", true);
}

It is important that any controls inside the modal that cause a postback are contained in an UpdatePanel inside the modal. Remember that UpdatePanel contents are recreated on partial postback, and if this happens the modal gets destroyed and can no longer be controlled so you must not update the UpdatePanel that wraps the modal itself. This will leave the page with no modal but still with the grey backdrop making the page unusable.

In my example, I have an UpdatePanel wrapped around Button2 which is used to close the modal.

What if you want some other part of the page to update based on an action inside the modal or when the modal is closed? You need to have an UpdatePanel wrapping the other content you want to update and in your server-side code you must manually force an update to both (or more) UpdatePanels.

Let's change the above code so that when the modal is clicked it updates a Label control in another UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<div>
			<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
		<div>
	</ContentTemplate>
</asp:UpdatePanel>

protected void Button2_Click(object sender, EventArgs e)
{
	Label1.Text += "Modal closed. ";

	ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "Modal1_hide", "$(function(){$('#" + Modal1.ClientID + "').modal('hide');});", true);

	UpdatePanel2.Update();
	UpdatePanel3.Update();
}

Note that this applies to both Bootstrap v3.x and v4.x.

Custom error pages for ASP.NET Web Forms and Classic ASP in IIS 7 and 8.5

2019-02-20T12:00:00+10:00

I was recently doing some work on a website which has a mixture of older Classic ASP pages and ASP.NET Web Forms pages. The website is running on IIS 8.5 and .NET framework 4.x.

The website has some code that sent email notifications of any Classic ASP server errors, but nothing for .NET errors. It also has custom 404 and 500 error pages for Classic ASP but nothing for ASP.NET.

I attempted to create some custom error pages and email notification for .NET but ran into some troubles along the way.

Here's what you need to do and some of the things that can go wrong.

httpErrors element

This is under system.webServer in the web.config file and is used for non-aspx pages.

Here you can set your custom 404 page not found errors for Classic ASP and other non-aspx pages, like images or folders.

You can also set your custom error pages for 500 internal server errors.

My Classic ASP error email notification code is in the custom 500 error page (coded in Classic ASP of course). One problem I came across here was that Server.GetLastError was not reporting any error. I found that you must specify the 100 subStatusCode of the 500 error here to get the details of the error with Server.GetLastError.

Here's a sample of this section from my working web.config:

<system.webServer>
	<httpErrors errorMode="Custom">
		<remove statusCode="404" subStatusCode="-1" />
		<error statusCode="404" prefixLanguageFilePath="" path="/_Error404.aspx" responseMode="ExecuteURL" />
		<remove statusCode="500" subStatusCode="100" />
		<error statusCode="500" subStatusCode="100" prefixLanguageFilePath="" path="/_Error500.asp" responseMode="ExecuteURL" />
	</httpErrors>
</system.webServer>

Note that I use an aspx page for my custom 404 error page so I only need one for all 404 errors, but I have a asp page for my custom 500 error page so I can send email notifications.

customErrors element

This is under system.web in the web.config and is used for aspx pages.

Here's a sample from my working web.config:

<system.web>
	<customErrors mode="On" redirectMode="ResponseRewrite">
		<error statusCode="404" redirect="/_Error404.aspx" />
	</customErrors>
</system.web>

Note that I only trap for 404 errors for aspx page requests here.

Setting the redirectMode to ResponseRewrite means that the user does not get redirected to the custom error pages. However, one problem that I ran into with this setting is that my aspx custom 404 error page didn't show, I just saw an application error. The problem is that Session is not available if you use ResponseRewrite so you must not attempt to access the Session object in your custom error page.

Trapping 500 internal server errors for aspx pages

You could trap these errors also in the customErrors element but I chose to do this instead in the global.asax page.

I send my email error notification then use Server.Transfer to show the custom 500 error page, like this:

void Application_Error(object sender, EventArgs e)
{
	//error notification code here

	Server.Transfer("/_Error500.aspx");
}

Notes about custom 500 error pages

It should be obvious but your custom 500 error pages should not include any code that might cause an error itself, or at least it should be handled properly.

For this reason I generally use a very simple custom 500 error page with no database calls. I don't use my website's MasterPage as that usually has code for things like logged-in user, or shopping cart lookups that might result in errors.

If you're sending email notifications it's also a good idea to handle mail sending errors in case your mail server is down. That way the user still sees your friendly error message.

Custom 404 errors don't have this problem (except for the abovementioned Session object issue) so can be rich in content and have full functionality. In fact it's good practice to make your custom 404 error pages as helpful as possible: attempt to offer an alternate page that you think matches the user's original request; briefly explain what your website is all about; and, offer a next relevant step for the user so that hopefully they don't leave your site.

Nicer localised UpdateProgress’ for your ASP.NET pages with multiple UpdatePanels

2018-02-09T12:00:00+10:00

On an ASP.NET Web Forms page with multiple UpdatePanels it’s nice to give the user some feedback when one of the panels is being updated, so they know to wait and can also not change any form values in that panel during the update.

In my example screen capture on this page, you can see that the delivery address is being updated and it is greyed out, yet other parts of the page are unaffected.

This is easy to accomplish using an UpdateProgress for each UpdatePanel and some CSS.

Mark up

Inside each UpdatePanel we need to add an outer DIV (required so that inner elements can be positioned relatively), and then an UpdateProgress with a DIV that is used to block input and create the effect of the area being greyed out.

Optionally we can add an AJAX loader animated GIF to show the user something is going on. This requires a second DIV inside the UpdateProgress.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<div class="update-panel">
			<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
				<ProgressTemplate>
					<div class="update-progress-gif"></div>
					<div class="update-progress"></div>
				</ProgressTemplate>
			</asp:UpdateProgress>

			<!--- your content here --->

		</div>
	</ContentTemplate>
</asp:UpdatePanel>

CSS

The CSS for “update-progress-gif” is only required if adding a AJAX loader image, and the URL would need to be adjusted based on the image file name and location.

I like the free AJAX loader images at www.ajaxload.info.

.update-panel {
	position: relative;
}

.update-progress {
	background: #fff;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	opacity: .8;
	filter: alpha(opacity=80);
	zoom:1;
	z-index:9998;
}

.update-progress-gif {
	background: url(/images/ajax-loader.gif) top left no-repeat;
	position: absolute;
	top: 50%;
	width: 50%;
	left: 50%;
	height: 50%;
	z-index:9999;
}

Note that if you have nested UpdatePanels then you should include the UpdateProgress only on the outer UpdatePanel otherwise you will get multiple UpdateProgress controls appearing simultaneously.

ASP.NET Web Forms and Bootstrap 3 and 4 Modals

2017-07-06T12:00:00+10:00

Update: this technique including CSS works without any changes for Bootstrap 4.0 too!

There are a few methods for hiding and showing Bootstrap 3.x modals in an ASP.NET Web Forms application, including a client script method I mentioned in a previous post.

This technique is pure ASP.NET (requires no client script) and allows you to show and hide modals by changing the Visible property of a containing PlaceHolder or Panel.

The advantage over this method over using client script and the native Bootstrap methods is that the modal will not be affected by full or partial postbacks and will be fully controlled by server-side ASP.NET.

A few new CSS classes are needed for this method:

.modal-static-backdrop {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background:#000;
	height:100%;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	z-index:2000;
}

.modal-static {
	bottom: auto;
	display:block !important;
	position:absolute;
	z-index:2001;
}

The Bootstrap modal itself needs a few tweaks:

<asp:PlaceHolder ID="ModalPlaceHolder" runat="server" Visible="false">
	<div class="modal-static-backdrop"></div>
	<div class="modal modal-static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<asp:LinkButton ID="btnModalCloseHeader" runat="server" CssClass="close" OnClick="btnModalClose_Click"><span aria-hidden="true">×</span></asp:LinkButton>
					<h4 class="modal-title">Sample Modal</h4>
				</div>
				<div class="modal-body">
					<p>My modal content</p>
				</div>
				<div class="modal-footer">
					<asp:LinkButton ID="btnModalCloseFooter" runat="server" CssClass="btn btn-primary" OnClick="btnModalClose_Click" Text="Close"></asp:LinkButton>
				</div>
			</div>
		</div>
	</div>
</asp:PlaceHolder>

Then to control showing and hiding of the modal you can just set the Visible property of the placeholder, eg:

ModalPlaceHolder.Visible = true; //or false to hide it

In my example above, the modal is closed using either of the buttons in the header and footer which reference a btnModalClose_Click event which simply sets the PlaceHolder's Visible property to false.

Note that you should not use any of Bootstrap's own decoration of elements, eg. data-dismiss="modal" otherwise you could lose server-side control of the modal.

Also note that the modal should be positioned outside of any element that has a CSS 'position' set, otherwise the modal will appear relative to that element. It is best to move your modals out to just within the BODY CSS element.

Put the PlaceHolder (or whatever containing control you use) inside an UpdatePanel and the modal will show and hide without a full postback.

Update: Be aware that the modal will always display at the top of the page, but the user may be scrolled further down the page. You should take steps to scroll to the top of the page when showing a modal.

If the modal is inside an UpdatePanel then you can use something like the following code when showing your modal.

ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "UpdatePanel1StartupScript", "setTimeout('window.scrollTo(0,0)', 0);", true);

Disable common UpdateProgress controls for an UpdatePanel with an associated UpdateProgress

2017-04-12T12:00:00+10:00

If you have an ASP.NET Web Forms page with multiple UpdatePanels and multiple UpdateProgress controls, sometimes you may want one or more UpdateProgress controls associated with a specific UpdatePanel, and one or more UpdateProgress controls that have no association with an UpdatePanel so are shown when any UpdatePanel is updated.

However, to me it makes sense that if an UpdatePanel has an associated UpdateProgress control, then any other UpdateProgress controls should not be displayed.

Unfortunately this is not how it works in ASP.NET. All unassociated UpdateProgress controls will be displayed, even if there is an associated UpdateProgress.

If you want to override how it works by default, and instead not display UpdateProgress controls if an UpdateProgress control exists that is associated with the UpdatePanel that triggered the update, then the following client-side script can be used.

The script should be placed or included after the ASP.NET ScriptResource.axd files are included. It's safe to place or include this script after the closing ASP.NET tag.

Note that this script will not function if a partial post back is triggered by a control outside of any UpdatePanel. You could modify the script to accommodate this if needed.

 <script type="text/javascript">

	//array of original values
	var updateProgressDefaults = [];

	Sys.Application.add_init(appl_init);

	function appl_init() {

	 	var c = Sys.Application.getComponents();
	 	for (var i = 0; i < c.length; i++) {
	 		if (Object.getType(c[i]).getName() == "Sys.UI._UpdateProgress" && !c[i]._associatedUpdatePanelId) {
	 			updateProgressDefaults[c[i].get_id()] = c[i]._associatedUpdatePanelId;
	 		};
	 	}

	 	var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
	 	pgRegMgr.add_initializeRequest(BeginHandler);
	 	pgRegMgr.add_endRequest(EndHandler);
	}

	function BeginHandler(sender, args) {
		//There is no _updatePanelsToUpdate if a trigger is outside of an UpdatePanel
		if (!args._updatePanelsToUpdate) return;

		//Check if the affected UpdatePanel has an associated UpdateProgress control
		var hasUpdateProgress = false;

	 	var c = Sys.Application.getComponents();
	 	for (var i = 0; i < args._updatePanelsToUpdate.length; i++) {
	 		for (var j = 0; j < c.length; j++) {
	 			if (Object.getType(c[j]).getName() == "Sys.UI._UpdateProgress" && args._updatePanelsToUpdate[i].replace(/$/g, "_") == c[j]._associatedUpdatePanelId) {
	 				hasUpdateProgress = true;
	 				break;
	 			}
	 		}

	 		if (hasUpdateProgress) break;
	 	}

		//If the UpdatePanel has an associated UpdateProgress control then set all the UpdateProgress controls without associated UpdatePanels to a non-existant UpdatePanel
	 	if (hasUpdateProgress) {
	 		for (var i = 0; i < c.length; i++) {
	 			var id = c[i].get_id();
	 			var type = Object.getType(c[i]).getName();
	 			if (type == "Sys.UI._UpdateProgress" && !c[i]._associatedUpdatePanelId) {
	 				c[i]._associatedUpdatePanelId = "NullUpdateProgress";
	 			};

	 		}
	 	}
	}

	//Restores AssociatedUpdatePanelId for all UpdateProgress controls
	function EndHandler() {
	 	for (var key in updateProgressDefaults) {
	 		$get(key).control._associatedUpdatePanelId = updateProgressDefaults[key];
	 	}
	}
</script>

Bootstrap checkbox-inline and radio-inline with ASP.NET CheckBoxList and RadioButtonList controls

2016-06-20T12:00:00+10:00

Update: This applies to Bootstrap 3. See update at end for Bootstrap 4.

Although you can easily create inline checkboxes and radio buttons using ASP.NET CheckBoxes and RadioButtons using Bootstrap's checkbox-inline and radio-inline classes, it's not so easy with ASP.NET CheckBoxList and RadioButtonList controls.

There's probably several ways of emulating the Bootstrap inline styling using these ASP.NET controls, this is how I have been doing it.

Additional CSS classes:

.checkboxlist-inline li, .radiobuttonlist-inline li
{
	display:inline-block;
}

.checkboxlist-inline, .radiobuttonlist-inline
{
	margin-left: 20px;
}

.checkboxlist-inline label, .radiobuttonlist-inline label
{
	padding-left:0;
	padding-right:30px;
}

Then your ASP.NET controls will need some CSS classes applied, and some special attributes:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="list-unstyled checkbox checkboxlist-inline" RepeatDirection="Vertical" RepeatLayout="UnorderedList"></asp:CheckBoxList>

<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="list-unstyled radio radiobuttonlist-inline" RepeatDirection="Vertical" RepeatLayout="UnorderedList"></asp:RadioButtonList>

As you can see, I use the UnorderdedList layout and then change the styling of the LI elements to inline-blocks. By using the Bootstrap checkbox/radio classes combined with the list-unstyled we get a result very similar to the native Bootstrap styling.

Update for Bootstrap 4:

Here are the CSS changes for Bootstrap 4.x.

.checkboxlist-inline li, .radiobuttonlist-inline li
{
	display: inline-flex;
			
	align-items: center;
	padding-left: 0;
	margin-right: .75rem;

	position: relative;
}

.checkboxlist-inline li input, .radiobuttonlist-inline li input
{
	position: static;
	margin-top: 0;
	margin-right: .3125rem;
	margin-left: 0;
}

.checkboxlist-inline li label, .radiobuttonlist-inline li label {
	margin-bottom: 0;
}

And here is how your RadioButtonList should be marked up:

<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="list-unstyled radiobuttonlist-inline" RepeatLayout="UnorderedList"></asp:RadioButtonList>

Page.Title is blank in MasterPage after setting in ASPX page

2016-06-08T12:00:00+10:00

I came across an issue where I was setting Page.Title in my ASPX page's Page_Load event, but it was appearing blank when I was attempting to retrieve the value in the MasterPage's Page_PreRender event.

Thanks to a comment on this blog post, I found the solution.

Here's what the anonymous comment said:

I ran into this problem as well. Looked in Reflector and figured out why. Seems like this is a bug to me. On the setter, if the page has a Header control, then setting the Title property actually changes Header.Title, but if the _titleToBeSet property already has a value (mine does because I'm using localized resources) then it doesn't clear out the old value and the getter still returns _titleToBeSet instead of Header.Title.

So I just changed my code to return this:
return (Page.Header != null ? Page.Header.Title : null) ?? Page.Title;

So the solution is to use the following instead of Page.Title:

(Page.Header != null ? Page.Header.Title : null) ?? Page.Title;

Bootstrap Modals inside UpdatePanels in ASP.NET Web Forms

2015-07-14T12:00:00+10:00

Update: I'm now using a purely server-side technique to control Bootstrap 3.x modals. See my new post.

I have been working on an ASP.NET Web Forms project that is being converted to Bootstrap 3 and have run into a few issues with Modals.

From this experience, here's how you can structure your markup for when you need to use Bootstrap Modals inside ASP.NET UpdatePanels.

The most important part of this is that you don't place Modals inside UpdatePanels.

Okay, so that contradicts a bit with what I said above, but I'm not suggesting you don't use UpdatePanels, just that you place them appropriately.

Bootstrap Modals don't work when the relevant parts of the DOM are altered after the page is initially rendered. This makes them a bit more difficult to implement in an ASP.NET Web Forms environment.

Let's look at an example where we have a list of records generated by a Repeater, each having an edit button which opens a Modal where the record can be edited.

I would wrap an UpdatePanel around the table, have the Modal outside of this UpdatePanel, but have a second UpdatePanel inside the Modal.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<ul>
			<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
				<ItemTemplate>
					<li><asp:LinkButton ID="Button1" runat="server" CommandArgument='<%# Eval("ID") %>' Text='<%# Eval("Title") %>'></asp:LinkButton></li>
				</ItemTemplate>
			</asp:Repeater>
		</ul>
	</ContentTemplate>
</asp:UpdatePanel>

<asp:Panel ID="Panel1" runat="server" CssClass="modal" DefaultButton="btnContactInsertSubmit" tabindex="-1" role="dialog" aria-labelledby="myLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
				<ContentTemplate>
					<div class="modal-header">
						<h4 class="modal-title" id=" myLabel ">Edit</h4>
					</div>
					<div class="modal-body">
						...
					</div>
					<div class="modal-footer">
						<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" OnClick="Button2_Click" Text="Submit" />
						<asp:LinkButton ID="Button3" runat="server" CssClass="btn btn-link" OnClick="Button3_Click" Text="Cancel"></asp:LinkButton>
					</div>
				</ContentTemplate>
			</asp:UpdatePanel>
		</div>
	</div>
</asp:Panel>

In the code behind we can handle the showing and hiding of the Modal by injecting some JavaScript on asynchronous PostBack, and selectively updating only the appropriate UpdatePanel.

protected void repContact_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
	int id = Utilities.IntParse(e.CommandArgument.ToString());
//Populate your form inside the Modal here
ScriptManager.RegisterStartupScript(UpdatePanel2, UpdatePanel2.GetType(), "show", "$(function () { $('#" + Panel1.ClientID + "').modal('show'); });", true);
UpdatePanel2.Update();
}

protected void Button3_Click(object sender, EventArgs e)
{
	ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "hide", "$(function () { $('#" + Panel1.ClientID + "').modal('hide'); });", true);
	UpdatePanel1.Update();
}

protected void Button2_Click(object sender, EventArgs e)
{
	//Save your record here
	ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "hide", "$(function () { $('#" + Panel1.ClientID + "').modal('hide'); });", true);
	UpdatePanel1.Update();
}

This solution has worked perfectly for me even in complex Web Forms scenarios.

Update: I'm now using a purely server-side technique to control Bootstrap 3.x modals. See my new post.

Bootstrap styling for ASP.NET RadioButtonList and CheckBoxList in Horizontal Forms

2015-07-13T12:00:00+10:00

Following on from my last post about improving Bootstrap styling and accessibility for ASP.NET RadioButtonLists and CheckBoxLists, Better styling and accessibility for ASP.NET controls using Bootstrap 3, in this post I offer a solution for styling these controls within Bootstrap horizontal forms.

This example below uses the same CSS changes as my last post, but with a revised HTML structure to suit Bootstrap's form-horizontal classes.

<div class="form-horizontal">
	<fieldset class="form-group">
		<legend class="col-sm-3 control-label">Label for CheckBoxList1</legend>
		<div class="checkbox checkboxlist col-sm-9">
			<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
				<asp:ListItem Text="Option one"></asp:ListItem>
				<asp:ListItem Text="Option two"></asp:ListItem>
				<asp:ListItem Text="Option three"></asp:ListItem>
			</asp:CheckBoxList>
		</div>
	</fieldset>
	<fieldset class="form-group">
		<legend class="col-sm-3 control-label">Label for RadioButtonList1</legend>
		<div class="radio radiobuttonlist col-sm-9">
			<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
				<asp:ListItem Text="Option one"></asp:ListItem>
				<asp:ListItem Text="Option two"></asp:ListItem>
				<asp:ListItem Text="Option three"></asp:ListItem>
			</asp:RadioButtonList>
		</div>
	</fieldset>
</div>

And here's what this looks like:

Better styling and accessibility for ASP.NET controls using Bootstrap

2015-07-10T12:00:00+10:00

Update: This applies to Bootstrap 3.x. See the update at the end of the article for Bootstrap 4.

Using some ASP.NET Web Forms controls with Bootstrap raises a few issues due to the markup that ASP.NET produces. There is also some accessibility issues with Bootstrap.

Styling

If you have used a RadioButtonList or CheckBoxList with Bootstrap you would have seen that these do not get styled correctly.

Accessibility

From my research, if you need to add a label to a RadioButtonList, CheckBoxList, or group of RadioButtons or CheckBoxes then you should use a fieldset with a legend.

Sample

The following sample ASP.NET markup illustrates the styling issues when the correct structure is used.

<div class="form-group">
	<asp:Label runat="server" AssociatedControlID="TextBox1" Text="Label for TextBox"></asp:Label>
	<asp:TextBox ID="TextBox1" runat="server" CssClass="form-control"></asp:TextBox>
</div>

<div class="form-group">
	<asp:Label runat="server" AssociatedControlID="DropDownList1" Text="Label for DropDownList"></asp:Label>
	<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control">
		<asp:ListItem Text="Option one"></asp:ListItem>
		<asp:ListItem Text="Option two"></asp:ListItem>
		<asp:ListItem Text="Option three"></asp:ListItem>
	</asp:DropDownList>
</div>

<fieldset>
	<legend>Label for CheckBox</legend>
	<div class="checkbox">
		<label>
			<asp:CheckBox ID="CheckBox1" runat="server" />
			Option one
		</label>
	</div>
	<div class="checkbox">
		<label>
			<asp:CheckBox ID="CheckBox2" runat="server" />
			Option two
		</label>
	</div>
	<div class="checkbox">
		<label>
			<asp:CheckBox ID="CheckBox3" runat="server" />
			Option three
		</label>
	</div>
</fieldset>

<fieldset>
	<legend>Label for CheckBoxList</legend>
	<div class="checkbox checkboxlist">
		<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
			<asp:ListItem Text="Option one"></asp:ListItem>
			<asp:ListItem Text="Option two"></asp:ListItem>
			<asp:ListItem Text="Option three"></asp:ListItem>
		</asp:CheckBoxList>
	</div>
</fieldset>

<fieldset>
	<legend>Label for RadioButton</legend>
	<div class="radio">
		<label>
			<asp:RadioButton ID="RadioButton1" runat="server" GroupName="GroupName1" />
			Option one
		</label>
	</div>
	<div class="radio">
		<label>
			<asp:RadioButton ID="RadioButton2" runat="server" GroupName="GroupName1" />
			Option two
		</label>
	</div>
	<div class="radio">
		<label>
			<asp:RadioButton ID="RadioButton3" runat="server" GroupName="GroupName1" />
			Option three
		</label>
	</div>
</fieldset>

<fieldset>
	<legend>Label for RadioButtonList</legend>
	<div class="radio radiobuttonlist">
		<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
			<asp:ListItem Text="Option one"></asp:ListItem>
			<asp:ListItem Text="Option two"></asp:ListItem>
			<asp:ListItem Text="Option three"></asp:ListItem>
		</asp:RadioButtonList>
	</div>
</fieldset>

And here's what that looks like:

CSS changes to correct this

Note in my markup above I already added classes checkboxlist and radiobuttonlist that will be used to apply styling to these controls.

Here's my CSS additions that override Bootstrap's defaults.

.radio.radiobuttonlist input[type="radio"],
.checkbox.checkboxlist input[type="checkbox"]
{
	margin-left: 0;
}

.radio.radiobuttonlist label,
.checkbox.checkboxlist label
{
	margin-bottom: 4px;
	margin-left: 0;
}

fieldset legend
{
	border: 0;
	font-size: inherit;
	font-weight: 700;
	margin-bottom: 0;
}

fieldset .radio,
fieldset .checkbox
{
	margin-top: 4px;
}

And here's what my sample markup looks like now:

For Bootstrap Horizontal Forms, see my other post, Bootstrap styling for ASP.NET RadioButtonList and CheckBoxList in Horizontal Forms.

Update: For Bootstrap 4.x, you can use the following CSS.

.radio.radiobuttonlist input[type="radio"],
.checkbox.checkboxlist input[type="checkbox"]
{
	position: absolute;
	margin-top: 0.3rem;
	margin-left: -1.25rem;
}

.radio.radiobuttonlist label,
.checkbox.checkboxlist label
{
	margin-bottom: 0;
	display: inline-block;
}

fieldset legend
{
	font-size: inherit;
}

fieldset .radio,
fieldset .checkbox
{
	position: relative;
	display: block;
	padding-left: 1.25rem;
}

Navigate away protection for ASP.NET Web Forms

2015-05-20T12:00:00+10:00

I have wanted to add protection from vavigating away from some of my web forms but most of the solutions I have seen do not work well with ASP.NET with it's many possible ways of posting back and AJAX using Update Panels.

For my situation I wanted to protect against the user navigating away using the website's main navigation, closing the browser, clicking back or forward or even going to a favourite website. I did not want to protect against the user clicking any Button, Link Button or any control with AutoPostBack enabled within my form.

After a Stack Overflow question and investigation of many possible solutions I have created the following JavaScript/jQuery code that does this better than anything I found.

Please note that this code does not check whether any changes were made to the values in the form, although this functionality could be added easily. In my situation I wanted to protect against navigating away because my system had a form of record locking in place that required the user to exit correctly (or wait for lock to timeout).

var navigateAway = function (e) {
	e = e || window.event;

	//This is the message that is shown when navigating away improperly
	var message = "Exiting the form this way will result in this record being locked to you. Use cancel changes instead to exit correctly";

	if (e) {
		e.returnValue = message;
	}

	return message;
}

function EnableUnloadEvent() {
	window.onbeforeunload = navigateAway;
}

$(function () {
	$("#myform select").change(function () {
		window.onbeforeunload = null;
		window.setTimeout("EnableUnloadEvent()", 100);
	});

	$("#myform").click(function (e) {
		window.onbeforeunload = null;
		window.setTimeout("EnableUnloadEvent()", 100);
	});

	EnableUnloadEvent();
});

#myform refers to the ID of the container (eg. DIV) that contains all of your form elements that can be clicked or changed without triggering the unload message. Anything outside of this container will trigger the message.

Should you want to only show the message if one or more of the form elements anywhere on the page have been changed, you could add functionality to store the initial values, then compare these in the unload event (some code sourced from Code Project). Note that if you have anything on your page that causes a full PostBack (rather than a partial PostBack) it will set and compare the initial values from the most recent PostBack, so won't be accurate.

var initialValue = "";

var navigateAway = function (e) {

	if (initialValue != GetFormValues()) {

		e = e || window.event;

		var message = "Exiting the form this way will result in this record being locked to you. Use cancel changes instead to exit correctly";

		if (e) {
			e.returnValue = message;
		}

		return message;
	}
}

function EnableUnloadEvent() {
	window.onbeforeunload = navigateAway;
}

function GetFormValues() {
	var formValues = "";
	$.each($("form").serializeArray(), function (i, field) {
		if (field.name != "__EVENTVALIDATION"
		&& field.name != "__EVENTTARGET"
		&& field.name != "__EVENTARGUMENT"
		&& field.name != "__VIEWSTATE"
		&& field.name != "__VIEWSTATEENCRYPTED") {

			var inputField = $("[name=" + field.name + "]");
			var displayProperty = $(inputField).css("display");

			if (displayProperty != "none") {
				formValues = formValues + "-" + field.name + ":" + field.value;
			}
		}
	});

	$(":checkbox").each(function () {
		formValues = formValues + "-" + $(this).attr("checked");
	});

	$(":radio").each(function () {
		formValues = formValues + "-" + $(this).attr("checked");
	});

	$(":file").each(function () {
		formValues = formValues + "-" + $(this).val();
	});
	return formValues;
}

$(function () {

	initialValue = GetFormValues();

	$("#form select").change(function () {
		window.onbeforeunload = null;
		window.setTimeout("EnableUnloadEvent()", 100);
	});

	$("#form").click(function (e) {
		window.onbeforeunload = null;
		window.setTimeout("EnableUnloadEvent()", 100);
	});

	EnableUnloadEvent();
});

My latest project: Ghost Tour Bookings

2015-04-04T12:00:00+10:00

My latest web project is Ghost Tour Bookings, a website where ghost tours are advertised and people can make enquiries or book the tour.

The website is hosted by Smarter ASP and is developed using ASP.NET Web Forms.

For speed of development, and to keep costs low, the website uses Bootstrap 3 for basic design and responsive capabilities. The logo and some images used on the website were created by freelancers on freelancer.com and were of very good quality yet very inexpensive.

Although the website is presently only listing ghost tours within Australian it is designed to be an international website and supports multiple domains where available, or a simple URL structure for countries where no country-specific domain is used.

As all countries will be hosted on the one hosting plan with a single IP address. Subsequently, where SSL is required, the website only has one SSL certificate so reverts to the primary (.com) domain with country code as part of the URL structure for all SSL requests.

ASP.NET routing is used for URL rewriting with most pages being routed to a main page where the URL is analysed and the requested page created by dynamically adding the appropriate user control for the page.

The website uses an ASP.NET master page but to enhance performance and minimise data traffic an ASP.NET form tag is only added when necessary.

ASP.NET Update Panels are used for AJAX on ASP.NET forms, otherwise jQuery is used for other AJAX functionality.

The website uses all of the principles from my user account security post, Best practices for membership systems, login pages and password resets.

Can't change the Visible property of a control in ASP.NET Web Forms?

2015-03-23T12:00:00+10:00

If you come across a problem where you set the Visible property of an ASP.NET control to true in a code behind file, but even when you debug it still shows the value as being false then the problem is most likely to be that the control is inside another control such as a Panel or PlaceHolder that has its Visible property set to false.

It appears that the Visible property can be a little confusing. It has certainly tripped me up more than once.

When a value is set for this property it will be remembered. So if you set Visible to true or false for a control that is within another control that is set to not be visible, if you later set that container control to be visible the control within it will then be visible or not visible depending on what value you set.

However, when you get the value for the Visible property, you are actually getting the current visibility of the control, and if a container control is not visible then of course the control within will also not be visible, no matter whether you have set it to visible or not.

To avoid problems it is best not to use the Visible property for certain conditional logic. Please see the example below for what not to do and how to do it correctly.

Incorrect:

btnSubmit.Visible = someValue == 1;
If (btnSubmit.Visible)
{
    //some code here
}

Correct:

btnSubmit.Visible = someValue == 1;
If (someValue == 1)
{
    //some code here
}

UpdatePanel in incomplete state after using browser's back button

2015-01-27T12:00:00+10:00

I recently experienced an issue with an ASP.NET Web Forms page with various UpdatePanels. The page has two DropDownLists, the selection of one results in populating of possible values in the other, and the selection of the other results in enabling of a Button. Then if the Button is clicked the user is redirected to another website, based on their selection.

The problem is after the redirect to the other website, if the user then goes back to the original page, the first DropDownList is in its last state, but the second DropDownList is empty and to continue they must either select away from their last choice in the first DropDownList or refresh the page.

Ideally I would like to return the page and all controls to their last state, or make the page reset to as if it was accessed for the first time.

The ScriptManager history functionality could probably be used for this purpose, but a simple solution that worked for me was to disable all caching of the page, which results in the page being reset.

The following code might be a bit of overkill but does the job:

Response.Expires = 0;
Response.ExpiresAbsolute = DateTime.Now.AddYears(-2);
Response.AddHeader("pragma", "no-cache");
Response.AddHeader("cache-control", "private");
Response.CacheControl = "no-cache";
Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();

The answer came from this answer on ASP.NET forums.