S#arp Architecture WCF Gotcha

We’ve recently adopted the excellent S#arp Architecture for our projects. I highly recommend taking a look at the project site.

On Friday I created a simple WCF service using S#arp’s Northwind sample site for  reference.

Using WcfTestClient I located my service and attempted to test one of the methods, only to get the following error.

Could not load file or assembly ‘Castle.Windsor, Version=1.0.3.0, Culture=neutral, PublicKeyToken=407dd0808d44fbdc’ or one of its dependencies. The system cannot find the file specified.

I looked for the usual suspects (rogue entries in the GAC, searching the c:\ drive for instances of Castle.Windsor) but couldn’t find the problem.

Eventually I discovered this code in the sample site’s web.config.

1. <runtime>
2.   <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
3.     <dependentAssembly>
4.       <assemblyIdentity name="Castle.Windsor" publicKeyToken="407dd0808d44fbdc" culture="neutral"/>
5.       <bindingRedirect oldVersion="0.0.0.0-65535.65535.65535.65535" newVersion="2.0.0.0"/>
6.     </dependentAssembly>
7.   </assemblyBinding>
8. </runtime>

Copying this to the web.config for my WCF service solved the problem.

ASP.NET and JQuery MVC Menu Part 2

Other posts in this series:

• Part 1
• Part 3 (AJAX)

Slow progress is still progress don’t yer know

First off, I can only apologise for the decades which have passed since I put up part one of this post, as it happens part two is extremely straightforward.

To briefly recap part one, we introduced several helper methods that enabled us to render a site menu using unordered lists. We extended the helper methods to detect the current page and give the matching anchor’s parent li tag a specific class (“current”).

Having implemented part one, you should get rendered html similar to this…

1. <ul class=”menu collapsible” id=”main-menu”>
2.     <li class=”current”>
3.         <a href=”/”>Home</a>
4.     </li>
5.     <li>
6.         <a href=”/Home/About”>About</a>
7.     </li>
8.     <li>
9.         <a href=”/MoreInfo”>More Information</a>
10.         <ul>
11.             <li>
12.                 <a href=”/MoreInfo/CompanyHistory”>Company History</a>
13.             </li>
14.         </ul>
15.     </li>
16. </ul>

Lets say we now want to hide certain elements of the menu. For example the menu above looks like this in the browser (albeit not yet formatted using CSS)…

We want to make More Information expandable. Specifically it will be collapsed to start with, then when the user clicks the link it expands to reveal Company History.

To achieve this we can use JQuery and in the spirit of not reinventing the wheel we can use a rather neat little script by Marco van Hylckama Vlieg.

The script is aptly named Simple JQuery Menu and does exactly what we want, with the added touch of animating the menus.

 

You can read up on the script at Marco’s blog but for our purposes, all you need to do is go to the demo page and download the script.

 

It seems Marco’s blog has gone down, however fear not you can grab the source code (script and example) from here.

Copy the script into your Scripts folder, reference it on you page (probably Site.Master if your menu appears on every page) and voila your menu takes on a life of it’s own.

If you break down Marco’s script you’ll see that JQuery’s simple approach to manipulating html/css makes implementing a menu like this fairly straightforward.

The final step is to prettify your menu using css, an example file is included in the download from Marco’s site.

Minor improvement

There is one small weakness in Marco’s script. If you click on Company History in this example, you will find you go to the Company History page but the menu is collapsed. Personally I would prefer the menu be expanded so you can see the page you’re currently on in the menu.

To achieve this effect, we need to make a small addition to the script…

1. // add this to the existing script
3. $(‘li.current ul’).show();
4. $(‘li.current’).parent().show();

Insert this code before the $(‘ul.menu li a’).click handler and now the More Information menu will be expanded when you’re on the Company History page.

Clean and Lean

Hopefully this two-part post has demonstrated how the control which MVC gives you over your html enables you to use existing techniques and frameworks (e.g. JQuery) to enhance your site whilst keeping clean lean html and javascript.

Download this simple demo project here.

ASP.NET and JQuery MVC Menu Part 1

Other posts in this series:

• Part 2
• Part 3 (AJAX) 

One of the key differences between ASP.NET Web forms and ASP.NET MVC is that WebForms contained many controls which you could use on your web pages and MVC doesn’t.

Not that this is a bad thing, the difficult thing about WebForms was the horrendous html they generated and the hoops you had to go through to gain fine control over them.

In this series of posts I will describe how to create a fully functional Menu using Html, JQuery and some C# Helper Methods.

Part 1 – Creating an MVC Menu

Creating a menu in MVC is actually pretty straightforward once you realise you’re going to have to do some of the dirty work yourself.

Start with a standard Unordered List.

1. <ul id="main-menu">
2.     <li>
3.         <a href="/">Home</a>
4.     </li>
5.     <li>
6.         <a href="/ContactUs">Contact Us</a>
7.         <ul>
8.             <li>
9.                 <a href="/FindUs">How to find us</a>
10.             </li>
11.         </ul>
12.     </li>
13. </ul>

Note that we have another unordered list inside the main list to create a hierarchical menu.

Now I know what you’re thinking, that’s not MVC that’s just HTML. So let’s make life easier for ourselves and introduce a helper method to render these list items for us.

1. public static string ListItem(this HtmlHelper helper, string linkText, string actionName, string controllerName)
2. {
3.     TagBuilder builder = getListItem(helper, linkText, actionName, controllerName);
4.     return builder.ToString();        
5. }

Nothing fancy here, but note that we’re passing in the action and controller names. The actual work is done in the getListItem method.

1. static TagBuilder GetListItem(HtmlHelper helper, string linkText, string actionName, string controllerName)
2. {
3.     var linkHtml = HtmlHelper.GenerateLink(helper.ViewContext.RequestContext, helper.RouteCollection, linkText, null, actionName, controllerName, null, null);
4.  
5.     var builder = new TagBuilder("li");
6.  
7.     var isCurrent = IsCurrentAction(helper, actionName, controllerName);
8.  
9.     if (isCurrent)
10.     {
11.         builder.MergeAttribute("class", "current");
12.     }
13.  
14.     builder.InnerHtml = linkHtml;
15.     return builder;
16. }

This is where the fun starts (honestly!).

1. First off we generate a link for the specified action and controller. This will work with whatever routing you have set up and generate a link to the action.
2. We create a new TagBuilder to render our list item
3. We’ll look at the IsCurrentAction method next, it checks if the specified action/controller is the one currently being presented to the user
4. If this is the current Action then set the list item’s class to “current”
5. Put the link inside the li tag

IsCurrentAction is pretty straightforward too…

1. static bool IsCurrentAction(HtmlHelper helper, string actionName, string controllerName)
2.         {
3.             string currentControllerName = (string) helper.ViewContext.RouteData.Values["controller"];
4.             string currentActionName = (string) helper.ViewContext.RouteData.Values["action"];
5.  
6.             if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
7.                 currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
8.             {
9.                 return true;
10.             }
11.  
12.             return false;
13.         }

So how would you use your new helper methods?

1. <ul id="main-menu" class="menu collapsible">
2.     <%= Html.ListItem("Home", "Index", "Home") %>
3.     <%= Html.ListItem("Contact Us", "Index", "ContactUs") %>
4. </ul>

This will render the list items and put a class=”current” attribute on the one for the page currently being viewed.

Now an obvious problem with this approach is that you can’t embed sub menus (ULs within LIs). The way around this is to mimic the MVC framework itself and introduce new BeginListItem and EndListItem methods (ASP.NET MVC has BeginForm and EndForm).

1. public static string BeginListItem(this HtmlHelper helper, string linkText, string actionName,string controllerName)
2. {
3.     string result;
4.  
5.     TagBuilder builder = GetListItem(helper, linkText, actionName, controllerName);
6.     result = builder.ToString(TagRenderMode.StartTag);
7.     result += builder.InnerHtml;
8.  
9.     return result;
10. }

This opens the li tag. The EndListItem method closes it.

1. public static void EndListItem(this HtmlHelper helper)
2.         {
3.             HttpResponseBase httpResponse = helper.ViewContext.HttpContext.Response;
4.             httpResponse.Write("</li>");
5.         }

And we can use these methods as follows.

1. <%= Html.BeginListItem("Contact Us", "Index", "ContactUs")%>
2.     <ul>
3.         <%= Html.ListItem("Find Us", "Index", "FindUs")%>                   
4.     </ul>
5. <% Html.EndListItem(); %>

Next Time

Up next is how to spice this menu up and make it all “interactivy” using JQuery,

ASP.NET MVC Test Framework integration

One of the exciting aspects of asp.net mvc is it’s inherent support for Test Driven Devleopment.

This post outlines how to make NUnit and RhinoMocks appear as options when generating a test project during creation of a new MVC app.

http://blogs.msdn.com/webdevtools/archive/2008/03/06/asp-net-mvc-test-framework-integration-demo.aspx

And an updated post for Preview 3

http://blogs.msdn.com/webdevtools/archive/2008/05/30/asp-net-mvc-preview-3-tooling-updates.aspx