Tell don't ask

ASP.NET and JQuery MVC Menu Part 3 (AJAX)

telldontask — Mon, 26 Jul 2010 09:09:49 +0000

Other posts in this series:

Aaron has very kindly sent me an extension to the original code for creating a simple menu for ASP.NET MVC sites. His version employs the Microsoft AJAX library to “ajaxify” the links on the menu.

The main part of his code handles getting a List Item containing an AJAX link.

public static class Extention
    {
        public static TagBuilder GetNavItem(this AjaxHelper ajax, MolineSoftware.SLAudit.Navigation navItem)
        {
            MvcHtmlString htmlTemplate = null;
 
            if (navItem.Route == null)
            {
                htmlTemplate = 
                    ajax.ActionLink(navItem.LinkText, navItem.ActionName, navItem.Controller,
                                    new AjaxOptions
                                        {
                                            UpdateTargetId = navItem.UpdateTargetId,
                                            OnSuccess = navItem.OnSuccess,
                                            OnBegin = navItem.OnBegin
                                        });
            }
            else
            {
                htmlTemplate = 
                    ajax.ActionLink(navItem.LinkText, navItem.ActionName, navItem.Controller, navItem.Route,
                                    new AjaxOptions
                                        {
                                            UpdateTargetId = navItem.UpdateTargetId,
                                            OnSuccess = navItem.OnSuccess,
                                            OnBegin = navItem.OnBegin
                                        });
            }
 
            var builder = new TagBuilder("li");
 
            if (IsCurrentAction(ajax, navItem.ActionName, navItem.Controller))
                builder.MergeAttribute("class", "current");
 
            builder.InnerHtml = htmlTemplate.ToHtmlString();
            return builder;
        }
 
        static bool IsCurrentAction(AjaxHelper ajax, string actionName, string controllerName)
        {
            string currentControllerName = (string) ajax.ViewContext.RouteData.Values["controller"];
            string currentActionName = (string) ajax.ViewContext.RouteData.Values["action"];
 
            if (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
                currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase))
            {
                return true;
            }
            return false;
        }
    }
}

You will notice the use of a class called Navigation (to build the actual link).

public class Navigation
{
    #region | Public Properties |
 
    /// 
    /// Gets or Sets the ID
    /// 
    public virtual Int32 Id { get; set; }
 
    /// 
    /// Gets or Sets the Display for the link
    /// 
    public virtual String LinkText { get; set; }
 
    /// 
    /// Gets or Sets the ActionName.
    /// 
    public virtual String ActionName { get; set; }
 
    /// 
    /// Gets or Sets the Controller
    /// 
    public virtual String Controller { get; set; }
 
    /// 
    /// Gets or sets the Active flag.
    /// 
    public virtual Boolean Active { get; set; }
 
    /// 
    /// Gets or sets the JavaScript function to call after the page is successfully updated.
    /// 
    public virtual String OnSuccess { get; set; }
 
    /// 
    /// Gets or sets the name of the JavaScript function to call immediately before the page is updated.
    /// 
    public virtual String OnBegin { get; set; }
 
    /// 
    /// Gets or sets the ID of the DOM element to update by using the response from the server.
    /// 
    public virtual String UpdateTargetId { get; set; }
 
    /// 
    /// Gets or Sets the 
    /// 
    public virtual object Route { get; set; }
 
    #endregion
}

We can then create a collection of these navigation items…

namespace MolineSoftware.SLAudit
{
    public class NavigationList : List<Navigation>
    {
        #region | Constructor |
 
        #endregion
 
        ///Returns a NavigationList of items ** TESTING ONLY
        public NavigationList GetTestList()
        {
            NavigationList list = new NavigationList();
 
            list.Add(new Navigation
                         {
                             Active = true,
                             Controller = "Home",
                             OnBegin = "SetLoading",
                             OnSuccess = "handleUpdate",
                             Id = 1,
                             LinkText = "Home",
                             ActionName = "Index",
                             UpdateTargetId = "output-data",
                             Route = new {serverName = "MyServer"} //Example setting the route object
                         });
 
 
            list.Add(new Navigation
                         {
                             Active = true,
                             Controller = "Home",
                             OnBegin = "SetLoading",
                             OnSuccess = "handleUpdate",
                             Id = 2,
                             LinkText = "About",
                             ActionName = "About",
                             UpdateTargetId = "output-data"
                         });
            return list;
        }
    }

Finally we can use this code (assuming model is an instance of our NavigationList class) to render the menu.

<% foreach (var menu in Model as MolineSoftware.SLAudit.NavigationList) { %>
    <%= Ajax.GetNavItem(menu)%> 
<% } %>

Upgrading to ASP.NET MVC 2/.net 4

telldontask — Tue, 13 Jul 2010 08:26:22 +0000

We have recently upgraded a few projects to .net 4 (and MVC 2) and have invariably hit one particular error message.

We are using the Spark view engine, and having upgraded the project to MVC 2 would see this error…

Dynamic view compilation failed. (0,0): warning CS1701: Assuming assembly reference ‘System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35′ matches ‘System.Web.Mvc, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35′, you may need to supply runtime policy

Google helped us find this post, which explains that any referenced assemblies which in turn reference MVC 1 could be causing this issue.

After a prolonged process of checking and upgrading various assemblies, we eventually discovered that we needed to update our _Global.spark file.

This file (for those who haven’t used it) is a useful place to put anything which all the spark pages in your project need to include.

Ours looked like this…

We’d upgraded most of these to the latest versions, except for xVal. Removing xVal from this list fixed the problem. As it happens we were no longer using xVal (in the spark pages) so we didn’t need it in there anyway.

Posting an Array of Complex types using JQuery, JSON to ASP.NET MVC

telldontask — Wed, 26 May 2010 13:34:03 +0000

I recently hit a requirement to take an array of objects and post them to an asp.net mvc action using JQuery’s ajax functionality.

I had to do a bit of Googling to work out how to do this so figured I’d document what I found.

The main two parts to this are getting JQuery to spit out JSON data and ASP.NET MVC to deserialize that data into a strongly typed generic list.

Javascript (JQuery)

$('#saveChanges').click(function () {
    var rules = new Array();
 
    $('#assignedRules table.ruleTable tbody tr').each(function (i) {
        var subRuleCode = $('#subRuleCode', this).val();
        var productGroupId = $('#productGroupId', this).val();
        rules.push(new Rule(subRuleCode, productGroupId));
    });
 
    var postData = JSON.stringify(rules);
 
    $.ajax({
        url: '/rule/SaveUserRules',
        data: postData,
        contentType: 'application/json',
        dataType: 'json',
        type: 'post',
        success: onRulesSaved,
        error: function (data, textStatus) { alert(textStatus); }
    }
    );
});

This javascript

creates a new array
iterates over some table rows and grabs a couple of hidden field values for each row
stores the hidden field values in a javascript class called Rule
pushes the Rule instance into the array
calls JSON.stringify to construct a valid JSON string from our array of Rules
posts the JSON string to our destination URL

As you can see, this script effectively translates a table of values, to an array of Rules which are then sent as JSON to our target URL.

The stringify function uses the script available from here.

The Rule javascript class is simple enough…

function Rule(subRuleCode, productGroupId) {
    this.SubRule = subRuleCode;
    this.ProductGroupId = productGroupId;
}

MVC Action

The next trick is to get the MVC action to accept the array and turn it into a strongly typed generic list.

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult SaveUserRules(List<Rule> usersRules)
{
    // do something here
}

As you can see we simply specify our generic list as the parameter for our action (which accepts HTTP Posts only).

JSON Model Binder

The final piece in the jigsaw is to tell MVC how to bind the JSON data to this generic list of Rules.

I found the code to create a simple JSON model binder here.

public class JsonModelBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        if (!IsJSONRequest(controllerContext))
        {
            return base.BindModel(controllerContext, bindingContext);
        }
 
        // get the JSON data that's been posted
        var request = controllerContext.HttpContext.Request;
        var jsonStringData = new StreamReader(request.InputStream).ReadToEnd();
 
        return new JavaScriptSerializer()
            .Deserialize(jsonStringData, bindingContext.ModelMetadata.ModelType);
    }
 
    static bool IsJSONRequest(ControllerContext controllerContext)
    {
        var contentType = controllerContext.HttpContext.Request.ContentType;
        return contentType.Contains("application/json");
    }
}

Now all you have to do is register this as the default model binder. Because it inherits the DefaultBinder, and only kicks in if the request type is application/json this shouldn’t break any non-json model binding.

void AddModelBinders()
{
    ModelBinders.Binders.DefaultBinder = new JsonModelBinder();
}

MSpec AutoMocking

telldontask — Wed, 17 Mar 2010 13:14:33 +0000

If you’ve read my previous posts on using Machine.Specifications and Rhino AutoMocker, you’ll know I’m a fan of both frameworks.

James Broome has released a really useful extension for MSpec which pulls MSpec and Mocking together in one easy to use package.

http://jamesbroo.me/introducing-machinespecificationsautomocking/

It’s well worth checking out.

BDD with MSpec and Rhino Auto Mocks (part 3)

telldontask — Sun, 29 Nov 2009 19:09:38 +0000

In part 1 and part 2 we covered setting up MSpec, writing our specifications and then implementing one of those specifications.

So far we’ve covered very simple tests for code which has no external dependencies and does very little. Now we’ll turn our attention to those tests which (on the face of it) are more complicated and cover code which relies on data access, email services etc.

Lets tackle the the “when asked for products matching search term” specification.

Establishing Context

As before, we’ll start by establishing the context for this test, and to cut down on duplication, I’ve moved the basic context setup to its own class.

public class concern_for_product_controller
{
    protected static ProductController _controller;
 
    Establish context =
        () => { _controller = new ProductController(); };
}

Now we can make all of the Product Controller tests inherit this class.

[Subject("Product Search")]
public class when_asked_for_products_matching_search_term : concern_for_product_controller
{
    It should_retrieve_a_list_of_products_with_titles_containing_the_search_term;
    It should_return_the_list_of_products_to_the_user;
}

To implement the specification “should retrieve a list of products…” we want to simply check that the controller asks for a list of products from wherever we’re hoping to get our data from.

In the spirit of writing tests first we haven’t got any kind of data access layer yet so now we decide we need a Product Repository.

Rhino AutoMocker

To help test our repository we can introduce Rhino AutoMocker to the equation. Rhino AutoMocker is included as part of an AutoMocking library distributed with StructureMap.

To use it in your project, simply download StructureMap and reference StructureMap.AutoMocking and Rhino.Mocks in your project.

We need to wire up the automocker so we can use it in our tests. To that end we’ll change our base class.

public class concern_for_product_controller
{
    protected static ProductController _controller;
    protected static IProductRepository _productRepository;
    static RhinoAutoMocker<ProductController> mocker;
 
    Establish context =
        () =>
            {
                mocker = new RhinoAutoMocker<ProductController>();
                _controller = mocker.ClassUnderTest;
                _productRepository = mocker.Get<IProductRepository>();
            };
}

So what’s going on here?

We’ve introduced an instance of the AutoMocker for our Product Controller.
To make life easier we’ve introduced a field which references the AutoMocker’s “class under test” (in this case our Product Controller).
We’ve asked AutoMocker for an instance of IProductRepository and also referenced this as a handy field (which we can use in our tests).

Now we can turn our attention back to the test.

Setting Expectations

static ActionResult _result;
 
 Because of =
     () => { _result = _controller.Search("test"); };
 
 It should_retrieve_a_list_of_products_with_titles_containing_the_search_term =
     () => _productRepository.AssertWasCalled(x => x.FindProducts("test"));

We call a new overloaded version of our controller’s Search method (which accepts a string search term).
Then we perform a simple check to assert that the FindProducts method was called on IProductRepository.

Finally, we want to check what gets sent back to the view. For now we’ll simply check the name of the view being returned (and that the result is a view).

It should_return_the_list_of_products_to_the_user =
    () => _result.is_a_view_and().ViewName.ShouldEqual("SearchResults");

As I’ve gone along here I’ve implemented just enough to have the test compile.

IProductRepository

public interface IProductRepository
{
    IList<Product> FindProducts(string searchTerm);
}

ProductController

public ActionResult Search(string searchTerm)
{
    throw new NotImplementedException();
}

At this point we want to make the test pass so let’s do that.

readonly IProductRepository _productRepository;
 
public ProductController(IProductRepository productRepository)
{
    _productRepository = productRepository;
}
 
public ActionResult Search(string searchTerm)
{
    return View("SearchResults", _productRepository.FindProducts(searchTerm));
}

Now our MSpec tests will pass.

When we run the tests, AutoMocker will generate a mocked version of our IProductRepository which our test uses to assert which methods were called. By letting AutoMocker generate our mocks we cut down on a lot of boilerplate code but don’t really loose anything in terms of flexibility and control (we can manually add mocks if we don’t want AutoMocker handling them for us).

Stubs

Now lets say we want to check that the list of products retrieved from the repository is actually sent back with the view.

For this, we can set up the automocked IProductRepository to return a specific list of products which we can then check are sent back to the user.

Lets start by telling automocker to stub the Search method and return a new list of products.

Establish context =
    () =>
        {
            _products = new List<Product>();
            _productRepository.Stub(x => x.FindProducts("test")).Return(_products);
        };

We’ve added an Establish Context to our test (this will be used in conjunction with the one in our base class)
We’ve said that when the FindProducts method is called with the parameter “test” then a new generic list of Product will be returned

Now we’ll change the implementation of the spec to check that this same list of products is returned with the view. Whilst we’re at it we’ll move the test for the view’s name into it’s own specification.

It should_return_the_list_of_products_to_the_user =
    () => _result.is_a_view_and().ViewData.Model.ShouldEqual(_products);
 
It should_return_the_search_results_page_to_the_user =
    () => _result.is_a_view_and().ViewName.ShouldEqual("SearchResults");

Putting it all together

So finally, our completed test implementation now looks like this…

[Subject("Product Search")]
public class when_asked_for_products_matching_search_term : concern_for_product_controller
{
    static List<Product> _products;
    static ActionResult _result;
 
    Establish context =
        () =>
            {
                _products = new List<Product>();
                _productRepository.Stub(x => x.FindProducts("test")).Return(_products);
            };
 
    Because of =
        () => { _result = _controller.Search("test"); };
 
    It should_retrieve_a_list_of_products_with_titles_containing_the_search_term =
        () => _productRepository.AssertWasCalled(x => x.FindProducts("test"));
 
    It should_return_the_list_of_products_to_the_user =
        () => _result.is_a_view_and().ViewData.Model.ShouldEqual(_products);
 
    It should_return_the_search_results_page_to_the_user =
        () => _result.is_a_view_and().ViewName.ShouldEqual("SearchResults");
}

Hopefully these posts have demonstrated how well MSpec and Rhino AutoMocker can work together. The key is that the tests are easy to maintain and clearly state the criteria by which to judge whether the code under test is valid.

These criteria are stated as human understandable specifications which can be agreed with your users before writing any code. RhinoAutoMocker makes mocking and stubbing very straightforward and helps you to defer making decisions until the last responsible moment.

You will find the source code for this sample project on GitHub.

BDD with MSpec and Rhino Auto Mocks (part 2)

telldontask — Thu, 19 Nov 2009 22:07:07 +0000

In part 1, we looked at setting up MSpec and writing our first specifications.

Now we get on to the all important implementation stage.

We ended up with these basic specifications by the end of part 1.

using Machine.Specifications;
 
namespace MSpecExample.Tests.Controllers
{
    [Subject("Product Search")]
    public class when_product_search_page_requested
    {
        It should_return_product_search_page;
    }
 
    [Subject("Product Search")]
    public class when_asked_for_products_matching_search_term
    {
        It should_retrieve_a_list_of_products_with_titles_containing_the_search_term;
        It should_return_the_list_of_products_to_the_user;
    }
 
    [Subject("Product Search")]
    public class when_empty_search_term_entered
    {
        It should_return_an_error_message;
    }
}

Lets start by implementing the first one (when product search page requested).

[Subject("Product Search")]
public class when_product_search_page_requested
{
    static ProductController _controller;
 
    Establish context =
        () => {
            _controller = new ProductController();
        };
 
    It should_return_product_search_page;
}

On first glance, the wacky syntax here might put people off. However, once you start writing these tests you tend to see past it to the specs and the tests themselves.

We start by establishing the context for our test, what we need for this test to actually run. In this case it’s the product controller that we’re testing, and so it makes sense to instantiate the product controller and assign it to a field for use within our tests.

Next we need to actually do something, perform the action which we are testing. In this case we’re talking about the user visiting the “product search page” so I will set up the test to call an action on the product controller called Search.

[Subject("Product Search")]
public class when_product_search_page_requested
{
    static ProductController _controller;
    static ActionResult _result;
 
    Establish context =
        () => { _controller = new ProductController(); };
 
    Because of =
        () => { _result = _controller.Search(); };
 
    It should_return_product_search_page;
}

Note how we have created a Because statement. In BDD terms this is the behaviour we are testing. As with the controller I store the result of calling this action in a field so we can use it elsewhere in the test.

At this point I should point out that in the spirit of TDD, I am only doing enough at this point to make this compile. So our Product Controller currently looks like this.

public class ProductController : Controller
{
    public ActionResult Search()
    {
        throw new NotImplementedException();
    }
}

Jumping back to our test, lets test that the behaviour under test (search) does what we expect.

[Subject("Product Search")]
public class when_product_search_page_requested
{
    static ProductController _controller;
    static ActionResult _result;
 
    Establish context =
        () => { _controller = new ProductController(); };
 
    Because of =
        () => { _result = _controller.Search(); };
 
    It should_return_product_search_page =
        () => { _result.is_a_view_and().ViewName.ShouldEqual("Search"); };
}

Using an extension method (thank you James Broome and JP Boodhoo) we can simultaneously check that our result is a view and also get a typed reference to the result (as a ViewResult).

public static class TestExtensions
{
    public static ViewResult is_a_view_and(this ActionResult result)
    {
        return result as ViewResult;
    }
}

Now we make the test pass.

public class ProductController : Controller
{
    public ActionResult Search()
    {
        return View("Search");
    }
}

Finally we run MSpec and marvel at the results

We still have several not implemented specs, but the one we have implemented now appears as a simple line of text. If there were any problems with the test (if it failed) we would see a red error message by the failing specification.

In part 3 we’ll look at more complex controller actions and introduce Rhino Auto Mocker.

BDD with MSpec and Rhino Auto Mocks (part 1)

telldontask — Tue, 10 Nov 2009 23:40:42 +0000

I’ve long been a fan of test driven development in theory but in practice have experienced many of the issues which turn people off TDD and unit testing in general.

Brittle tests which do too much, tell you very little about the meaning behind the code and are more a hindrance than a help when it comes to making changes at a later date.

Well as you may have guessed, given the title of this post, I have found an answer to these problems in the form of BDD using MSpec and Rhino Automocking. I have been using this approach for a good while now and continue to be pleasantly surprised by just how much fun it is writing my tests, but also how stupidly easy they are to change, and how well they document my project’s requirements.

Update: You can get MSpec from github.

External Tool

It’s a good idea to set up an external tool in Visual Studio to run your MSpec tests and produce html output.

Create a new external tool which launches mspec.exe with the following arguments.

$(TargetName)$(TargetExt) --html "$(ProjectDir)\Report.html"

Make sure the initial directory is $(BinDir) and tick Use output window.

Using your favourite Test Runner

Included in the MSpec download are scripts to configure various test runners to recognise and run MSpec tests.

Simply run the bat file which relates to your build runner and way you go!

Writing Specifications

Ensure you add a reference (in your Tests Project) to Machine.Specifications.dll.

Now the fun begins.

I’ve created an ASP.NET MVC site and empty class library Tests project.

Let’s say we want to create a simple page which allows users to search for a product.

We’ll start by creating a new folder in our tests folder called Controllers and add a new class file called ProductControllerTets.cs

Having discussed this feature in detail with the client, I’ve a pretty good idea of what they want, so I start with the following.

using Machine.Specifications;
namespace MSpecExample.Tests.Controllers
{
[Subject("Product Search")]
public class when_product_search_page_requested
{
It should_return_product_search_page;
}
[Subject("Product Search")]
public class when_asked_for_products_matching_search_term
{
It should_retrieve_a_list_of_products_with_titles_containing_the_search_term;
It should_return_the_list_of_products_to_the_user;
}
[Subject("Product Search")]
public class when_empty_search_term_entered
{
It should_return_an_error_message;
}
}

What I particularly like about this, is that you can really think about exactly what you’re doing and express it in code which will eventually become executable tests without actually implementing any code (yet!).

If we now build our test project and run the tests using the console runner via the external tool we set up earlier), we’ll get a report.html file in the tests project which looks like this…

In part 2, we’ll start implementing these tests.

In part 3, we’ll introduce Rhino AutoMocker.

Hello WordPress!

telldontask — Tue, 10 Nov 2009 23:31:43 +0000

I’ve decided to switch my blog to WordPress.

I’ll be using Windows Live Writer to write most of my posts and the excellent Paste as Visual Studio Code plugin to handle c# code excerpts.

Fluent NHibernate Gotcha

telldontask — Mon, 19 Oct 2009 14:04:00 +0000

It seems today’s the day for me to make daft mistakes and then blog about them.

If you’re using Fluent NHibernate (and there are many reasons why you should ) and see this error message…

An invalid or incomplete configuration was used while creating a SessionFactory. Check PotentialReasons collection, and InnerException for more detail.
* Database was not configured through Database method.

System.IndexOutOfRangeException: Index was outside the bounds of the array.

at System.Array.InternalGetReference(Void* elemRef, Int32 rank, Int32* pIndices)
at System.Array.GetValue(Int32 index)
at NHibernate.Type.AbstractEnumType..ctor(SqlType sqlType, Type enumType)
at NHibernate.Type.EnumStringType..ctor(Type enumClass)
at FluentNHibernate.Mapping.GenericEnumMapper`1..ctor()

Do yourself a favour and check you haven’t left any empty Enums in your domain layer (the one that Fluent NHibernate is using to map to your database).

Funnily enough, if you do have an empty Enum, I don’t know, off the top of my head maybe something like this…

public enum NoteType
{
    
}

Then you’ll probably get the error above.

S#arp Architecture WCF Gotcha

telldontask — Mon, 19 Oct 2009 07:33:00 +0000

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.

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

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