Tip: Bootstrap 3.1.1 "dropdown-submenu" Workaround

The new bootstrap navbar does not support more than 2 levels of menu. That is to say the "dropdown-submenu" css class has been removed since Bootstrap 3.0. In order to work around that issue one can add the missing piece into another css file.

Menu HTML

	<!--Third level menu-->
	<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Warranty <b class="caret"></b></a>
	<ul class="dropdown-menu">
	<li>@Html.ActionLink("SMS Registration", "Index", "SMSRegistration")</li>
	<li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Online Registration</a>
	<ul class="dropdown-menu">
	<li><a href="#">Register New Sticker</a></li>
	<li>@Html.ActionLink("Register Old Sticker", "Index", "OnlineRegistration")</li>
	</ul>
	</li>
	</ul>
	</li>

view raw bootstrap "dropdown-submenu" html hosted with ❤ by GitHub

Notice how the css class "dropdown-submenu" is used in the HTML snippet.

Menu CSS

	.dropdown-submenu {
	position: relative;
	}
	.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100% !important;
	margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px 6px;
	border-radius: 0 6px 6px 6px;
	}
	.dropdown-submenu:hover > .dropdown-menu {
	display: block !important;
	float:right !important;
	}
	.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #cccccc;
	margin-top: 5px;
	margin-right: -10px;
	}
	.dropdown-submenu:hover > a:after {
	border-left-color: #ffffff;
	}
	.dropdown-submenu.pull-left {
	float: none;
	}
	.dropdown-submenu.pull-left > .dropdown-menu {
	left: -100%;
	margin-left: 10px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;
	}

view raw bpptstrap "dropdown-submenu" hosted with ❤ by GitHub

Notice how the CSS is put in place. In certain scenario for example when we use a centered navbar, the "!important" command is important to override the Bootstrap original behavior for the third level menu to appear correctly.

Tip: Workflow Serialization Issue

In Windows Workflow 4.5, serialization of a long running process saves the workflow states (variables' value) and some other information into the database. However it's important to consider carefully the type of objects that the workflow can save. object such as EntitySet and EttityRef of LINQ2SQL by default do not support serialization into database. When try to save such objects into the database, error will be thrown by the workflow runtime:

Operation 'OperationName|IServiceContract' on service instance with identifier '899be275-01f7-45c7-a8d2-ee89595522cb' cannot be performed at this time. Please ensure that the operations are performed in the correct order and that the binding in use provides ordered delivery guarantees.

then

System.Runtime.Serialization.InvalidDataContractException: Type 'System.Data.Linq.EntitySet`1[WhateverObjectType]' cannot be serialized. Consider marking it with the DataContractAttribute attribute, and marking all of its members you want serialized with the DataMemberAttribute attribute. If the type is a collection, consider marking it with the CollectionDataContractAttribute.

See the Microsoft .NET Framework documentation for other supported types. Microsoft does describe some of the thing about LINQ2SQL serialization at Serialization [LINQ to SQL]

We tend to pass in the LINQ2SQL object into the workflow, so one way to workaround the problem is to nullify the object before the WF goes into idle mode. Use the object as a parameter passing vehicle instead of using it to store workflow state.