Archive for February 2008

Scenario:

You want to write some tests for your route configuration, but you hate typing…

Solution:

We can create some VS Code Snippets to generate most of the tests for you.  While messing around with Kigg, I got the idea to create some snippets to make writing the route tests a little simpler.  These snippets assume you are using MbUnit and Rhino Mocks.  You also need to have your references and imports set up correctly.  With these snippets you can create a full route test fixture with just two commands:

mvcrtestfix – generate the test fixture class for your routes

mvcrtest – generate the test for a specific route

The route test will generate code to check for the correct controller and action.  You can add additional asserts to check that values were passed in.  You can download a zip file with both snippets here.  Then just import them from VS Code Snippet Manager menu item and you’ll have access to it in your IDE shortcuts.

 

And here’s some of the code it will generate for you with placeholders for you to edit.

Hope this helps…. 

This is one of the neatest, straightforward, and down right coolest way to submit a form with the ASP.NET MVC Framework.  I’ve blogged in the past about jQuery and how useful it is.  Combining MVC with jQuery can produce some really neat Web 2.0 style applications and today we’ll take a look at some first steps.  I’d like to get into some more advanced usage of jQuery.  In particular, how it can integrate with ASP.NET MVC Framework. 

Once you’ve downloaded the latest jQuery library, drop the script into your \Content folder in the MVC project.  I usually create a sub folder in Content to organize my javascript files. 

 

Anything you’re going to do with jQuery requires this file.  Depending on how often you use jQuery on your site, you might want to put the script on your MasterPage or if you only use it on a single page, you could drop it on that specific page.

We will now create a simple action to handle a basic contact form on our site.  In this case I put the action in my Home controller.  Also notice that by checking the HttpMethod I can handle both the GET and POST of the contact form with the same action.  Note:  The upcoming release of the MVC framework will not require the ControllerAction attribute on the action.

 

Looking at the view, we have a very simple contact form to capture the sender’s email, the subject, and the body of the message.  There’s also a submit button to submit the form.  We’ve also created the action using the Url helper. 

 

Next, we are going to create a jQuery handler to wire up the form’s submit event and run some jQuery scripts instead of a full server post.

 

First thing we do with jQuery is make sure the document is ready and all the DOM element have been loaded.  Then we find our form element and wire up the “onsubmit” event so we can intercept it and do some jQuery magic. It’s really easy to create an AJAX request using the $.post function; we just need some information about the form we’re posting.  I’m also showing off a couple of cool jQuery functions to do some neat UI updates.  We’ll fade out the contact form when the AJAX request starts, then fade it back in and show an alert.  You can imagine how you could fit progress indicators in here as well.

That’s it.  When you hit the submit button, the javascript will take over the post and execute the action you specified.  Hope this helps! 


I’ve been having a love affair with jQuery lately.  Visual Studio 2008 had huge advances in JavaScript editing. One thing that I could never get to work is the JavaScript Intellisense for jQuery.  Intellisense is always a huge help when learning a new syntax and would be extremely beneficial while learning the jQuery API.


The good news is that there’s finally a hot fix available that fixes the jQuery Intellisense in Visual Studio as well as several others performance and editor fixes.  You can learn more from here and download it here.
 

Scenario:


You have a view which renders a list of customers.  You need to provide a way to delete customers from this table view of the data.  In your “CustomersController” you have a Delete action which takes a Customer ID.  How do we go about providing the user with a simple interface where multiple actions can be posted from one view?


Solution:


There’s basically two approaches we can take to solve this.  One is to use javascript to get the ID of the customer from the DOM,  handle the “onclick” event and submit the form to a “javascript generated” action.  The other option is to render multiple forms on the view.  For this exercise, we’ll concentrate on the latter technique.


In a typical web forms based ASP.NET application, we’re used to having one form per page.  In the MVC framework, we’re in ful control of the HTML rendered which means we can have more than one form on the page.  This means that each form can post to a different action.  Assume we have a collection of Smurfs which will be rendered on a view.  This ViewPage will use a strongly typed ViewData with the list of Smurfs.  As we’re rendering the view, we simply need to set the parameters of the form accordingly.


 


At this point, we simply handle the controller action as any other form.  The actual HTML output looks like this.  Notice how the action uses the item.ID.




We’ll explore the technique with JavaScript in a later post.  Hope this helps! 

This is probably a good time to note… all of this is based on a CTP version of the MVC framework.  I’m putting this together mostly as a reference for myself.  If you start developing with any of these tips, new versions of the MVC framework will have a lot of this built in, and may even break some of your code.  Just a warning…


Scenario:


Part of my application requires that all new users verify their email address.  To accomplish this, the application will send an email with a verification link to the email address provided by the user.  In the email, the user needs the absolute url to verify her email address.  How do we get the absolute Url of a ASP.NET MVC route? 


Solution:


The RouteCollection object has a helpful method for getting a string representation of the Url:  GetUrl(RequestContext context, object values);


The drawback to this method is that it returns only the relative path to the desired action.  In order to get the absolute path, I created a simple extension method which extends the RouteCollection class with a new method GetAbsoluteUrl.  This method also allows us to pass in the protocol to use for the absolute path.  This is helpful if we want to send the user to a SSL secured page.



You can now use this from your controller by specifying the required values.




Again, please keep in mind that all of this is based on a CTP release of the MVC framework and future releases will likely be cause this to be redundant at best or break your entire MVC application at worst :-)