Scott On Writing.NET : ASP.NET MVC

Using Templates to Display Boolean Values as Yes/No Options

Scott Mitchell — Tue, 22 Nov 2011 01:11:08 GMT

One of ASP.NET MVC’s most useful features is its powerful templating system. Templates were introduced with ASP.NET MVC 2 as a way to have the view render either a display- or editing-related user interface for the entire model or for a property of the model. The Html.DisplayFor and Html.EditorFor methods provide a strongly-typed mechanism for rendering the appropriate template for a particular model property:

@Html.DisplayFor(model => model.PropertyName)

@Html.EditorFor(model => model.PropertyName)

For an in-depth overview of templates in ASP.NET MVC, see Brad Wilson’s multi-part article series, ASP.NET MVC 2 Templates. (The content in Brad’s articles apply the same to ASP.NET MVC 3.)

How Html.DisplayFor and Html.EditorFor Determine Which Template to Use

ASP.NET MVC includes a number of built-in display and editor templates. For instance, when rendering a display or editing template for a Boolean value ASP.NET MVC will render either a disabled or enabled checkbox. When rendering a display template for an email address, ASP.NET MVC will render an actual mailto: anchor tag so that the email address is clickable. The editor template for a password property renders an <input type=”password” /> textbox so that the user’s input is masked. Additionally, you can create your own custom display and editor templates.

The Html.DisplayFor and Html.EditorFor methods, when called, need to determine which template to render for the given property. To make this determination these methods examine the specified property’s metadata, which includes information like the property’s data type (bool, string, int, etc.) along with attributes decorating the model properties. For instance, in your model you can decorate a property with a DataType attribute to inform the view and the templating system the type of data this property expresses. In the following model, the property Password is decorated as a password data type, while the Bio property is decorated as a multiline text input (which will render a multiline textbox for this property’s editor template).

public class MyModel
{
    ...

    [DataType(DataType.Password)]
    public string Password { get; set; }

    [DataType(DataType.MultilineText)]
    public string Bio { get; set; }

    ...
}

Specifically, the Html.DisplayFor and Html.EditorFor methods consult the following metadata in this order:

The UIHint attribute - specifies the name of the template to use.
The DataType attribute
The data type

Creating a custom template in ASP.NET MVC is a breeze. Simply add DisplayTemplates and EditorTemplates subfolders to the Views\Shared folder. Then add a view file (e.g., .cshtml) to the subfolder with the name of the template. You can override the default templates by naming the template with the same name as the data type to override – such as String.cshtml or DateTime.cshtml – or you can give it a unique name – such as YesNo.cshtml – in which case you specify the template to use via the UIHint attribute. The custom template is a view that defines the incoming model via the @model directive and emits the desired output.

Building a Yes/No Template for Boolean Values

ASP.NET MVC’s default display template for Boolean values renders a disabled checkbox, but replacing it with the text “Yes” or “No” is quite simple to do when using templates. Start by adding a new template to the Views\Shared\DisplayTemplates folder named YesNo.cshtml with the following content:

@model bool

@if (Model)
{
    <text>Yes</text>
}
else
{
    <text>No</text>
}

The display template starts by defining the incoming model’s type (bool) via the @model directive. Next, it emits the literal string “Yes” if the incoming value (Model) is true, “No” otherwise. That’s all there is to it!

At this point we have the display template defined, but no view will use it unless we specifically instruct it to do so. (In other words, ASP.NET MVC will continue to use its default display template for Boolean values, which is the disabled checkbox.) To instruct a particular model property to use our display template rather than the default, use the UIHint attribute like so:

public class MyModel
{
    ...

    [UIHint("YesNo")]
    public bool ReceiveNewsletter { get; set; }

    ...
}

With those two pieces of the puzzle in place – the template itself and the UIHint attribute – a view will render the text “Yes” or “No” when using the following code:

@Html.DisplayFor(model => model.ReceiveNewsletter)

What about editing? Here we need to create a new template file with the same name (YesNo.cshtml) in the Views\Shared\EditorTemplates folder and then add the following content:

@model bool

@Html.DropDownList("", new SelectListItem[] { new SelectListItem() { Text = "Yes", Value = "true", Selected = Model }, new SelectListItem() { Text = "No", Value = "false", Selected = !Model }})

As with the display template, we start by defining the incoming model’s type (bool) via the @model directive. Then we render a drop-down using the Html.DropDownList method. This drop-down is composed of two select options – Yes and No with the values true and false, respectively. The first item is selected if the incoming value (Model) is true, while the second option is selected if the incoming value is false.

And we’re done! The screen shot below shows the output of a Boolean value when decorated with the [UIHint("YesNo")] attribute and displayed using the Html.EditorFor method.

Happy Programming!

ASP.NET Training in San Diego on Saturday, September 24th

Scott Mitchell — Thu, 15 Sep 2011 18:19:39 GMT

On Saturday September 24th I’ll be doing two four-hour ASP.NET MVC 3 and Razor training events in San Diego:

Getting Started with ASP.NET MVC 3 and Razor – (8 AM to Noon) - This four hour morning class introduces ASP.NET MVC 3 and the new Razor view syntax, explores how to build ASP.NET MVC applications, covers key differences between Web Forms and ASP.NET MVC, and highlights the benefits of ASP.NET MVC. It is intended for developers who are interested in getting started with or learning more about ASP.NET MVC 3 and what it has to offer, as well as for developers using ASP.NET MVC 2 who want to see what's new with ASP.NET MVC 3.
Building Real-World Web Applications with ASP.NET MVC 3 – (1 to 5 PM) - This four hour afternoon class examines building real-world web applications using ASP.NET MVC 3. Learn how to craft lean controllers that comprise only a few lines of code. See how to use display and editor templates to decouple the user interface from your views. And practice creating rich and expressive view-specific models. Best practices on mapping domain models to view models, on input validation, and other topics will be explored. (This class is intended for students who attended the morning’s Getting Started with ASP.NET MVC and Razor class or who are already familiar with ASP.NET MVC.)

Both classes will be held at the University City Center office building, which is located on the 805 off the Governor St. exit (directions and map). And for both classes, students receive electronic access and printed copies of the training materials. Parking is free and coffee, snacks and lunch are provided.

To sign up, or to see a detailed outline for each course, please visit http://fuzzylogicinc.net/InDepth

Hope to see you there!

Full Day ASP.NET MVC 3 Training Event in Los Angeles on August 27th, 2011

Scott Mitchell — Thu, 18 Aug 2011 04:28:13 GMT

In conjunction with the Los Angeles .NET Developer's Group I will be presenting a full day, hands-on lab/presentation/training event on ASP.NET MVC 3 Tips, Tricks, and Best Practices on Saturday, August 27th. The event is a 8 hour training with breakfast and lunch served. Attendees are asked to bring their own laptop and participate in a hands-on session. This event is geared for developers already familiar with ASP.NET MVC.

Event: LADOTNET Master Series: ASP.NET MVC3 – Tips, Tricks, and Best Practices with Scott Mitchell
Date: Saturday, August 27th, 2011
Cost: $50.00 – signup
Location:
Outlook Amusements
2900 W. Alameda Ave, Suite 400
Burbank, CA 91505
[Map]
Abstract:

When building an ASP.NET MVC application developers are faced with a lot of questions. What comprises the Models in MVC? What techniques are available to build simple, yet powerful views? How best to keep your controllers from ballooning in size? And what sort of busywork and tedium can be offloaded to tools?

In this all-day, hands-on event, attendees start with a "baseline" ASP.NET MVC 3 application and together, we will add new features. Along the way we'll explore a variety of tips and best practices. We'll encounter pain points and discuss and implement various solutions. Topics will range from high-level, over-arching ones like options for building a domain model and persistence layer, to ones very specific to ASP.NET MVC, like creating and using custom display and editor templates in your views. And there will be plenty of hands-on experience with popular open source tools like AutoMapper.

This talk is tailored for developers who are already familiar with core ASP.NET MVC concepts and are comfortable building ASP.NET MVC applications.

Signup at: http://mastersseries004.eventbrite.com/

Full Day ASP.NET MVC 3 Training Event in Los Angeles on May 21st, 2011

Scott Mitchell — Thu, 12 May 2011 16:57:09 GMT

In conjunction with the Los Angeles .NET Developer's Group I will be presenting a full day, hands-on lab and training event on ASP.NET MVC 3 on Saturday, May 21st. The event is a 8 hour training with breakfast and lunch served. Attendees are asked to bring their own laptop and participate in a hands-on session. This event is geared for intermediate to experienced web developers new to ASP.NET MVC (or just new to ASP.NET MVC 3 and the Razor syntax).

Over the course of the day we’ll explore MVC fundamentals, step through the process of building an ASP.NET MVC application, and implement common web application scenarios, such as: creating master/detail reports; working with forms; and building Create/Read/Update/Delete screens (CRUD). We’ll also explore interesting and powerful ASP.NET MVC tools and features, including scaffolding, partial views, layouts and layout sections, and more.

Event: LADOTNET Master Series: ASP.NET MVC3 with Scott Mitchell
Date: Saturday, May 21st, 2011
Cost: $50.00 – signup
Location:
Outlook Amusements
2900 W. Alameda Ave, Suite 400
Burbank, CA 91505
[Map]
Abstract: In this all-day, hands-on event attendees will build a complete, functional and interesting data-driven website over the course of the day using Microsoft's ASP.NET MVC 3 framework and the new Razor syntax.
Signup at: http://www.eventbrite.com/event/1553162551?utm_source=eb_email&utm_medium=email&utm_campaign=new_eventv2&utm_term=eventurl_text

Hope to see you there!

Enhancing the Store Locator ASP.NET MVC Application to Include Directions

Scott Mitchell — Fri, 27 Aug 2010 18:44:36 GMT

Earlier this year I wrote an article on 4GuysFromRolla.com showing how to build an ASP.NET WebForms store locator application using Google Maps. Recently, I ported the store locator application to ASP.NET MVC and detailed building the application in Implementing the Store Locator Application Using ASP.NET MVC.

Recently, a reader wrote in and asked what steps would be necessary to include a “Directions” link with each marker in the map so that, when clicked, the user would see the driving directions from the address they entered and the store of interest. I decided to update the ASP.NET MVC application to include this new feature request. Now, the results page shows a “Directions” link in both the grid of nearby stores and in the info window that pops up when you click a map marker. Clicking the “Directions” link opens a new browser window and loads Google Maps, showing the directions from the user-entered address to the selected store’s address.

To show the driving directions I send the user to the following URL: http://maps.google.com/maps?f=d&source=s_d&saddr=startingAddress&daddr=destinationAddress.

When the user is sent to the store locator page, the user-entered address (a/k/a, the starting address) is passed through the querystring via a field named Address, so we already know the starting address. But how do we get our hands on the destination address? Recall that view is passed a model that is a collection of NearbyStoreLocation objects; the NearbyStoreLocation class has properties like Address (the street address), City, Region, PostalCode, and so forth. We can build up the address by concatenating these various address parts.

Rather than requiring the view to build up the address, I added a new read-only property to the NearbyStoreLocation class named FormattedAddress, which returns an address Google Maps can parse by piecing together the address-related properties into a string.

public string FormattedAddress
{
    get
    {
        var addrPieces = new List<string>(5);
        if (!string.IsNullOrEmpty(this.Address))
            addrPieces.Add(this.Address);
        if (!string.IsNullOrEmpty(this.City))
            addrPieces.Add(this.City);
        if (!string.IsNullOrEmpty(this.Region))
            addrPieces.Add(this.Region);
        if (!string.IsNullOrEmpty(this.CountryCode))
            addrPieces.Add(this.CountryCode);
        if (!string.IsNullOrEmpty(this.PostalCode))
            addrPieces.Add(this.PostalCode);

        return string.Join(", ", addrPieces.ToArray());
    }
}

In the view, the link to the directions can be build like so:

<a target="_blank" href="http://maps.google.com/maps?f=d&source=s_d&saddr=<%=Server.UrlEncode(Request.QueryString["Address"]) %>&daddr=<%=Server.UrlEncode(store.FormattedAddress) %>">Directions</a>

And that’s it! Adding the Directions link to the info popup window is a tad more involved because the quotation marks must be escaped using \”.

To get your hands on the complete, working code, go to: http://www.4guysfromrolla.com/code/GoogleMapsMVC.zip

Happy Programming!

I’m Teaching Two Upcoming Training Classes in San Diego

Scott Mitchell — Thu, 19 Aug 2010 17:45:32 GMT

Once a year (or so) I teach a handful of one-day, four hour classes in San Diego on various ASP.NET topics. I’ve got two such classes lined up for Saturday, September 11:

Get Started with ASP.NET MVC – 8 AM to Noon
Traditionally, ASP.NET websites have been designed using the Web Forms model; ASP.NET MVC is an alternative model that uses the Model-View-Controller pattern. In a nutshell, ASP.NET MVC gives developers much finer control over the markup rendered by their web pages, a greater and clearer separation of concerns, better testability, and cleaner, more SEO-friendly URLs. This four hour class introduces ASP.NET MVC, explores how to build ASP.NET MVC applications, covers key differences between Web Forms and ASP.NET MVC, and highlights the benefits of ASP.NET MVC. During the class, we will build a real-world ASP.NET MVC application from start to finish.
Build Responsive Web Applications with Ajax, jQuery, and ASP.NET – 1 to 5 PM
Ajax-enabled web applications use JavaScript and streamlined client/server communications to offer a highly interactive and responsive user experience. jQuery is a free, popular and powerful JavaScript library that ships with Visual Studio 2010 and greatly simplifies building Ajax-enabled web applications. This four hour class examines key Ajax concepts and techniques and walks through building a real-world Ajax-enabled web application using jQuery and ASP.NET.

Each class is $249 per student, but there is an ongoing early bird special price of $199 (available until August 28th). Students receive electronic access and printed copies of the training materials. Coffee, snacks and lunch are provided. The classes are held at the Sorrento Mesa Center (directions), which is located in Sorrento Valley and has free parking.

If you are interested in signing up or would like detailed course outlines, visit www.fuzzylogicinc.net/InDepth. If you have any questions about the class, material, or logistics, shoot me an email at mitchell@4guysfromrolla.com.

Hope to see you there!

Signup: www.fuzzylogicinc.net/InDepth

Using the GeneratedImage Control in ASP.NET MVC

Scott Mitchell — Fri, 13 Aug 2010 23:44:56 GMT

One of the free, open-source controls on the ASP.NET team’s CodePlex page is the GeneratedImage control. In a nutshell, the GeneratedImage control is a combination of an ASP.NET Web Control and a set of classes that facilitate programmatically creating, serving, caching, and transforming images. If you store images in the database that need to be served from a web page, if you need to create images on the fly, or if you need to resize, add watermarks, or perform some other image transform, then the GeneratedImage control can help. For more information on the GeneratedImage control and its capabilities, see my articles Dynamically Generating and Caching Images in ASP.NET with the GeneratedImage Control and Image Transforms with the ASP.NET Generated Image Control.

Previously, my experience with the GeneratedImage control was in WebForms applications. However, I recently ported my Store Locator ASP.NET application from WinForms to ASP.NET MVC 2 (a two-part article series on porting this application from WinForms to ASP.NET MVC is forthcoming). As the screen shot to the right shows, the store locator results page uses the GeneratedImage control to dynamically create markers for the store locator map, namely a navy circle displaying a white number - 1, 2, 3, and so - to illustrate where on the map a particular store resides.

This image is dynamically generated from an HTTP Handler named NumberToImageHandler.ashx. Specifically, the text to display is passed through the querystring and this HTTP Handler generated and returns the image content. For example, pointing your browser to NumberToImageHandler.ashx?number=1 would create and return the binary content for the 1 image, whereas NumberToImageHandler.ashx?number=2 would create and return the binary content for the 2 image, and so on. This HTTP Handler is a class that extends the Microsoft.Web.ImageHandler class, which is part of the GeneratedImage control library.

For my ASP.NET MVC store locator application I wanted to utilize this existing code, but use a more natural route for accessing the content. Having a .ashx extension just seems so passé. What I wanted instead was to reference these images using routes like:

Images/1
Images/2
...

Here’s what I ended up doing:

Added a new route in the RegisterRoutes method in Global.asax for the URL pattern Images/{number}.
```
routes.Add(
    "ImageRoute",
    new Route(
        "Images/{number}",
        new RouteValueDictionary(),
        new RouteValueDictionary {{ "number", "\\d+" }},
        new NumberRouteHandler()
    )
);
```
Note the constraint that only matches this route if the number parameter is one or more digits. Also note the RouteHandler class that is responsible for handling this route, NumberRouteHandler.
Created the NumberRouteHandler class. This class’s sole responsibility is to return an instance of the HTTP Handler that will handle this request. The code for this class is simple, it just returns an instance of the NumberToImageHandler class:
```
public class NumberRouteHandler : IRouteHandler
{
    public IHttpHandler GetHttpHandler(RequestContext requestContext)
    {
        return new NumberToImageHandler();
    }
}
```
Created the NumberToImageHandler class. This class contains virtually the same code as the NumberToImageHandler.ashx file in the WebForms application. The only difference was instead of reading the number to display from the querystring I read it from the Request object’s RouteData collection. Here’s the line of code that determines which number to display in the image:
```
string numberText = HttpContext.Current.Request.RequestContext.RouteData.Values["number"] as string;
```

With this code in place, anytime a request comes in for Images/1, say, the ASP.NET Routing system dispatches the request to the NumberRouteHandler class, which returns an instance of the NumberToImageHandler class, which reads in the number (1, in this case), dynamically creates the image, and returns it back to the requestor. Pretty slick, eh?

For more information on ASP.NET Routing see URL Routing in ASP.NET 4 and ASP.NET Routing (the technical docs). You can download the ASP.NET MVC version of the store locator from http://www.4guysfromrolla.com/code/GoogleMapsMVC.zip. As noted earlier, there is a two-part article series in the works that walks through porting the store locator from WebForms to ASP.NET MVC and will be published on 4GuysFromRolla.com later this month.

I'll be speaking at the SoCal Code Camp this Weekend

Scott Mitchell — Tue, 22 Jun 2010 23:06:00 GMT

The SoCal Code Camp is coming to San Diego, California this weekend, June 26th and 27th. This free event boasts nearly 100 talks given by dozens of speakers from around the area covering a wide swath of interesting technology-related topics. This year the Code Camp is hosted at the beautiful UC-San Diego campus.

I will be presenting two talks:

Take Control of Your Website's URLs with ASP.NET Routing - Sunday, June 27th, 9:00 AM, Rm 101
Did you know that ASP.NET has a powerful URL routing framework built into it? This talk explores the ASP.NET Routing system and how to use it to create SEO-friendly, human-readble URLs in both MVC and Web Form applications.
Getting Started with ASP.NET MVC - Sunday, June 27th, 10:15 AM, Rm 101
ASP.NET MVC brings the Model-View-Controller design pattern to ASP.NET. In this talk, Scott shows how to get started with ASP.NET MVC, explores how to create and use Models, Views, and Controllers, and walks through a creating a simple, end-to-end ASP.NET MVC application.

If you plan on attending the Getting Started with ASP.NET MVC talk I encourage you to also attend Take Control of Your Website's URLs with ASP.NET Routing, as routing is an important aspect of ASP.NET MVC.

For a full list of talks being presented this year, see the schedule posted on the SoCal Code Camp website.

Hope to see you there!

Resolve a URL from a Partial View (ASP.NET MVC)

Scott Mitchell — Mon, 10 May 2010 20:05:00 GMT

Working on an ASP.NET MVC application and needed the ability to resolve a URL from a partial view. For example, I have an image I want to display, but I need to resolve the virtual path (say, ~/Content/Images/New.png) into a relative path that the browser can use, such as ../../Content/Images/New.png or /MyAppName/Content/Images/New.png.

A standard view derives from the System.Web.UI.Page class, meaning you have access to the ResolveUrl and ResolveClientUrl methods. Consequently, you can write markup/code like the following:

<img src='=<%=Page.ResolveClientUrl("~/Content/Images/New.png")%>' />

The problem is that the above code does not work as expected in a partial view. What's a little confusing is that while the above code compiles and the page, when visited through a browser, renders, the call to Page.ResolveClientUrl returns precisely what you pass in, ~/Content/Images/New.png, in this instance. The browser doesn't know what to do with ~, it presumes it's part of the URL, so it sends the request to the server for the image with the ~ in the URL, which results in a broken image.

I did a bit of searching online and found this handy tip from Stephen Walther - Using ResolveUrl in an HTML Helper. In a nutshell, Stephen shows how to create an extension method for the HtmlHelper class that uses the UrlHelper class to resolve a URL. Specifically, Stephen shows how to add an Image extension method to HtmlHelper. I incorporated Stephen's code into my codebase and also created a more generic extension method, which I named ResolveUrl.

public static MvcHtmlString ResolveUrl(this HtmlHelper htmlHelper, string url)
{
    var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
    return MvcHtmlString.Create(urlHelper.Content(url));
}

With this method in place you can resolve a URL in a partial view like so:

<img src='<%=Html.ResolveUrl("~/Content/Images/New.png")%>' />

Or you could use Stephen's Html.Image extension method (although my more generic Html.ResolveUrl method could be used in non-image related scenarios where you needed to get a relative URL from a virtual one in a partial view). Thanks for the helpful tip, Stephen!

Happy Programming!