Wednesday, June 24, 2009

Tip For Keeping ASP.Net MVC Views Easy To Read

ASP.Net MVC views are harder to read when they’re built with a lot of escapes between script and HTML, such as:

escapes

There’s really just no good way to make that easy to read using this approach.

Using the MVC Futures Repeater Control

Server controls and MVC just don’t sound like they’d go together, but if used for good I believe they can really serve a useful purpose. The following code snippet achieves the exact same result as above, but reads much cleaner:

repeater

The MVC Futures repeater control gives me a way to display repeating data with a template. The control is “bound” to the Model.Items collection because I set the name of the repeater to “Items”.

To get a reference to this control you need to include a reference to the MVC Futures assembly in the web.config:

reference

The complete solution with this code can be downloaded here:

Monday, June 22, 2009

Run Your Tests With A Keystroke

Today I was looking for a way to run my unit tests with a keyboard shortcut. I got really tired of grabbing the mouse just to click a button (wow I’m lazy):

testmenu

I knew there had to be a way to kick off a single test using ReSharper – and after a little digging I found the solution.

keyboardsettings

The magic lies in these 4 keyboard mappings. Assign them to something that makes sense to you, and enjoy the benefit of removing just a little more friction from your TDD experience.

Previous ReSharper keyboard shortcut tips:

Part 9 – Help When Yellow Screens Happen
Part 8 – Bird’s Eye View of Class Files
Part 7 – Add New Files Quickly
Part 6 - Move Extracted Interfaces to Their Own File using ReSharper
Part 5 - Find the Next Error Using ReSharper
Part 4 - What To Pass?
Part 3 - Surround Your Code
Part 2 - Find Inheritors
Part 1 - Quick Documentation View

Thursday, June 18, 2009

Resharper Help When Yellow Screens Happen

Ran across a great utility in Resharper to help with code navigation. It comes in particularly handy when you come across one of these:

pwnd

To get your app back to working order, Resharper will analyze the stack trace and then show hyperlinks so you can jump into the code that dealt the problem. Here’s how:

stacktracecopy

Now go back to Visual Studio and launch the Resharper feature (Intelli-J bindings use CTRL+SHIFT+E, Visual Studio bindings use CTRL+E, T).

When you launch the Stack Trace Explorer, your copied stack trace will already be inserted into the window and all of your user code class names/line numbers will be turned into hyperlinks. You can now easily click through to your code to see what’s up:

click

Previous ReSharper keyboard shortcut tips:

Part 8 – Bird’s Eye View of Class Files
Part 7 – Add New Files Quickly
Part 6 - Move Extracted Interfaces to Their Own File using ReSharper
Part 5 - Find the Next Error Using ReSharper
Part 4 - What To Pass?
Part 3 - Surround Your Code
Part 2 - Find Inheritors
Part 1 - Quick Documentation View

Monday, June 15, 2009

Rendering A Modal Dialog with ASP.Net MVC

One of the most requested ‘Web 2.0’ features by users is the ability to pop up a “modal” dialog to the user.  There are a couple ways you could implement this functionality, but I’m going to show you a really easy way to do it with ASP.Net MVC.  (Hat tip to Jon Kruger for sharing this idea with me.)

Start with a very simple controller action:

controlleraction

Nothing spectacular going on here.  The “RandomModal” string points to a ASCX file that is in the views directory, and the second parameter is the model that you want the partial view to render:

ascx

And finally, on the view that is hosting the modal dialog there is a chunk of javascript that makes the call, throws the returned DOM elements into a parent div, and displays the div as a dialog:

javascriptcallingaction

Another place you could implement this pattern is on a grid.  A common request is to click on a row and view more detailed information about the record.  To implement this all you’d need to do is stash a row identifier on the html row, and pass that back to the controller on click.  Something like this:

postforrowdetail

The complete solution with this code can be downloaded here:

Saturday, June 13, 2009

Resharper: Bird’s Eye View Of Class Files

When I’m in a unit testing class file, sometimes I have multiple classes in the same file and the file gets pretty large.  It’s times like these when the file structure navigation shortcut comes in handy.  For users with their keybindings set to the Visual Studio scheme, the shortcut is CTRL+ALT+F.  If you’re using the Intelli-J bindings, it’s CTRL+F11.

FileStructure

Previous ReSharper keyboard shortcut tips:

Part 7 – Add New Files Quickly
Part 6 - Move Extracted Interfaces to Their Own File using ReSharper
Part 5 - Find the Next Error Using ReSharper
Part 4 - What To Pass?
Part 3 - Surround Your Code
Part 2 - Find Inheritors
Part 1 - Quick Documentation View

Wednesday, June 10, 2009

Resharper: Add New Files Quickly

If you’re adding a class, interface, struct, enum, or new folder to your project, then you can use a feature of ReSharper to add that file much quicker than using the menu commands in Visual Studio.

How do you use this simple shortcut?  Select the node that you want your item to be created in in the solution explorer, and type ALT+Insert. 

InsertFile

Previous ReSharper keyboard shortcut tips:

Part 6 - Move Extracted Interfaces to Their Own File using ReSharper
Part 5 - Find the Next Error Using ReSharper
Part 4 - What To Pass?
Part 3 - Surround Your Code
Part 2 - Find Inheritors
Part 1 - Quick Documentation View

Saturday, June 06, 2009

ASP.Net MVC: Testing Base Controller Methods

The project that I’m working on now created the need to execute some logic before every controller action in the application executed.  The ASP.Net MVC Controller class has a virtual method called OnActionExecuting which will allow me to do just what I needed.  The only problem is that testing this bit of logic in the base controller wasn’t straightforward, and took a little research.  This is the solution I came up with:

The class under test:

public class BaseController : Controller

{

    protected override void OnActionExecuting(ActionExecutingContext filterContext)

    {

        ViewData["SomeKey"] = "Coming to you from a base controller!!";

    }

}

The test:

[TestFixture]

public class BaseControllerTests

{

    [Test]

    public void Before_executing_an_action_base_controller_should_populate_view_data()

    {

        var baseController = new BaseController();

        var baseControllerAccessor = new BaseControllerAccessor(baseController);

        var actionExecutingContextMock = new Mock<ActionExecutingContext>();

        baseControllerAccessor.OnActionExecuting(actionExecutingContextMock.Object);

 

        Assert.That(baseController.ViewData["SomeKey"], Is.EqualTo("Coming to you from a base controller!!"));

    }

}

The BaseController OnActionExecuting method is protected, so I had to do some jury-rigging using reflection to actually put the method under test:

public class BaseControllerAccessor

{

    private BaseController _baseController;

 

    public BaseControllerAccessor(BaseController baseController)

    {

        _baseController = baseController;

    }

 

    public void OnActionExecuting(ActionExecutingContext context)

    {

        MethodInfo methodInfo = _baseController.GetType().GetMethod("OnActionExecuting",

                                    BindingFlags.NonPublic | BindingFlags.Instance);

        methodInfo.Invoke(_baseController, new object[] {context});

    }

}

This was a bit of a pain, but the peaceful easy feeling I’m getting from knowing my code is backed up with an automated test makes it all worth it.

This code can be downloaded here.