Radu Enucă's Blog

Pin My Friends Application (using Google Maps and Facebook APIs) – Part 3: Displaying the friends on the map

Mon, 14 Nov 2011 02:44:00 GMT

Part 1 – Introduction
Part 2 – Displaying the friends list
Part 3 – Displaying the friends on the map

This part will handle the displaying of the user’s friends as markers on the map:

T.6 – Display makers on the map for each friend that has a location
T.7 – Display the friend profile when when the mouse hovers the marker
T.8 – Handle the friends with no location

T.6 – Display makers on the map for each friend that has a location

In order to display a marker on the Google Map we need the Latitude and Longitude for the marker’s position. We can get the Latitude and Longitude in two ways:
- Make and additional call to using the Facebook API to get more details about the location object. By using the id of the location object we can get another object that has a location property with latitude and longitude <- easy but boring
- Use the Google Geocoding API to get the latitude and longitude based on the location name property <- a little harder but we learn something new in the process. This option is better not just because is something different to learn but because the Geocoder will unify locations like these:
  - Bucharest, Romania
  - Bukarest, Bucharest, Romania
  - București
Before jumping in let’s think for a moment. We have lots of friends in the same location so instead of looping over the entire list of friends and Geocode each location it will be better if we group the friends by their location. In this way we can use the Geocoder to get the latitude and longitude for the unique address list (so my 86 friends will be grouped in 7 unique address groups + 1 for friends that don’t have any address specified). That’s a huge performance boost because the Geocoder if called in a loop will return OVER_QUERY_LIMIT unless the request aren’t timmed to ~1 second apart (that’s 7s down for 86s):
```
//Group the friends by their location
var uniqueLocations = {};
var param = 'location';
$.each(friends, function () {
    if (!uniqueLocations[this[param]])
        uniqueLocations[this[param]] = [];
    uniqueLocations[this[param]].push(this);
});

//Display the friends on the map
for (var locationName in uniqueLocations) {
    if (locationName != "Location N/A") {
        (function (location, friends) {
            setTimeout(function () { displayFriendsMarkers(location, friends) }, 1000); 
            })(locationName, uniqueLocations[locationName]);
    }
}
```

Now that we have the friends grouped by their location the next step is to implement the displayFriendsMarkers function:

//TODO: Proper error handling (what happens if geocoding fails?)
function displayFriendsMarkers(locationName, friends) {
    //Call the geocoder to get the latitude and longitude for the locationName
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ address: locationName }, function (results, status) {
        if (status == google.maps.GeocoderStatus.ZERO_RESULTS) {
            return
        }
        if (status != google.maps.GeocoderStatus.OK) {
            //alert("We're having difficulties, could you please try again in a moment? " + locationName);
            return
        }

        for (var i = 0; i < friends.length; i++) {
            var friend = friends[i];
            //Set the result from of geocoding
            friend.latlng = results[0].geometry.location;
            //Display the marker
            plotMarker(createMarkerOptions(friend));
        }
    });
}

At this point we have the latitude and longitude for each friend that has a location specified. We have now all the details we need to create a marker for each friend but first the option object used to create the marker need to be initialized:

function createMarkerOptions(friend) {

    var lat = friend.latlng.lat();
    var lng = friend.latlng.lng();

    //Distribute the markers with identical locations 
    //Dangerous Voodoo magic- don't try this at home :)
    lat += parseFloat(((Math.floor(Math.random() * 200) - 99) / 5000).toString() + friend.id);
    lng += parseFloat(((Math.floor(Math.random() * 200) - 99) / 5000).toString() + friend.id);
    friend.latlng = new google.maps.LatLng(lat, lng);

    var image = null;
    if (friend.gender == "M") {
        image = new google.maps.MarkerImage(
            "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"
        );
    }
    else if (friend.gender == "F") {
        image = new google.maps.MarkerImage(
            "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png"
        );
    }
    else {
        image = new google.maps.MarkerImage(
            "http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png"
        );
    }

    var options = {
        position: friend.latlng,
        icon: image,
        title: friend.name
    };

    return options;
}

There are tow things happening here. One is related to the fact that for a particular location all friends will have the same latitude and longitude values so all the markers will stack up on each other. So I had to do a quick and dirty algorithm to spread the markers around the original position (it is visible at higher zoom levels). The second things deals with setting the marker icon depending on gender (male: blue, female: red, unspecified: yellow).

The plotMarker function is very simple at this point:

function plotMarker(options) {
    var marker = new google.maps.Marker({ map: map });
    marker.setOptions(options);
    markersArray.push(marker);

    return marker;
}

Figure 3-1. Markers at the original zoom level

Figure 3-2. Markers at a higher zoom level

I’m not a very big fun of the default Google Map icons so let’s replace them with something that looks better. There is a nice map icons collection here: and in combination with the Google Map Custom Marker Maker we get the following:

function createMarkerOptions(friend) {

    var lat = friend.latlng.lat();
    var lng = friend.latlng.lng();

    //Distribute the markers with identical locations 
    //Dangeours Woodoo magic- don't try this at home :)
    lat += parseFloat(((Math.floor(Math.random() * 200) - 99) / 5000).toString() + friend.id);
    lng += parseFloat(((Math.floor(Math.random() * 200) - 99) / 5000).toString() + friend.id);
    friend.latlng = new google.maps.LatLng(lat, lng);

    var image = null;
    var shadow = new google.maps.MarkerImage(
        'Content/images/shadow.png',
        new google.maps.Size(54, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(16, 37)
    );
    shape = {
        coord: [30, 0, 31, 1, 31, 2, 31, 3, 31, 4, 31, 5, 31, 6, 31, 7, 31, 8, 31, 9, 31, 10, 31, 11, 31, 12, 31, 13, 31, 14, 31, 15, 31, 16, 31, 17, 31, 18, 31, 19, 31, 20, 31, 21, 31, 22, 31, 23, 31, 24, 31, 25, 31, 26, 31, 27, 31, 28, 31, 29, 31, 30, 30, 31, 24, 32, 23, 33, 22, 34, 21, 35, 20, 36, 11, 36, 10, 35, 9, 34, 8, 33, 7, 32, 1, 31, 0, 30, 0, 29, 0, 28, 0, 27, 0, 26, 0, 25, 0, 24, 0, 23, 0, 22, 0, 21, 0, 20, 0, 19, 0, 18, 0, 17, 0, 16, 0, 15, 0, 14, 0, 13, 0, 12, 0, 11, 0, 10, 0, 9, 0, 8, 0, 7, 0, 6, 0, 5, 0, 4, 0, 3, 0, 2, 0, 1, 0, 0, 30, 0],
        type: 'poly'
    };
    if (friend.gender == "M") {
        image = new google.maps.MarkerImage(
            'Content/images/male.png',
            new google.maps.Size(32, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(16, 37)
        );
    }
    else if (friend.gender == "F") {
        image = new google.maps.MarkerImage(
            'Content/images/female.png',
            new google.maps.Size(32, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(16, 37)
        );
    }
    else {
        image = new google.maps.MarkerImage(
            'Content/images/unknown.png',
            new google.maps.Size(32, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(16, 37)
        );
    }

    var options = {
        position: friend.latlng,
        icon: image,
        shadow: shadow,
        shape: shape,
        content: friend
    };

    return options;
}

Figure 3-3. Markers at the original zoom level (new icons)

Figure 3-4. Markers at a higher zoom level (new icons). Notice that the position is different because we use random in the spreading algorithm

T.7 – Display the friend profile when when the mouse hovers the marker

You may have noticed that in the last createMarkerOptions function version the title is gone from the options object and that content: friend is there. We’re going to reuse the template for displaying the friends list (with little modifications) to show the friend profile when the mouse is over the marker:

function plotMarker(options) {
    var marker = new google.maps.Marker({ map: map });
    marker.setOptions(options);
    markersArray.push(marker);
    google.maps.event.addListener(marker, "mouseover", function () {
        //there is no way to get the marker position (screen coordinates) in v3
        //create a dummy overlay and get the position from its projection
        var helper = new google.maps.OverlayView();
        helper.setMap(map);
        helper.draw = function () {
            if (!this.ready) {
                this.ready = true;
                google.maps.event.trigger(this, 'ready');
            }
        };

        var pixelpos = helper.getProjection().fromLatLngToContainerPixel(marker.getPosition());
        showFriendProfile(marker.content, pixelpos.x, pixelpos.y);
    });

    google.maps.event.addListener(marker, "mouseout", function () {
        hideFriendProfile();
    });

    return marker;
}

One thing to note here is the hack that needs to be used to transform from world (map) to screen coordinates. This is something that I’ve picked up from the Google Maps API bug and feature requests site (see the References section)

The showFriendProfile and hideFriendProfile functions

function showFriendProfile(friend, x, y) {
    $('.friendContainer')
        .html($('#friendTemplate').render(friend))
        .css('left', x)
        .css('top', y)
        .show();
}

function hideFriendProfile() {
    $('.friendContainer').hide();
}

Some cleaning up functions

function removeMarkers() {
    while (marker = markersArray.pop()) {
        marker.setMap(null);
    }
}

function clearFriends() {
    removeMarkers();
}

The result:
Figure 3-5. Friend profile showing on mouse over.

T.8 – Handle the friends with no location

Well my time is up. The 36h of coding are gone and I have to admit that I’m a bit rusty. I was hopping to do more in this time:

Handle the friends with no location (and the ones where geocoding fails). I had in mind a collapsible panel at the bottom of the screen with all name and pictures for all of them. Clicking a friend picture will give the user the opportunity to post a message to the friend wall and ask him/her to complete and address (or to correct the address)
Improve the performance by saving the friends data in the database and only add differences
Use the Facebook Real Time Updates and subscribe to modifications (for name, picture and location). Create an endpoint where Facebook can post the ID’s of modified friends. Then do a request and update the modifications in the database
Use WebSockets to show the modifications in real time if the user is connected

I promise I will come back and create blog posts for each of the above.

References

Javascript Closures | Google Maps API bug and feature requests (Issue 2342)

Download

Download Part 3 Code

Pin My Friends Application (using Google Maps and Facebook APIs) – Part 2: Displaying the friends list

Sat, 12 Nov 2011 13:41:00 GMT

Part 1 – Introduction
Part 2 – Displaying the friends list
Part 3 – Displaying the friends on the map

This part will handle the displaying of the user’s friends:

T.4 – Grab the current user’s friends and display them in a list (no fancy paging just a dumb scrollable list)
T.5 – Upgrade the above list by displaying the friend location

T.4 – Grab the current user’s friends and display them in a list (no fancy paging just a dumb scrollable list)

The friend profile will look very similar to the user profile and because there will be a lot of friends to show the best way to avoid messy code is to use a template engine. Because jQuery Templates are discontinued and soon to be replaced by jsRender the former will be used. Create a partial view called _FriendsList in the Views\Shared folder:

<script src="https://raw.github.com/BorisMoore/jsrender/master/jsrender.js"></script>
<script id="friendTemplate" type="text/html">
    <li>
        <a href="{{=profile}}" target="_blank">
            <img class="left profilePicture" src="{{=picture}}"  alt="Friend picture" title="{{=name}}" />
            <div class="left">
                <div class="profileName">
                     {{=name}} ({{=gender}})
                </div>
            </div>
        </a>
    </li>
</script>
<div id="friendsList">
</div>

The jsRender script is referenced directly from the github repository. The template is not so different from a jQuery Template version.

Render the partial in the _Layout.cshtml view: Just drop @Html.Partial(MVC.Shared.Views._FriendsList) after @RenderBody().

Add some styles in Site.css:

/*Friends styling*/
#friendsList
{
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 500;
    background-color: transparent;
    display: none;
    height: 90%;
    width: 500px;
    overflow: auto;
}
#friendsList ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#friendsList li
{
    margin: 0;
    height:64px;
}
#friendsList a
{
    display: block;
    margin: 10px;
    text-decoration: none;
    background-color: rgba(98,122,172,0.5);
    border-radius: 10px;
    height: 64px;
}
#friendsList a:hover
{
    background-color: rgba(51, 102, 153, 0.5);
}

Add code in the facebook.js script file to get the friends from Facebook and render the friendTemplate:

function displayFriendsList() {
    FB.api('/me/friends', { fields: 'name,id,gender' }, function (response) {
        if (!response || response.error) {
            //TODO: Display a proper error message
            alert('An Error Occurred');
        }
        else {
            var friends = $.map(response.data, function (friend) {
                return {
                    'id': friend.id,
                    'name': friend.name,
                    'picture': 'http://graph.facebook.com/' + friend.id + '/picture',
                    'profile': 'http://www.facebook.com/' + friend.id,
                    'gender': friend.gender == 'male' ? 'M' : (friend.gender == 'female' ? 'F' : 'N/A')
                };
            });
            var friendsList = $('<ul></ul>');
            friendsList.html($('#friendTemplate').render(friends));
            $('#friendsList').html(friendsList).show();
        }
    });
}
function clearFriendsLocation() {
    $('#friendsList').html('');
}

The idea is very simple: Make a call to the Graph API asking the friends of the current user and also limit the fields to: id, name and gender (actually is not limiting but extending because by default only id and name are returned). If everything is ok a new JSON object is returned and passed to the render function. A call to these two methods must be added in the showFacebookProfile and hideFacebookProfile functions.

The result:

Figure 2-1. Clicking on a friend in the list will open the Facebook profile

T.5 - Upgrade the above list by displaying the friend location

Getting the location (from the current user or for a friend) requires additional permissions from the current user (user_location and friends_location). First step is to modify the Facebook application to require the permissions:
Figure 2-2. Edit the Pin My Friends application and go to Settings\Auth Dialog

Modify the FB.login call to include the scope parameter:

//user is not connected to your app or logged out
loginText.html('Login with Facebook');
loginButton.unbind('click');
loginButton.bind('click', function () {
    FB.login(function (response) {
        if (response.authResponse) {
            showFacebookProfile();
        }
    },
    { scope: 'user_location,friends_location' });
});

Modify the displayFriendsList function to request and show each friend location (also add addition code to the template):

function displayFriendsList() {
    FB.api('/me/friends', { fields: 'id,name,gender,location' }, function (response) {
        if (!response || response.error) {
            //TODO: Display a proper error message
            alert('An Error Occurred');
        }
        else {
            var friends = $.map(response.data, function (friend) {
                var location;
                if (!friend.location || friend.location.id == '') {
                    location = 'Location N/A'
                }
                else {
                    location = friend.location.name;
                }
                return {
                    'id': friend.id,
                    'name': friend.name,
                    'picture': 'http://graph.facebook.com/' + friend.id + '/picture',
                    'profile': 'http://www.facebook.com/' + friend.id,
                    'gender': friend.gender == 'male' ? 'M' : (friend.gender == 'female' ? 'F' : 'N/A'),
                    'location': location
                };
            });
            var friendsList = $('<ul></ul>');
            friendsList.html($('#friendTemplate').render(friends));
            $('#friendsList').html(friendsList).show();
        }
    });
}

The result:
Figure 2-3. Friends list with location

References

jsRender

Download

Download Part 2 Code

Pin My Friends Application (using Google Maps and Facebook APIs) – Part 1: Introduction

Sat, 12 Nov 2011 03:29:00 GMT

Part 1 – Introduction
Part 2 – Displaying the friends list
Part 3 – Displaying the friends on the map

Because I’m on a business trip and I have some free time on my hands when I’m back in the hotel room, I have decided to join the UbiChallenge coding competition on the last 100m. The final submission date is 15th of November and I’m planning of finishing it in 36 hours including the blog posts (I’ve started this Friday 11.11.11 at 11:11:11 PM – well not right to the minute and second but the combination is nice, and plan to end it by Sunday 13.11 at 11 PM. I think that 12 hours of boring activities like eating, sleeping and some other stuff will be more than enough). Monday 14.11 I’ll probably spend a couple of hours reviewing and posting the solution. If someone wonders: I’m kind of frustrated because I’ve missed the Yahoo! OpenHack EU from Bucharest this year so this is the perfect opportunity to create a HackDay for myself (not so much fun coding alone but….).

There are there coding problems in the competition and in order to participate one has to choose one of them:

Multiplayer TicTacToe:

Implement and ASP.NET and HTML5 application that allows a user to play TicTacToe with other users. A user can open a new TicTacToe session and wait for other user to join the session or join an existing session. The user that opens the session will be the one starting the game and as in a normal TicTacToe game the opponent will move after and so on. The application should automatically inform the user when he’s turns comes and decide who the winner is (or if it is a even match).
Scratch Card

Implement a Scratch Card application (scratch and win). The UI must use jQuery and not Flash. The client side must call a web service (WCF) that generates a random code that can be winning or not. That code (with the form XXX-XXX-XXXX) must be saved in the database along with date / time of generation and its status (winner / loser). The system must be secure so no one could just call the web service in order create codes in the database. After scratching on the card there should be a message saying WINNER/LOSER and under it the generated code.
My Friends Application

Implement and application called MyFriends that will any user to log in with his Facebook account; the application will read the location of all the user’s friends and then display on a map (Google Maps Mashup) their position, using blue dots for men and red for women. Mouse over a dot will display the friend’s Facebook picture.

There is nothing to complicated in either of them but the Google Maps + Facebook seems the most interesting by far so this is my pick (this and the fact that I’ve always wanted to do a blog post about Google Maps). The application name will be PinMyFriends (not very original but I don’t plan to sell it ).

So, let’s define the first tasks:

T.1 - Setup solution and development environment:
T.2 - Display the Google Map
T.3 - Allow the user to login using Facebook and display user information (name and picture)

T.1 – Setup solution and development environment

We’ll be using Visual Studio 2010 SP1 for this project (the edition doesn’t really matter) and ASP.NET MVC3 (make sure you have ASP.NET MVC3 Tools Update installed):

Start Visual Studio with administrative rights
Create an empty solution called PinMyFriends.Solution
Add an empty MVC3 project to the solution and name it PinMyFriends.UI
Add or update the following NuGet packages:
- EntityFramework 4.2
- jQuery 1.7
- jQuery.UI.Combined 1.8.16
- jQuery.Validation 1.9
- jQuery.vsdoc 1.6
- Modernizr 2.0.6
- T4MVC 2.6.64
Create a GeneratedCode folder in the project and move T4MVC.tt and T4MVC.tt.settings.t4 there
Add the HomeController and the Index view
Double click the Properties folder in the Solution Explorer and click the Web tab
In the Servers section click Use Local IIS Web Server and enter http://localhost/PinMyFriends.UI in the Project Url (should be already there).
Click Create Virtual Directory (this is the reason Visual Studio 2010 must be started with administrative privileges).
Hit F5 and you should see the Index view

Figure 1-1. This is how the project should look at this stage

T.2 – Display the Google Map

In order to display a Google Map we need to do a few things:

Reference the Google Maps APIs:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Add a the following div in the Index.cshtml:
```
<div id="map"></div>
```

Add the following styles in Site.css

html
{
    height: 100%;
}

body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

#map
{
    height: 100%;
}

Add the following JavaScript snippet in the Index.cshtml

<script>
    $(document).ready(function () {
        // Setup the map
        var mapCenter = new google.maps.LatLng(0, 0);
        var mapOptions = {
            zoom: 3,
            center: mapCenter,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            keyboardShortcuts: false,
            streetViewControl: false,
            scrollwheel: true,
            scaleControl: false,
            navigationControl: false
        };
        // Show the map
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
    });
</script>

The map center and zoom level are set in order to have a good look at all continents. Also all map controls are removed and the map type is set to Roadmap. If everything is set correctly by pressing F5 the Index view should look like this:

Figure 1-2. Displaying the Google Map

T.3 - Allow the user to login using Facebook

In order to integrate our application with Facebook we first need to go to the Developers section in Facebook and create a new application there:

Navigate to https://developers.facebook.com/apps (requires Facebook account) and click Create New App:

Figure 1-3. Create application dialog
Set the application’s basic information like below and write down the App Key and the App Secret:

Figure 1-4. Application's basic info page
Click the Auth Dialog link under Settings and set the following (we will return to this screen later):

Figure 1-5. Customize the Authentication Dialog
There are several ways of integrating Facebook in the application. As there is no specific requirement for this competition I’ll use the Facebook C# SDK CodePlex project:
- Add the necessary NuGet packages
  
  Figure 1-6. Quick access to NuGet packages.
  
  Figure 1-7. NuGet packages to install.
- Set the AppID and App Secret in web.config
  
  Figure 1-8. Web.config Facebook specific settings

A partial view called _FacebookInit.cshtml is added with the package. Some adjustments are needed:

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: '@Facebook.FacebookApplication.Current.AppId', // App ID
            channelURL: '@Request.Url.Scheme://@Request.Url.Authority@Url.Content("~/fbchannel.ashx")', // Channel File
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true, // enable OAuth 2.0
            oauth: true  // parse XFBML
        });

        // Run once with current status and whenever the status changes
        FB.getLoginStatus(updateButton);
        FB.Event.subscribe('auth.statusChange', updateButton);
    };

    // Load the Facebook SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = '//connect.facebook.net/en_US/all.js';
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));  
</script>

Because I’m not planning to go back to the server and then make a call to the Facebook API just to get the logged user name and picture I’ve removed the window.location.reload(); and replace it with a JavaScript function call.

Add a partial view called _UserProfile to the Views\Shared folder that will display the user picture, name and login status:

<script src="@Links.Scripts.facebook_js"></script>
<img class="left" id="userPicture" class="profilePicture" src="@Links.Content.images.unknown_user_png" 
    alt="User picture" title="User picture" />
<div class="right">
    <div id="userName" class="profileName"></div>
    <div class="facebook_login">
        <a class="fb_button fb_button_medium" id="facebook_login_button"><span class="fb_button_text">LogIn with Facebook</span></a>
    </div>
</div>

Add the necessary code to the _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link rel="shortcut icon" href="@Links.Content.images.favicon_ico"/>
    <link rel="stylesheet" href="@Links.Content.Site_css" />
    <script src="@Links.Scripts.jquery_1_7_js"></script>
</head>
<body>
    <div id="userProfile">
        @Html.Partial(MVC.Shared.Views._UserProfile)
    </div>
    @RenderBody()
    @Html.Partial(MVC.Shared.Views._FacebookInit)
</body>
</html>

Add new styles to Site.css

body
{
    height: 100%;
    margin: 0;
    padding: 0;
}

html, #map
{
    height: 100%;
}

#userProfile
{
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 500;
    background-color: rgba(98,122,172,0.5);
    border-radius: 10px;
    height: 64px;
}

.profilePicture
{
    border-radius: 10px 0 0 10px;
    border: 0;
    width: 64px;
    height: 64px;
}

.profileName
{
    font-size: 22px;
    color: #fff;
    font-weight: 700;
    height: 20px;
    margin: 5px;
}

.left
{
    float: left;
}

.right
{
    float: right;
}

.facebook_login
{
    margin: 10px 5px 5px;
}

Add a new script file called facebook.js

function updateButton(response) {
    var loginButton = $('#facebook_login_button');
    var loginText = $('#facebook_login_button span');

    if (response.authResponse) {
        //The User is already logged in and connected
        showFacebookProfile();
        // Change login button text
        loginText.html('Logout from Facebook');
        loginButton.unbind('click');
        loginButton.bind('click', function () {
            hideFacebookProfile();
        });
    } else {
        //user is not connected to your app or logged out
        loginText.html('Login with Facebook');
        loginButton.unbind('click');
        loginButton.bind('click', function () {
            FB.login(function (response) {
                if (response.authResponse) {
                    showFacebookProfile();
                }
            });
        });
    }
}

function showFacebookProfile() {
    FB.api('/me', function (response) {
        var userPicture = $('#userPicture');
        var userName = $('#userName');
        //Show the picture
        var userPictureSrc = 'http://graph.facebook.com/' + response.id + '/picture';
        userPicture.prop('src', userPictureSrc);
        //Show the name
        userName.html(response.name);
    });
}

function hideFacebookProfile() {
    FB.logout(function (response) {
        var userPicture = $('#userPicture');
        var userName = $('#userName');
        //Show unknown user picture
        var userPictureSrc = 'Content/images/unknown_user.png';
        userPicture.prop('src', userPictureSrc);
        //Clear the user name
        userName.html('');
    });
}

The result:
Figure 1-9. No logged in user display

Figure 1-10. Logged in user display

References

Google Maps JavaScript API V3 | facebook DEVELOPERS | Facebook C# SDK | Getting Started with an ASP.NET MVC 3 Website (With Javascript SDK)

Download

Download Part 1 Code

ASP.NET MVC–Prevent an action method from being called before another action

Sun, 15 May 2011 12:27:00 GMT

Problem

You want to restrict access by callers to an action method unless another action method was called first.

Solution

There is already a similar functionality implemented by the Authorize attribute. The Authorize attribute is an authorization filter restricts the access to an action method to users who are both authenticated and authorized. If the user is not authenticated and authorized the Authorized attribute will set a HTTP status code of 401 Unauthorized to the response. This will get picked up by the Forms Authentication HTTP Module who will perform a redirection to the log in action. The Authorize attribute extends the FilterAttribute abstract class and implements the IAuthorizationFilter interface and so will our filter (let’s call it ActionInitializationRequired). With some help from the MVC3 source code we will have the following template to start with:

[AttributeUsage( AttributeTargets.Method , Inherited = true , AllowMultiple = false )]
public class ActionInitializationRequiredAttribute : FilterAttribute , IAuthorizationFilter
{
    protected virtual bool AuthorizeCore( HttpContextBase httpContext )
    {
        if ( httpContext == null )
        {
            throw new ArgumentNullException( "httpContext" );
        }

        //TODO: Add code to check that another action was called first

        return true;
    }

    private void CacheValidateHandler(
        HttpContext context ,
        object data ,
        ref HttpValidationStatus validationStatus
        )
    {
        validationStatus = OnCacheAuthorization( new HttpContextWrapper( context ) );
    }

    public virtual void OnAuthorization( AuthorizationContext filterContext )
    {
        if ( filterContext == null )
        {
            throw new ArgumentNullException( "filterContext" );
        }

        if ( OutputCacheAttribute.IsChildActionCacheActive( filterContext ) )
        {
            throw new InvalidOperationException(
                "ActionInitializationRequiredAttribute cannot be used within a child action caching block."
            );
        }

        if ( AuthorizeCore( filterContext.HttpContext ) )
        {
            HttpCachePolicyBase cachePolicy = filterContext.HttpContext.Response.Cache;
            cachePolicy.SetProxyMaxAge( new TimeSpan( 0 ) );
            cachePolicy.AddValidationCallback( CacheValidateHandler , null /* data */);
        }
        else
        {
            HandleUnauthorizedRequest( filterContext );
        }
    }

    protected virtual void HandleUnauthorizedRequest( AuthorizationContext filterContext )
    {
        //TODO: Add code to respond to the case when the initialization action wasn't called
    }

    protected virtual HttpValidationStatus OnCacheAuthorization( HttpContextBase httpContext )
    {
        if ( httpContext == null )
        {
            throw new ArgumentNullException( "httpContext" );
        }

        bool isAuthorized = AuthorizeCore( httpContext );
        return ( isAuthorized ) ? HttpValidationStatus.Valid : HttpValidationStatus.IgnoreThisRequest;
    }
}

We have 2 TODO lines:

Add code to check that another action was called first
Add code to respond to the case when the initialization action wasn't called

Let’s solve them one by one:

1. Add code to check that another action was called first

The first thing we need to do is find a way to know when an action was called. For this we can add some code in the action itself or use a more AOP approach by creating an Action Filter and overriding the OnActionExecuted method (this method is Called by the MVC framework after the action method executes). Let’s call this action filter ActionInitializer:

[AttributeUsage( AttributeTargets.Method , Inherited = true , AllowMultiple = false )]
public class ActionInitializerAttribute : ActionFilterAttribute
{
    public override void  OnActionExecuted( ActionExecutedContext filterContext )
    {
        var area = filterContext.RouteData.DataTokens[ "area" ] ?? string.Empty;
        string action = filterContext.ActionDescriptor.ActionName;
        string controller = filterContext.ActionDescriptor.ControllerDescriptor.ControllerName;

        string actionInitializerKey = 
            string.Format( "{0}/{1}/{2}" , area.ToString( ) , controller , action );

        filterContext.HttpContext.Session.Add( actionInitializerKey , actionInitializerKey );

        base.OnActionExecuted( filterContext );
    }
}

This filter does a very simple thing. It gets the name of area, the name of the controller and the name of the action it is applied on and save them in Session in a area/controller/action format. This is a very basic way of stating that the action was executed. Let’s get back to the TODO number one above

In order to know what to look up in the Session object we need a way to tell the ActionInitializationRequired filter what action is responsible for initialization. For this we will the following properties:

private string _area;
private string _controller;
private string _action;

public string Area
{
    get
    {
        return _area ?? String.Empty;
    }
    set
    {
        _area = value;
    }
}

public string Controller
{
    get
    {
        return _controller ?? "Home";
    }
    set
    {
        _controller = value;
    }
}

public string Action
{
    get
    {
        return _action ?? "Index";
    }
    set
    {
        _action = value;
    }
}

private string ActionKey
{
    get
    {
        return string.Format( "{0}/{1}/{2}" , this.Area , this.Controller , this.Action );
    }
}

these properties (with the exception of the ActionKey property that is just a helper) will become Named Parameters for our authorization filter. Now we have everything we need to replace the first TODO line:

if ( httpContext.Session[ this.ActionKey ] == null )
{
    return false;
}

2. Add code to respond to the case when the initialization action wasn't called

For this we will follow a similar approach like the Authorize attribute and return a HTTP status code but instead of 401 Unauthorized we will return 403 Forbidden (we can also return a custom code and build a HTTP module that knows how to handle responses with that particular code, just like the FormsAuthentication module does but we will keep this simple). Before returning 403 let’s take a little detour and build a new ActionResult (or a new HttpStatusCodeResult because we will extend this class instead of ActionResult):

public class HttpForbiddenResult : HttpStatusCodeResult
{
    // HTTP 403 is the status code for Forbidden
    private const int ForbiddenCode = 403;

    public HttpForbiddenResult( )
        : this( null ) { }

    public HttpForbiddenResult( string statusDescription )
        : base( ForbiddenCode , statusDescription ) { }
}

This is not needed because we can use the HttpStatusCodeResult directly but it makes our code to look good. The replacement for the second TODO line is:

// Returns HTTP 403 
filterContext.Result = new HttpForbiddenResult( );

and this is it. Let’s assume the following:

We have a controller named Home in the root area
We have an action called Initializer to which we will apply the ActionInitializer attribute
We have an action called RequiresInitialization to which we will apply the ActionInitializationRequired attribute

This is how we use the attributes:

public class HomeController : Controller
{
    public ActionResult Index( )
    {
        return View( );
    }

    [ActionInitializer]
    public ActionResult Initializer( )
    {
        TempData[ "InitCalled" ] = "Action initializer called !!!";

        return RedirectToAction( "Index" );
    }

    [ActionInitializationRequired( Action = "Initializer" )]
    public ActionResult RequiresInitialization( )
    {
        return View( );
    }
}

The Index view looks like this:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@Html.ActionLink( "Call Action Initializer" , "Initializer" ) | 
@Html.ActionLink( "Call Action that requires initialization" , "RequiresInitialization" )

<br />

@if ( TempData[ "InitCalled" ] != null )
{ 
    <span>@TempData[ "InitCalled" ].ToString( )</span>
}

How it works

The inner workings are pretty simple:

An action filter add a key into the Session object after the action has executed.
An authorization filter checks the Session for that particular key and allows the execution of the action is applied on. If the key is not found then a 403 Forbidden HTTP status code is returned.

With the actual implementation we can only perform a one time initialization, that is if we call the initialization action we can call all the action that require initialization for the life time of the session. With a small modification we can have both one time and every time initializations (we cannot call an action that requires authorization more than once. If another call is needed the initialization action needs to be called again) but this is a subject for another post.

See it in action

Action Initializer Demo

References

Original post about the subject | Authorize Attribute | MVC3 Source Code | Aspect-oriented programming (AOP)

ASP.NET MVC–Cascading Dropdown Lists Tutorial–Part 6: Creating a jQuery Cascade Plugin

Sun, 08 May 2011 07:54:00 GMT

Part 1 – Defining the problem and the context
Part 2 – Cascading using normal FORM post (Html.BeginForm helper)
Part 3 – Cascading using Microsoft AJAX (Ajax.BeginForm helper)
Part 4 – Cascading using FORM Hijaxing
Part 5 – Cascading using jQuery.ajax():
Part 6 – Creating a jQuery Cascade Select Plugin

Part 6: Creating a jQuery Cascade Plugin

If we take a closer look at Part 5 we will see that there is to much repetition in the java script code (for example for each additional dropdown list we need to add a callback for the change event). Not to mention the code gets bigger and bigger with each dropdown list we add (even for the simplified version that uses jQuery Templates). So the next natural move will be to encapsulate all the code inside a jQuery Cascade Select Plugin.

In this post we will only define a template for the plugin which we will expand in the following posts. According to Plugins/Authoring tutorial we should start with:

(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {
                //The selector will probably return more than one element
                //Init the plugin for each element here
            });
        }
        //Other Methods here
    }

    $.fn.cascadeSelect = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        }
        else {
            $.error('Method ' + method + ' does not exist on jQuery.cascadeSelect');
        }
    };
})(jQuery);

There are two approaches for building the plugin:

Specify which element is the root and set the children of each element that will perform cascades
Specify the parent to each element that will participate in the cascade. The element with no parent is the root element

The second method is the most flexible as will allow us to bind the child to any parent event (not only ‘change’) and this will be the option for a general purpose cascade plugin (maybe in a future post). For out specific task, cascade dropdown lists the first option is better because we only need the ‘change’ event.

We have identified the first option we need to set: root, and because there is only one root the default value for the root option will be false (meaning that we will explicitly set the root element).

Looking again at part 5 we can see that for each element participating in the cascade we need the url from which we will load the content. There is no default value for this option. Next we need to specify the child/children of the current element (the children will be loaded when the current element’s selection changes) so we need a childSelector option.

We also need to show a text that will prompt the user to select an item ( promptText with the default value ‘[Please select an item]’ ) and a text to show when there is no information to be shown ( noInfoText with the default value ‘No information available’).

The plugin looks like this now:

(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {
                //The selector will probably return more than one element
                //Init the plugin for each element here
            });
        }
        //Other Methods here
    }

    $.fn.cascadeSelect = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        }
        else {
            $.error('Method ' + method + ' does not exist on jQuery.cascadeSelect');
        }
    };

    $.fn.cascadeSelect.defaults = {
        root: false,
        url: null,
        childSelector: null,
        promptText: '[Please select an item]',
        noInfoText: 'No information available'
    };
})(jQuery);

Now it’s time to implement the “init” method:

init: function (options) {
    return this.each(function () {
        // setup private variables
        var $this = $(this);

        options = $.extend({}, $.fn.cascadeSelect.defaults, options);

        //Save the options
        $this.data('options', options);

        if (options.promptText) {
            setPromptText($this);
        }

        if (options.noInfoText) {
            setNoInfoText($this);
        }

        if (options.root) {
            methods['load'].call($this);
        }
        else {
            toggleNoInfoText($this, true);
        }

        if (options.childSelector != null) {
            onChange($this);
        }
    });
}

First we initialize the $this variables and we merge the options (provided from the plugin consumer) with the default options. Because we need to read the options at a later time we use the jQuery data() function to associate the options data with the element.

Next are a series of checks:

We set the promptText if one exists (the plugin consumer can set it to null even if we have a default)
We set the noInfoText if one exists
If the element it is a root element we need to load it first so we all the “load” method. If the element is a child element we toggle the NoInfoText (there is no parent element selected yet).
If the element has childs then we bind to the “change” event.

As we can see in the list above there are a lot of new private functions to be added and a public one (“load”). The load function will perform an Ajax call to the url set in the parameters and will also introduce two new parameters, one called filter and one call onLoad:

The filter parameter will be null by default (for example we load all Continents) and will have a value when we want to filter the results (for the Countries dropdown list the value of the filter parameter will be “continentId” and the value to be filtered will be passed when the Continents’ dropdown lists value changes).
The onLoad parameter will override the Load function with a custom function passed in from the “client”. This is useful because the Load function only knows how to fill dropdown lists but we want to show the cities in a table.

The plugin looks like this now:

(function ($) {
    //Return the options stored for this element
    var getOptions = function (element) {
        var options = element.data('options');

        if (options) {
            return options;
        }
        else {
            $.error('The element must be initialized first');
        }
    }

    // Set the promt text that will appear as the first value
    var setPromptText = function (element) {
        var defaultValue = getOptions(element).promptText;
        var option = new Option(defaultValue, '');
        element.append(option);
    }

    // Set the text that will appear if there is no data to display
    var setNoInfoText = function (element) {
        var options = getOptions(element);
        var noInfoElement = $('<span></span>').attr('id', 'noInfo_' + element.attr('id')).append(options.noInfoText);

        element.parent().append(noInfoElement);
    }

    // Toggle the noInfoText
    var toggleNoInfoText = function (element, visible) {
        var noInfoElement = $('#noInfo_' + element.attr('id'));
        var options = getOptions(element);

        if (visible) {
            noInfoElement.show();
            element.hide();
        }
        else {
            noInfoElement.hide();
            element.show();
        }

        $(options.childSelector).each(function () {
            var child = $(this);
            var noInfoChildElement = $('#noInfo_' + child.attr('id'));

            noInfoChildElement.show();
            child.hide();
        });
    }

    var onChange = function (element) {
        element.bind('change', function () {
            var options = getOptions(element);
            //Iterate the childs
            $(options.childSelector).each(function () {
                var child = $(this);
                //Clear the child of its elements
                methods['clear'].call(child);

                if (element.val() != '') {
                    methods['load'].call(child, element.val());
                }
                else {
                    toggleNoInfoText(child, true);
                }
            });
        });
    }

    var methods = {
        init: function (options) {
            return this.each(function () {
                // setup private variables
                var $this = $(this);

                options = $.extend({}, $.fn.cascadeSelect.defaults, options);

                //Save the options
                $this.data('options', options);

                if (options.promptText) {
                    setPromptText($this);
                }

                if (options.noInfoText) {
                    setNoInfoText($this);
                }

                if (options.root) {
                    methods['load'].call($this);
                }
                else {
                    toggleNoInfoText($this, true);
                }

                if (options.childSelector != null) {
                    onChange($this);
                }
            });
        },
        load: function (data) {
            var element = $(this);
            var options = getOptions(element);

            var url = options.url;
            var filter = options.filter;
            var json = {};

            if (filter != null) {
                json[filter] = data;
            }

            data = data || null;

            var onLoadCallback = options.onLoad;
            if (onLoadCallback && $.isFunction(onLoadCallback)) {
                onLoadCallback.call(element, json);
            }
            else {
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: json,
                    dataType: 'JSON',
                    success: function (data) {
                        // because $('#id') != document.getElementById('id')
                        var domElement = element.get(0);

                        //Emtpy the dropdown list
                        for (var i = domElement.options.length - 1; i > 0; i--) {
                            domElement.remove(i);
                        }

                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                var item = data[i];
                                var option = new Option(item.Name, item.Id);
                                element.append(option);
                            }
                            toggleNoInfoText(element, false);
                        }
                        else {
                            toggleNoInfoText(element, true);
                        }
                    }
                });
            }
        }
    }

    $.fn.cascadeSelect = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        }
        else {
            $.error('Method ' + method + ' does not exist on jQuery.cascadeSelect');
        }
    };

    $.fn.cascadeSelect.defaults = {
        root: false,
        url: null,
        childSelector: null,
        promptText: '[Please select an item]',
        noInfoText: 'No information available',
        filter: null,
        onLoad: null
    };
})(jQuery);

There is nothing complicated about getOptions, setPromptText, setNoInfoText and toggleNoInfoText so let’s move to the onChange function. The onChange function binds some code the change event to the current element. When the change events happens we call the Clear function on each child and then call the Load function passing the selected item in case we selected an item and not the [Please select and item]. The Load function is very similar to what we’ve used in Part 5.1 with the exception of the callback onLoad function that overrides the default behavior.

There are two new additions, the Clear public function and the onClear parameter used to override the default behavior of the Clear function when the element is not a dropdown list. The final look of the plugin is:

(function ($) {
    //Return the options stored for this element
    var getOptions = function (element) {
        var options = element.data('options');

        if (options) {
            return options;
        }
        else {
            $.error('The element must be initialized first');
        }
    }

    // Set the promt text that will appear as the first value
    var setPromptText = function (element) {
        var defaultValue = getOptions(element).promptText;
        var option = new Option(defaultValue, '');
        element.append(option);
    }

    // Set the text that will appear if there is no data to display
    var setNoInfoText = function (element) {
        var options = getOptions(element);
        var noInfoElement = $('<span></span>').attr('id', 'noInfo_' + element.attr('id')).append(options.noInfoText);

        element.parent().append(noInfoElement);
    }

    // Toggle the noInfoText
    var toggleNoInfoText = function (element, visible) {
        var noInfoElement = $('#noInfo_' + element.attr('id'));
        var options = getOptions(element);

        if (visible) {
            noInfoElement.show();
            element.hide();
        }
        else {
            noInfoElement.hide();
            element.show();
        }

        $(options.childSelector).each(function () {
            var child = $(this);
            var noInfoChildElement = $('#noInfo_' + child.attr('id'));

            noInfoChildElement.show();
            child.hide();
        });
    }

    var onChange = function (element) {
        element.bind('change', function () {
            var options = getOptions(element);
            //Iterate the childs
            $(options.childSelector).each(function () {
                var child = $(this);
                //Clear the child of its elements
                methods['clear'].call(child);

                if (element.val() != '') {
                    methods['load'].call(child, element.val());
                }
                else {
                    toggleNoInfoText(child, true);
                }
            });
        });
    }

    var methods = {
        init: function (options) {
            return this.each(function () {
                // setup private variables
                var $this = $(this);

                options = $.extend({}, $.fn.cascadeSelect.defaults, options);

                //Save the options
                $this.data('options', options);

                if (options.promptText) {
                    setPromptText($this);
                }

                if (options.noInfoText) {
                    setNoInfoText($this);
                }

                if (options.root) {
                    methods['load'].call($this);
                }
                else {
                    toggleNoInfoText($this, true);
                }

                if (options.childSelector != null) {
                    onChange($this);
                }
            });
        },
        clear: function () {
            var element = $(this);
            var options = getOptions(element);

            var onClearCallback = options.onClear;
            if (onClearCallback && $.isFunction(onClearCallback)) {
                onClearCallback.call(element);
            }
            else {
                if (options.noInfoText) {
                    var domElement = element.get(0);
                    for (var i = domElement.options.length - 1; i > 0; i--) {
                        domElement.remove(i);
                    }
                }
                else {
                    element.empty();
                }

                //Call clear on the childs as well
                $(options.childSelector).each(function () {
                    var child = $(this);
                    //Clear the child of its elements
                    methods['clear'].call(child);
                });
            }
        },
        load: function (data) {
            var element = $(this);
            var options = getOptions(element);

            var url = options.url;
            var filter = options.filter;
            var json = {};

            if (filter != null) {
                json[filter] = data;
            }

            data = data || null;

            var onLoadCallback = options.onLoad;
            if (onLoadCallback && $.isFunction(onLoadCallback)) {
                onLoadCallback.call(element, json);
            }
            else {
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: json,
                    dataType: 'JSON',
                    success: function (data) {
                        // because $('#id') != document.getElementById('id')
                        var domElement = element.get(0);

                        //Emtpy the dropdown list
                        for (var i = domElement.options.length - 1; i > 0; i--) {
                            domElement.remove(i);
                        }

                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                var item = data[i];
                                var option = new Option(item.Name, item.Id);
                                element.append(option);
                            }
                            toggleNoInfoText(element, false);
                        }
                        else {
                            toggleNoInfoText(element, true);
                        }
                    }
                });
            }
        }
    };

    $.fn.cascadeSelect = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        }
        else {
            $.error('Method ' + method + ' does not exist on jQuery.cascadeSelect');
        }
    };

    $.fn.cascadeSelect.defaults = {
        root: false,
        url: null,
        childSelector: null,
        promptText: '[Please select an item]',
        noInfoText: 'No information available',
        filter: null,
        onLoad: null,
        onClear: null
    };
})(jQuery);

and this is how to use it:

<fieldset>
    <legend>Continents</legend>
    <select id='continents'></select>
</fieldset>
<fieldset>
    <legend>Countries</legend>
    <select id='countries'></select>
</fieldset>
<fieldset>
    <legend>Cities</legend>
    <table id='cities'>
        <tr>
            <th>
                Name
            </th>
            <th>
                Population
            </th>
        </tr>
    </table>
</fieldset>

<script type='text/javascript'>
    $(document).ready(function () {
        $('#continents').cascadeSelect({
            root: true,
            url: '/CascadingDropDownLists/DropDownjQueryAjaxPost/GetContinents',
            promptText: '[Please select a continent]',
            //promptText: null,
            childSelector: '#countries'
        });

        $('#countries').cascadeSelect({
            url: '@/CascadingDropDownLists/DropDownjQueryAjaxPost/GetCountries',
            promptText: '[Please select a country]',
            filter: "continentId",
            childSelector: '#cities'
        });

        $('#cities').cascadeSelect({
            promptText: null,
            filter: "countryId",
            onLoad: loadCities,
            onClear: clearCities
        });
    });

    function clearCities() {
        var cities = $(this);
        var domCities = cities.get(0);
        for (var i = domCities.rows.length - 1; i > 0; i--) {
            domCities.deleteRow(i);
        }
    }

    function loadCities(data) {
        var cities = $(this);
        var domCities = cities.get(0);
        var noInfo = $('#noInfo_' + cities.attr('id'));

        $.ajax({
            url: '/CascadingDropDownLists/DropDownjQueryAjaxPost/GetCities',
            data: data,
            type: 'GET',
            success: function (data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];

                        var lastRow = domCities.rows.length;
                        var cityRow = domCities.insertRow(lastRow);

                        var cityName = cityRow.insertCell(0);
                        cityName.innerHTML = item.Name;

                        var cityPopulation = cityRow.insertCell(1);
                        cityPopulation.innerHTML = item.Population.toString();
                        cityPopulation.align = 'right';
                    }
                    noInfo.hide();
                    cities.show();
                }
                else {
                    noInfo.show();
                    cities.hide();
                }
            }
        });
    }
</script>

See it in action

Cascading Dropdown Lists - jQuery Cascade Plugin

Download

Download code

ASP.NET MVC–Display visual hints for the fields in your form

Sun, 01 May 2011 06:54:00 GMT

Problem

You want to display additional information near a form field in order to help the users complete de form.
You want the information to be visible only when the field has focus.

Context

We will use the following model:

public class RegisterModel
{
    [Required( ErrorMessage = "You must specify a username." )]
    [Display(
        Name = "User name" ,
        Description = "Choose something unique so others will know which contributions are yours."
    )]
    public string UserName { get; set; }

    [Required( ErrorMessage = "You must specify an email address." )]
    [DataType( DataType.EmailAddress )]
    [Display(
        Name = "Email address" ,
        Description = "Your email will not be public. It is required to verify your registration and for " +
                        "password retrieval, important notifications, etc."
    )]
    public string Email { get; set; }

    [Required( ErrorMessage = "You must specify a password." )]
    [StringLength( 64 ,
        ErrorMessage = "You must specify a password of {2} or more characters." ,
        MinimumLength = 7 )]
    [DataType( DataType.Password )]
    [Display( Name = "Password" , Description = "Passwords must be at least 7 characters long." )]
    public string Password { get; set; }

    [DataType( DataType.Password )]
    [Display(
        Name = "Confirm password" ,
        Description = "Please reenter your password and ensure that it matches the one above."
    )]
    [Compare( "Password" , ErrorMessage = "The Password and Confirmation Password must match" )]
    public string ConfirmPassword { get; set; }
}

This is a standard RegisterModel that gets created with the MVC3 Internet Application project template. There is a little addition to the model in the form of the DisplayAttribute’s Description property.

In order to show the additional information we will use a jQuery ToolTip plugin from jQuery Tools (see the references section). The plugin requires that each field to have a title attribute so the first task will be to write the value of the Description property into the title attribute.

We will use an Editor Template for the RegisterModel class and we do this by adding a folder called EditorTemplates in the Views\SharedFolder. In order to be picked up automatically by the EditorFor helpers the template needs to have the same name as the class (RegisterModel.cshtml in our case):

RegisterModel.cshtml:

@using Mvc3.Extensions.Demo.Areas.Various.Models
@model RegisterModel
<div class="editor-label">
    @Html.LabelFor( model => model.UserName , null , null , null )
</div>
<div class="editor-field">
    @Html.TextBoxFor( 
        model => model.UserName , 
        new { title = ModelMetadata.FromLambdaExpression<RegisterModel , string>(
            model => model.UserName , ViewData ).Description } )  
    @Html.ValidationMessageFor( model => model.UserName )
</div>
<div class="editor-label">
    @Html.LabelFor( model => model.Email , null , null , null )
</div>
<div class="editor-field">
    @Html.TextBoxFor( 
        model => model.Email , 
        new { title = ModelMetadata.FromLambdaExpression<RegisterModel , string>( 
            model => model.Email , ViewData ).Description } )  
    @Html.ValidationMessageFor( model => model.Email )
</div>
<div class="editor-label">
    @Html.LabelFor( model => model.Password , null , null , null )
</div>
<div class="editor-field">
    @Html.TextBoxFor( 
        model => model.Password , 
        new { title = ModelMetadata.FromLambdaExpression<RegisterModel , string>( 
            model => model.Password , ViewData ).Description } )  
    @Html.ValidationMessageFor( model => model.Password )
</div>
<div class="editor-label">
    @Html.LabelFor( model => model.ConfirmPassword , null , null , null )
</div>
<div class="editor-field">
    @Html.TextBoxFor( 
        model => model.ConfirmPassword , 
        new { title = ModelMetadata.FromLambdaExpression<RegisterModel , string>( 
            model => model.ConfirmPassword , ViewData ).Description } )  
    @Html.ValidationMessageFor( model => model.ConfirmPassword )
</div>

Two things are to be noted here:

The Label helper is the one from this post: ASP.NET MVC – Display visual hints for the required fields in your model
The value of title attribute is set by calling the static generic method FromLambdaExpression from the ModelMetadata class. The type parameters are the model type from which we want to extract metadata and the type of the property. For parameters we have an expression that identifies the model and the view data dictionary. The function returns a ModelMetadata object and we read the value of the Description property.

We call the template from the Register.cshtml view:

Register.cshtml:

@using ( Html.BeginForm( ) )
{ 
    <fieldset>
        <legend>Register</legend>
        @Html.EditorForModel()
    </fieldset>
    <input type="submit" value="Register" />
}

Everything is set except for the tooltip.

Adding a jQuery Tools Tooltip plugin

We need to add a reference to the jQuery Tools script file and the ToolTip css file (I’ve used the jQuery Tools CDN but the files can be downloaded and added to the project):

<!-- include the Tools -->
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/tiny/jquery.tools.min.js"></script>
<!-- tooltip styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tooltip-generic.css"/>

<!-- javascript coding -->
<script type="text/javascript">
    // execute your scripts when the DOM is ready. this is a good habit
    $(function () {
        // select all desired input fields and attach tooltips to them
        $("form :input").tooltip({
            // place tooltip on the right edge
            position: "center right",

            // a little tweaking of the position
            offset: [-2, 10],

            // use the built-in fadeIn/fadeOut effect
            effect: "fade",

            // custom opacity setting
            opacity: 0.7
        });
    });
</script>

now when the focus enters a field a tool tip will appear on the right with the description set in the Display attribute.

See it in action

ASP.NET MVC 3 - ToolTip

References

jQuery Tools | ModelMetadata class

Download

Download code

ASP.NET MVC–Displaying a tree view using a recursive declarative helper and jQuery

Sun, 24 Apr 2011 17:47:00 GMT

Problem

You want to display your model using a a nested <ul>, <li> structure
You want to be able to click on a leaf and perform an action

Context

We will use the model defined here and in order to hold our nested structure we will define a class named Folder:

public class Folder
{
    public Folder( )
    {
        this.Subfolders = new List<Folder>( );
    }

    public int Id { get; set; }
    public string Name { get; set; }
    public string Type { get; set; }
    public IList<Folder> Subfolders { get; private set; }
    public bool IsLeaf
    {
        get
        {
            return this.Subfolders.Count == 0;
        }
    }
}

There is nothing complicated about this class. It has some properties and a list of subfolders.

Let’s create a controller called TreeViewController:

public partial class TreeViewController : Controller
{
    private readonly IContinentRepository _continentRepository;
    private readonly ICityRepository _cityRepository;

    // If you are using Dependency Injection, you can delete the following constructor
    public TreeViewController( ) : this( new ContinentRepository( ) , new CityRepository( ) ) { }

    public TreeViewController( IContinentRepository continentRepository , ICityRepository cityRepository )
    {
        this._continentRepository = continentRepository;
        this._cityRepository = cityRepository;
    }

    [HttpGet]
    public virtual ActionResult Index( )
    {
        return View( this.Atlas( ) );
    }

    [HttpGet]
    public virtual ActionResult GetCity( int cityId )
    {
        var city = this._cityRepository.Find( cityId );

        return Json(
            new { Name = city.Name , Population = city.Population } ,
            JsonRequestBehavior.AllowGet );
    }

    private IList<Folder> Atlas( )
    {
        IList<Folder> continents = new List<Folder>( );

        foreach ( var continent in this._continentRepository.All )
        {
            var continentFolder = new Folder
            {
                Id = continent.Id ,
                Name = continent.Name ,
                Type = "continent"
            };

            foreach ( var country in continent.Countries )
            {
                var countryFolder = new Folder
                {
                    Id = country.Id ,
                    Name = country.Name ,
                    Type = "country"
                };

                foreach ( var city in country.Cities )
                {
                    var cityFolder = new Folder
                    {
                        Id = city.Id ,
                        Name = city.Name ,
                        Type = "city"
                    };

                    countryFolder.Subfolders.Add( cityFolder );
                }

                continentFolder.Subfolders.Add( countryFolder );
            }

            continents.Add( continentFolder );
        }

        return continents;
    }
}

We have a Index action that will return our view. The Index view receives a list of continents, countries and cities wrapped in a nested Folder structure (the Atlas function is just a quick and dirty way of creating the nested Folder structure). There is also a GetCity action that will return the city information when we will click it in the tree view.

Index.cshtml:

@model IEnumerable<Folder>
@helper TreeView( IEnumerable<Folder> folders )
{
    foreach ( var folder in folders )
    {
        <li>
            @if ( folder.IsLeaf )
            {
                <span class="leaf @folder.Type" id="@folder.Id">@folder.Name</span> 
            }
            else
            {
                <span class="folder">@folder.Name</span>
                <ul>
                    @TreeView( folder.Subfolders )
                </ul>
            }
        </li>
    }
}
<ul id="continentFolders">
    @TreeView( Model )
</ul>

The @helper keyword is a new feature introduced by the Razor view engine, called a declarative helper (for a comparison of MVC 3 Helpers see Jon Galloway’s article in the References section). The FolderTree helper is nothing more than a recursive function that will output <ul> and <li> tags based on the folders parameter.

If we run this now it will look like this:

Adding a jQuery Tree view plugin

We can make our tree view more functional by using a jQuery tree plugin (see the References section):

<script type="text/javascript">
    $(document).ready(function () {
        $('#continentFolders').treeview({ collapsed: true });

        $(".leaf.city").click(function () {
            $.ajax({
                url: '@Url.Action( MVC.Various.TreeView.GetCity( ) )',
                data: { cityId: $(this).attr("id") },
                type: 'GET',
                success: function (data) {
                    alert("Selected city: " + data.Name + ", population: " + data.Population.toString());
                }
            });
        });
    });
</script>

when a city is clicked we make an ajax request to the GetCity action and show some city details.

See it in action

ASP.NET MVC 3 - TreeView

References

Comparing MVC 3 Helpers, by Jon Galloway | jQuery plugin: Treeview | Another implementation I have found, by Roberto Hernández

Download

Download code

ASP.NET MVC–Cascading Dropdown Lists Tutorial–Part 5.3: Cascading using jQuery.ajax() ($.ajax() and Knockout.js)

Sun, 17 Apr 2011 17:46:00 GMT

Part 1 – Defining the problem and the context
Part 2 – Cascading using normal FORM post (Html.BeginForm helper)
Part 3 – Cascading using Microsoft AJAX (Ajax.BeginForm helper)
Part 4 – Cascading using FORM Hijaxing
Part 5 – Cascading using jQuery.ajax():
- Part 5.1 – $.ajax() and DOM Objects
- Part 5.2 – $.ajax() and jQuery Templates
- Part 5.3 – $.ajax() and Knockout.js
Part 6 – Creating a jQuery Cascade Select Plugin

Part 5.3: Cascading using jQuery.ajax() ($.ajax() and Knockout.js)

For this part we will use Knockout.ks:

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably. (see the References section).

Before reading further it is better to read the Knockout.js documentation + demos (2-3 hours read) as the things can get really confusing.

We will reuse the controller from Part 5.1 and add a new action called KnockOutJs:

public virtual ViewResult KnockOutJs( )
{
    return View( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.Views.KnockoutJs );
}

And of course the KnockoutJs.cshtml:

<fieldset>
    <legend>Continents</legend>
    <select id="continents" 
            data-bind='
                options: continents, 
                optionsValue : "Id", 
                optionsText: "Name", 
                optionsCaption: "[Please select a continent]", 
                value: selectedContinent'>
    </select>
</fieldset>
<fieldset>
    <legend>Countries</legend>
    <div>
        <select id="countries" 
                data-bind='
                    options: selectedContinent() ? countries : null, 
                    optionsValue : "Id", 
                    optionsText: "Name", 
                    optionsCaption: "[Please select a country]", 
                    value: selectedCountry,
                    visible: (countries() && countries().length > 0)'>
        </select>
        <span data-bind='
            template: {name: "noInfoTemplate"},
            visible: !(countries() && countries().length > 0)'>
        </span>
    </div>
</fieldset>
<fieldset>
    <legend>Cities</legend>
    <div>
        <table data-bind='visible: (cities() && cities().length > 0 )'>
            <thead>
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Population
                    </th>
                </tr>
            </thead>
            <tbody data-bind='template: {name: "citiesTemplate", foreach: cities}'>
            </tbody>
        </table>
        <span data-bind='
            template: {name: "noInfoTemplate"},
            visible: !(cities() && cities().length > 0 )'>
        </span>
    </div>
</fieldset>
@DateTime.Now.ToString( "dd/MM/yyyy HH:mm:ss:fff" )
<script type="text/html" id="citiesTemplate">
    <tr>
        <td>${Name}</td>
        <td align='right'>${Population}</td>
    </tr>
</script>
<script type="text/html" id="noInfoTemplate">
    No Information Available
</script>

Compared to Part 5.1 and 5.2 there is a lot of code but the real power of Knockout.js is when we have a very complex view. Knockout.js introduces an attribute called “data-bind” that binds the html tag to a JavaScript view model, for short.

For the continents dropdown list we have the following (in exact order of the properties):

Get the options from the model property called continents
The option value will be filled from the Id property of each Continent item
The option text (what we see) will be filled from the Name property of each Continent item
The first item presented to the use, the option caption, is set to “[Please select a continent]” (the value for this option will be undefined or null)
The value of the selected Continent will go the selectedContinent property from the view model

For the countries dropdown list we have the following (in exact order of the properties):

Get the options from the model property called countries but only if there is a continent selected
The option value will be filled from the Id property of each Country item
The option text (what we see) will be filled from the Name property of each Country item
The first item presented to the use, the option caption, is set to “[Please select a country]” (the value for this option will be undefined or null)
The value of the selected Country will go the selectedCountry property from the view model
The countries dropdown list will only be visible if the countries property is not null and not empty (visible expects a value that will evaluate to true/false, 1/0, null, undefined)

For the cities we have the following:

The cities table is only visible if the cities property is not null and not empty
The cities table body gets its data (the rows) from a template called citiesTemplate which is called for each City in the cities property. We could use the {{each}} template tag directly in the template but in this way if a City is added to the cities array it will be automatically displayed.

There are also 2 span tags visible if the countries and cities table are not visible. The span tags get their inner html form the noInfoTemplate.

Now let’s see how the view model looks. Here is the complete script used by this view:

<script type='text/javascript'>
    $(document).ready(function () {
        var atlas = function () {
            this.selectedContinent = ko.observable();
            this.selectedCountry = ko.observable();
            this.continents = ko.observableArray();
            this.countries = ko.observableArray();
            this.cities = ko.observableArray();
            // Whenever the continent changes, reset the country selection
            this.selectedContinent.subscribe(function (continentId) {
                this.selectedCountry(undefined);
                this.countries(undefined);
                if (continentId != null) {
                    $.ajax({
                        url: '@Url.Action( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.GetCountries( ) )',
                        data: { continentId: continentId },
                        type: 'GET',
                        success: function (data) {
                            atlasViewModel.countries(data);
                        }
                    });
                }
            } .bind(this));
            this.selectedCountry.subscribe(function (countryId) {
                this.cities(undefined);
                if (countryId != null) {
                    $.ajax({
                        url: '@Url.Action( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.GetCities( ) )',
                        data: { countryId: countryId },
                        type: 'GET',
                        success: function (data) {
                            atlasViewModel.cities(data);
                        }
                    });
                }
            } .bind(this));
        };
        var atlasViewModel = new atlas();
        ko.applyBindings(atlasViewModel);
        //Load the continents
        $.ajax({
            url: '@Url.Action( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.GetContinents( ) )',
            type: 'GET',
            success: function (data) {
                atlasViewModel.continents(data);
            }
        });
    });
</script>

Another important piece of the Knockout.js library are the observable properties. When the observable properties change the tags with data-bind attribute will be automatically updated . We can also subscribe to the modification of those properties (as we did for the selectedContinent and selectedCountry properties). Knockout.js is activated by calling the applyBindings method with the view model passed as the argument.

The above code does the following:

When the document is ready we make an Ajax request for the continents. The continents property of the view model is updated and it triggers the UI update (if there are binding to that property).
When we select a continent the selectedContinent property is updated (through the data-bind properties)
Because we have a subscription for the changing of the selectedContinent property our function will be called.
The function will clear the selectedCountry and the cities array (again triggering the UI update)
If the selected continent is not null (in other words if we haven’t selected the [Please select a continent] option) we make an Ajax request for the countries based on the selected continent id and the countries property is updated with the data received from the server (triggering an UI update).

The function for the selectedCountry changed event is similar as the selectedContinent one.

See it in action

Cascading Dropdown Lists - Knockout.js

The code can be improved by adding 2 dependent observables called countriesVisible and citiesVisible that should be used instead of (countries() && countries().length > 0) statement. Dependent observables depend on the other properties (they are basically function that return a result based on the other properties). For those reading the documentation should be easy to implement.

References

Knockout.js – Documentation | Knockout.js - Samples

Download

Download code

ASP.NET MVC–Cascading Dropdown Lists Tutorial–Part 5.2: Cascading using jQuery.ajax() ($.ajax() and jQuery Templates)

Sun, 10 Apr 2011 19:28:00 GMT

Part 1 – Defining the problem and the context
Part 2 – Cascading using normal FORM post (Html.BeginForm helper)
Part 3 – Cascading using Microsoft AJAX (Ajax.BeginForm helper)
Part 4 – Cascading using FORM Hijaxing
Part 5 – Cascading using jQuery.ajax():
- Part 5.1 – $.ajax() and DOM Objects
- Part 5.2 – $.ajax() and jQuery Templates
- Part 5.3 – $.ajax() and Knockout.js
Part 6 – Creating a jQuery Cascade Select Plugin

Part 5.2: Cascading using jQuery.ajax() ($.ajax() and jQuery Templates)

We will reuse the controller from Part 5.1 and add a new action called jQueryTemplates:

public virtual ViewResult jQueryTemplates( )
{
    return View( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.Views.jQueryTemplates );
}

And of course the jQueryTemplates.cshtml:

<fieldset>
    <legend>Continents</legend>
    <div id='continentsContainer'>
    </div>
</fieldset>
<fieldset>
    <legend>Countries</legend>
    <div id='countriesContainer'>
    </div>
</fieldset>
<fieldset>
    <legend>Cities</legend>
    <div id="citiesContainer">
    </div>
</fieldset>

Compared to Part 5.1 where we had some empty select tags here we have only empty div tags. We will use jQuery Templates (see the References section for jQuery Templates documentation and samples) to define templates for the following:

Continents and Countries dropdown lists
Cities table
“No Information available”

For the Continents and Countries dropdown lists we will define a template called selectTemplate:

<script id="selectTemplate" type="text/html">
    {{if options.length}}
        <select id='${id}'>
            <option value=''>${choose}</option>
            {{each options}}
                <option value='${Id}'>${Name}</option>
            {{/each}}
        </select>
    {{else}}
        {{tmpl '#noInfoTemplate'}}
    {{/if}}
</script>

This is how we define a template. It has a name to help identify it and a type. The template receives, as a parameter an object with 3 properties:

id – becomes the select tag id
choose – becomes the first option ([Please select a continent])
options – an array of objects that have an Id and Name property

The ideea si simple. If there are any options then we output a select tag and for each option and option tag. If the options array is empty we call another template called “noInfoTemplate” that will output the text “No Information Available” (or anything we want).

The citiesTemplate:

<script id="citiesTemplate" type="text/html">
    {{if cities.length}}
        <table>
            <tr>
                <th>Name</th>
                <th>Population</th>
            </tr>
            {{each cities}}
                <tr>
                    <td>${Name}</td>
                    <td align='right'>${Population}</td>
                </tr>
            {{/each}}
        </table>
    {{else}}
        {{tmpl '#noInfoTemplate'}}
    {{/if}}
</script>

We follow the same idea. If the cities array is empty we call the noInfoTemplate, otherwise we output a table by using the {{each}} template tag.

And finally the very complicated noInfoTemplate:

<script id="noInfoTemplate" type="text/html">
    No information available
</script>

This is not all. We still need to perform the ajax requests and fill the templates with data. We can copy the functions form Part 5.1 and do some adjustments:

<script type='text/javascript'>
    $(document).ready(function () {
        //Load the continents
        $.ajax({
            url: '@Url.Action( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.GetContinents( ) )',
            type: 'GET',
            success: function (data) {
                $("#continentsContainer").html($("#selectTemplate").tmpl({
                    id: 'continents',
                    choose: '[Please select a continent]',
                    options: data 
                }));
                $('#countriesContainer').html($('#noInfoTemplate').tmpl());
                $('#citiesContainer').html($('#noInfoTemplate').tmpl());
            }
        });
        //Catch the continents change event
        $('#continents').live('change', function () {
            $('#citiesContainer').html($('#noInfoTemplate').tmpl());
            if ($('#continents option:selected').val() != '') {
                $.ajax({
                    url: '@Url.Action( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.GetCountries( ) )',
                    data: { continentId: $('#continents option:selected').val() },
                    type: 'GET',
                    success: function (data) {
                        $("#countriesContainer").html($("#selectTemplate").tmpl({
                            id: 'countries',
                            choose: '[Please select a country]',
                            options: data 
                        }));
                    }
                });
            }
            else {
                $('#countriesContainer').html($('#noInfoTemplate').tmpl());
            }
        });
        //Catch the countries change event
        $('#countries').live('change', function () {
            if ($('#countries option:selected').val() != '') {
                $.ajax({
                    url: '@Url.Action( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.GetCities( ) )',
                    data: { countryId: $('#countries option:selected').val() },
                    type: 'GET',
                    success: function (data) {
                        $("#citiesContainer").html($("#citiesTemplate").tmpl({ cities: data }));
                    }
                });
            }
            else {
                $('#citiesContainer').html($('#noInfoTemplate').tmpl());
            }
        });
    });
</script>

See it in action

Cascading Dropdown Lists - jQuery Templates

The code is much simple and clean now. We only have 1 line of code to create all 3 tags by calling the tmpl() function with the data returned from the server. But we still have to manually call the NoInfoTemplate if no data is returned or if there is nothing selected and there is still a lot of plumbing.

In Part 5.3 we will use Knockout.js to further improve the way we perform the cascading.

Download

Download code

ASP.NET MVC–Cascading Dropdown Lists Tutorial–Part 5.1: Cascading using jQuery.ajax() ($.ajax() and DOM Objects)

Sun, 03 Apr 2011 19:24:00 GMT

Part 1 – Defining the problem and the context
Part 2 – Cascading using normal FORM post (Html.BeginForm helper)
Part 3 – Cascading using Microsoft AJAX (Ajax.BeginForm helper)
Part 4 – Cascading using FORM Hijaxing
Part 5 – Cascading using jQuery.ajax():
- Part 5.1 – $.ajax() and DOM Objects
- Part 5.2 – $.ajax() and jQuery Templates
- Part 5.3 – $.ajax() and Knockout.js
Part 6 – Creating a jQuery Cascade Select Plugin

Part 5.1: Cascading using jQuery.ajax() ($.ajax() and DOM Objects)

In this part we will use ASP.NET MVC to create an application that will act more like a JSON service than a Web application. For start let’s create a new controller called DropDownjQueryAjaxPostController:

public partial class DropDownjQueryAjaxPostController : Controller
{
    private readonly IContinentRepository _continentRepository;
    private readonly ICountryRepository _countryRepository;
    private readonly ICityRepository _cityRepository;
    // If you are using Dependency Injection, you can delete the following constructor
    public DropDownjQueryAjaxPostController( ) 
        : this( new ContinentRepository( ) , new CountryRepository( ) , new CityRepository( ) ) { }
    public DropDownjQueryAjaxPostController( 
        IContinentRepository continentRepository , 
        ICountryRepository countryRepository , 
        ICityRepository cityRepository )
    {
        this._continentRepository = continentRepository;
        this._countryRepository = countryRepository;
        this._cityRepository = cityRepository;
    }
    public virtual ViewResult Index( )
    {
        return View( );
    }
}

Nothing unusual here. We set up repositories and the Index action. The unusual thing is that we return the Index view without any model and that the Index view is the only view we have:

@{
    ViewBag.Title = "Index";
}
<fieldset>
    <legend>Continents</legend>
    <select id='continents'>
        <option value=''>[Please select a continent]</option>
    </select>
</fieldset>
<fieldset>
    <legend>Countries</legend>
    <div id="countriesContainer">
        <select id='countries' style='display: none;'>
            <option value=''>[Please select a country]</option>
        </select>
        <span id='noInfoCountries'>No information available </span>
    </div>
</fieldset>
<fieldset>
    <legend>Cities</legend>
    <div id="citiesContainer">
        <table id='cities' style='display: none;'>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Population
                </th>
            </tr>
        </table>
        <span id='noInfoCities'>No information available </span>
    </div>
</fieldset>

Let’s see what we have:

An empty continents dropdown list (we could fill the continents from the view but we’ll see another way)
An empty hidden countries dropdown list and a “No information available” span that will be visible if there is no continent selected
An empty hidden cities table and another “No information available” span that will be visible if there is no country selected

So the first thing that we have to do is to fill the continents dropdown list when the page loads:

<script type='text/javascript'>
    $(document).ready(function () {
        //Load the continents
        $.ajax({
            url: '@Url.Action( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.GetContinents( ) )',
            type: 'GET',
            success: function (data) {
                var contients = $('#continents');
                var domContinents = contients.get(0); // $('#id') != document.getElementById('id')
                //Empty the continents dropdown list
                for (var i = domContinents.options.length - 1; i > 0; i--) {
                    domContinents.remove(i);
                }
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var continentOption = new Option(item.Name, item.Id);
                    contients.append(continentOption);
                }
            }
        });
    });
</script>

We use the jQuery.ajax () method (or $.ajax() for short) to perform a Ajax Get request on the GetContinents action. If the call succeds we clear the contents of the dropdownlist and fill it with the data received. Nothing to complicated, just javascript objects and method calls. The only odd thing is the continents and domContinents (see the comment in the code above).

Next we need to catch the change event for the continents dropdown list and perform another Ajax Get request to get the countries for the selected continent:

//Catch the continents change event
$('#continents').live('change', function () {
    var countries = $('#countries');
    var noInfo = $('#noInfoCountries');
    var domCountries = countries.get(0);
    for (var i = domCountries.options.length - 1; i > 0; i--) {
        domCountries.remove(i);
    }
    $('#cities').hide();
    $('#noInfoCities').show();
    if ($('#continents option:selected').val() != '') {
        $.ajax({
            url: '@Url.Action( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.GetCountries( ) )',
            data: { continentId: $('#continents option:selected').val() },
            type: 'GET',
            success: function (data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        var countryOption = new Option(item.Name, item.Id);
                        countries.append(countryOption);
                    }
                    noInfo.hide();
                    countries.show();
                }
                else {
                    countries.hide();
                    noInfo.show();
                }
            }
        });
    }
    else {
        countries.hide();
        noInfo.show();
    }
});

When the continents dropdown list selection changes we empty the countries dropdown list. The request is only performed if there is a continent selected, otherwise the “No Information Available” span becomes visible. The span becomes visible also if there are no countries in the continent (for Antarctica).

Next we catch the countries dropdown list change event:

//Catch the countries change event
$('#countries').live('change', function () {
    var cities = $('#cities');
    var domCities = cities.get(0);
    for (var i = domCities.rows.length - 1; i > 0; i--) {
        domCities.deleteRow(i);
    }
    var noInfo = $('#noInfoCities');
    if ($('#countries option:selected').val() != '') {
        $.ajax({
            url: '@Url.Action( MVC.CascadingDropDownLists.DropDownjQueryAjaxPost.GetCities( ) )',
            data: { countryId: $('#countries option:selected').val() },
            type: 'GET',
            success: function (data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        var lastRow = domCities.rows.length;
                        var cityRow = domCities.insertRow(lastRow);
                        var cityName = cityRow.insertCell(0);
                        cityName.innerHTML = item.Name;
                        var cityPopulation = cityRow.insertCell(1);
                        cityPopulation.innerHTML = item.Population.toString();
                        cityPopulation.align = 'right';
                    }
                    noInfo.hide();
                    cities.show();
                }
                else {
                    cities.hide();
                    noInfo.show();
                }
            }
        });
    }
    else {
        countries.hide();
        noInfo.show();
    }
});

This is it. Not to complicated but there is some code to write.

See it in action

Cascading Dropdown Lists - jQuery.ajax()

There are some things that can be improved in this method:

Using the DOM objects is kind of ugly (adding and removing options and rows)
There are a lot of ifs to hide and show elements depending on selections

We will correct them in the next 2 parts

Download

Download code

ASP.NET MVC–Cascading Dropdown Lists Tutorial–Part 4: Cascading using FORM Hijaxing

Sun, 27 Mar 2011 19:20:00 GMT

Part 1 – Defining the problem and the context
Part 2 – Cascading using normal FORM post (Html.BeginForm helper)
Part 3 – Cascading using Microsoft AJAX (Ajax.BeginForm helper)
Part 4 – Cascading using FORM Hijaxing
Part 5 – Cascading using jQuery.ajax():
Part 6 – Creating a jQuery Cascade Select Plugin

Part 4 – Cascading using FORM Hijaxing

First of all let’s see what we have so far:

In Part 2 we used the Html.BeginForm helper to cascade the dropdown lists. We click a Select button, the page is refreshed entirely and we have the Countries dropdown list filled with data (or the Cities table).
In Part 3 we used the Ajax.BeginForm helper to cascade the dropdown lists by updating only a portion of the page. We also have a fallback mechanism in case JavaScript is disabled, in which case the behavior is exactly as in Part 2. We still need to click the Select buttons.

In this part we will combine the previous parts (updating only a portion of the page, fallback in case JavaScript is disabled and using Html.BeginForm) and we will remove the need to click a Select button to cascade (this will happen when we select an option from the dropdown list) by using a technique named Hijaxing (see the References section).

We will start by copying the DropDownAjaxPostController and renaming it to DropDownHijaxPostController. Everything stays the same (except for the name of the constructor and the path for the views):

public partial class DropDownHijaxPostController : Controller
{
    private readonly IContinentRepository _continentRepository;
    // If you are using Dependency Injection, you can delete the following constructor
    public DropDownHijaxPostController( ) : this( new ContinentRepository( ) ) { }
    public DropDownHijaxPostController( IContinentRepository continentRepository )
    {
        this._continentRepository = continentRepository;
    }
    public virtual ActionResult Index( )
    {
        Atlas atlas = new Atlas( );
        atlas.Continents = this._continentRepository.All;
        return View( atlas );
    }
    [HttpPost]
    public virtual ActionResult SelectContinent( int? selectedContinentId )
    {
        var countries = selectedContinentId.HasValue
            ? this._continentRepository.Find( selectedContinentId.Value ).Countries
            : null;
        Atlas atlas = new Atlas
        {
            SelectedContinentId = selectedContinentId ,
            Continents = this._continentRepository.All ,
            Countries = countries
        };
        if ( Request.IsAjaxRequest( ) )
        {
            return PartialView( MVC.CascadingDropDownLists.DropDownHijaxPost.Views._Countries , atlas );
        }
        else
        {
            return View( MVC.CascadingDropDownLists.DropDownHijaxPost.Views.Index , atlas );
        }
    }
    [HttpPost]
    public virtual ActionResult SelectCountry( int? selectedContinentId , int? selectedCountryId )
    {
        var selectedContinent = selectedContinentId.HasValue
            ? this._continentRepository.Find( selectedContinentId.Value )
            : null;
        var countries = ( selectedContinent != null )
            ? selectedContinent.Countries
            : null;
        var cities = ( countries != null && selectedCountryId.HasValue )
            ? countries.Where( c => c.Id == selectedCountryId.Value ).SingleOrDefault( ).Cities
            : null;
        Atlas atlas = new Atlas
        {
            SelectedContinentId = selectedContinentId ,
            SelectedCountryId = selectedCountryId ,
            Continents = this._continentRepository.All ,
            Countries = countries ,
            Cities = cities
        };
        if ( Request.IsAjaxRequest( ) )
        {
            return PartialView( MVC.CascadingDropDownLists.DropDownHijaxPost.Views._Cities , atlas );
        }
        else
        {
            return View( MVC.CascadingDropDownLists.DropDownHijaxPost.Views.Index , atlas );
        }
    }
}

Index.cshtml is the same as in Ajax.BeginForm method (again the path for the view changes)

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@{
    ViewBag.Title = "Index";
}
@Html.Partial( MVC.CascadingDropDownLists.DropDownHijaxPost.Views._Continents )
<div id="countries">
    @Html.Partial( MVC.CascadingDropDownLists.DropDownHijaxPost.Views._Countries )
</div>
<div id="cities">
    @Html.Partial( MVC.CascadingDropDownLists.DropDownHijaxPost.Views._Cities )
</div>
@DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss:fff")

There will be more code in the Index.cshtml view but we’ll get to it later.

_Continents.cshtml:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@using ( Html.BeginForm( MVC.CascadingDropDownLists.DropDownHijaxPost.SelectContinent( ) ) )
{ 
     <fieldset>
        <legend>Continents</legend>
        
        @Html.DropDownListFor( 
            m => m.SelectedContinentId , 
            new SelectList( Model.Continents , "Id" , "Name" ) , 
            "[Please select a continent]" 
        )
        <input type="submit" value="Select" />
    </fieldset>
}

This partial view is identical to the one in Part 2 (Html.BeginForm) except the action and controller where the form will post.

_Countries.cshtml:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@if ( Model.Countries != null && Model.Countries.Count( ) > 0 )
{
    using ( Html.BeginForm( MVC.CascadingDropDownLists.DropDownHijaxPost.SelectCountry( ) ) )
    { 
        <fieldset>
            <legend>Countries</legend>
                @Html.HiddenFor( m => m.SelectedContinentId )
                @Html.DropDownListFor( 
                    m => m.SelectedCountryId , 
                    new SelectList( Model.Countries , "Id" , "Name" ) , 
                    "[Please select a country]" 
                )
                <input type="submit" value="Select" />
        </fieldset>
    }
}
else
{
    <fieldset>
        <legend>Countries</legend>
        No information available
    </fieldset>
}

_Cities.cshtml:

The _Cities.cshtml partial view is the same as in Part 2.

If we run it now it will behave exactly as in Part 2 but this is not what we wanted so let’s start adding some code:

First we need to reference the jQuery script and thanks to T4MVC we have intellisense and a cleaner src value:

    <script src="@Links.Scripts.jquery_1_6_1_min_js" type="text/javascript"></script>

Next we define a document ready function at the bottom of the Index view:

<script type="text/javascript">
    $(document).ready(function () {
        //Code here
    });
</script>

Because we will post the form when the selected value in the dropdown list changes we don’t need the Select buttons but we cannot remove them either. We need the submit buttons in case JavaScript is disabled so we will hide them using jQuery (if JavaScript is disabled there will be no JavaScript code executed so they will remain visible):

//Hide the submit buttons. If JavaScript is disabled we'll use the normal functionality
$('input[type=submit]').hide();

Now we need a way to submit Submit the first form to the SelectContinent action. For this we will catch the change event for the Continents dropdown lists, issue a form submit of its parent form, then catch the submit event of the form and perform an $..ajax() call instead:

//Continent select
$('#SelectedContinentId').change(function () {
    $(this).parents('form').submit();
    return false;
});
//Continent form submit
$("form[action$='SelectContinent']").submit(function () {
    $.ajax({
        url: $(this).attr('action'),
        type: 'post',
        data: $(this).serialize(),
        success: function (result) {
            $('#countries').html(result);
            $('input[type=submit]').hide();
        }
    });
    return false;
});

In case of success we replace the contents of the countries div with the result and hide the select button. We do something similar for the Countries dropdown list:

//Country select
$('#SelectedCountryId').live('change', function () {
    $(this).parents("form").submit();
    return false;
});
//Country form submit
$("form[action$='SelectCountry']").live('submit', function () {
    $.ajax({
        url: $(this).attr('action'),
        type: 'post',
        data: $(this).serialize(),
        success: function (result) {
            $('#cities').html(result);
        }
    });
    return false;
});

Notice that instead of using the change and submit functions directly we used the live function. The jQuery live() function allows us to bind to the events of controls that will be available in the future. At first there is no Countries dropdown list and using the change function will do nothing.

The final Index.cshtml view:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@{
    ViewBag.Title = "Index";
}
@Html.Partial( MVC.CascadingDropDownLists.DropDownHijaxPost.Views._Continents )
<div id="countries">
    @Html.Partial( MVC.CascadingDropDownLists.DropDownHijaxPost.Views._Countries )
</div>
<div id="cities">
    @Html.Partial( MVC.CascadingDropDownLists.DropDownHijaxPost.Views._Cities )
</div>
@DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss:fff")
<script type="text/javascript">
    $(document).ready(function () {
        //Hide the submit buttons. If javascript is disabled we'll use the normal functionality
        $('input[type=submit]').hide();
        //Continent select
        $('#SelectedContinentId').change(function () {
            $(this).parents('form').submit();
            return false;

        });
        //Continent form submit
        $("form[action$='SelectContinent']").submit(function () {
            $.ajax({
                url: $(this).attr('action'),
                type: 'post',
                data: $(this).serialize(),
                success: function (result) {
                    $('#countries').html(result);
                    $('input[type=submit]').hide();
                }
            });
            return false;
        });
        //Country select
        $('#SelectedCountryId').live('change', function () {
            $(this).parents("form").submit();
            return false;
        });
        //Country form submit
        $("form[action$='SelectCountry']").live('submit', function () {
            $.ajax({
                url: $(this).attr('action'),
                type: 'post',
                data: $(this).serialize(),
                success: function (result) {
                    $('#cities').html(result);
                }
            });
            return false;
        });
    });
</script>

See it in action

Cascading Dropdown Lists - Hijaxing

Try it with JavaScript enabled and disabled.

Theoretically speaking we’re done. We perform the dropdown lists cascade using the change event and we also have a fallback mechanism in case JavaScript is disabled. So why go further? Well if you have a requirement that says your web application should be fully functional even if JavaScript is disabled then stop here because in the next part we will trade this functionality for some speed and less code (although you can add some fallback functionality to the next method with some little effort).

References

Hijaxing | .live() - jQuery API | $.ajax() - jQuery API

Download

Download code

ASP.NET MVC–Cascading Dropdown Lists Tutorial–Part 3: Cascading using Microsoft AJAX (Ajax.BeginForm helper)

Sun, 20 Mar 2011 19:15:00 GMT

Part 1 – Defining the problem and the context
Part 2 – Cascading using normal FORM post (Html.BeginForm helper)
Part 3 – Cascading using Microsoft AJAX (Ajax.BeginForm helper)
Part 4 – Cascading using FORM Hijaxing
Part 5 – Cascading using jQuery.ajax():
Part 6 – Creating a jQuery Cascade Select Plugin

Part 3 – Cascading using Microsoft AJAX (Ajax.BeginForm helper)

This method uses the Ajax.BeginForm helper. We will start by copying the DropDownNormalPostController from Part 1 and renaming it to DropDownAjaxPostController. Everything up to and including the Index action is the same as in the DropDownNormalPostController

public partial class DropDownAjaxPostController : Controller
{
    private readonly IContinentRepository _continentRepository;
    // If you are using Dependency Injection, you can delete the following constructor
    public DropDownAjaxPostController( ) : this( new ContinentRepository( ) ) { }
    public DropDownAjaxPostController( IContinentRepository continentRepository )
    {
        this._continentRepository = continentRepository;
    }
    public virtual ActionResult Index( )
    {
        Atlas atlas = new Atlas( );
        atlas.Continents = this._continentRepository.All;
        return View( atlas );
    }
}

Index.cshtml:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@{
    ViewBag.Title = "Index";
}
@Html.Partial( MVC.CascadingDropDownLists.DropDownAjaxPost.Views._Continents )
<div id="countries">
    @Html.Partial( MVC.CascadingDropDownLists.DropDownAjaxPost.Views._Countries )
</div>
<div id="cities">
    @Html.Partial( MVC.CascadingDropDownLists.DropDownAjaxPost.Views._Cities )
</div>
@DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss:fff")

Notice the two div tags called “countries” and “cities”. We will use them to refresh only the Countries and the Cities depending on selection. Below are the partial views:

_Continents.cshtml:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@using ( Ajax.BeginForm( MVC.CascadingDropDownLists.DropDownAjaxPost.SelectContinent(), new AjaxOptions { UpdateTargetId = "countries" } ) )
{ 
     <fieldset>
        <legend>Continents</legend>
        
        @Html.DropDownListFor( 
            m => m.SelectedContinentId , 
            new SelectList( Model.Continents , "Id" , "Name" ) , 
            "[Please select a continent]" 
        )
        <input type="submit" value="Select" />
    </fieldset>
}

Now we are using Ajax.BeginForm instead of Html.BeginForm. The form posts to the same action and it will update the content of the “countries” div with the result (specified in the UpdateTargetId property).

The SelectContinent action:

[HttpPost]
public virtual ActionResult SelectContinent( int? selectedContinentId )
{
    var countries = selectedContinentId.HasValue
        ? this._continentRepository.Find( selectedContinentId.Value ).Countries
        : null;
    Atlas atlas = new Atlas
    {
        SelectedContinentId = selectedContinentId ,
        Continents = this._continentRepository.All ,
        Countries = countries
    };
    if ( Request.IsAjaxRequest( ) )
    {
        return PartialView( MVC.CascadingDropDownLists.DropDownAjaxPost.Views._Countries , atlas );
    }
    else
    {
        return View( MVC.CascadingDropDownLists.DropDownAjaxPost.Views.Index , atlas );
    }
}

The only difference here is the if block. If we have JavaScript enabled there will be an Ajax request and we return the _Countries partial view. When JavaScript is disabled it will behave exactly in Part1 (try this)

_Countries.cshtml:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@if ( Model.Countries != null && Model.Countries.Count( ) > 0 )
{
    using ( Ajax.BeginForm( MVC.CascadingDropDownLists.DropDownAjaxPost.SelectCountry( ) , new AjaxOptions { UpdateTargetId = "cities" } ) )
    { 
        <fieldset>
            <legend>Countries</legend>
            @Html.HiddenFor( m => m.SelectedContinentId )
            @Html.DropDownListFor( m => m.SelectedCountryId , new SelectList( Model.Countries , "Id" , "Name" ) , "[Please select a country]" )
            <input type="submit" value="Select" />
        </fieldset>
    }
}
else
{
    <fieldset>
        <legend>Countries</legend>
        No information available
    </fieldset>
}

and the SelectCountry action:

[HttpPost]
public virtual ActionResult SelectCountry( int? selectedContinentId , int? selectedCountryId )
{
    var selectedContinent = selectedContinentId.HasValue
        ? this._continentRepository.Find( selectedContinentId.Value )
        : null;
    var countries = ( selectedContinent != null )
        ? selectedContinent.Countries
        : null;
    var cities = ( countries != null && selectedCountryId.HasValue )
        ? countries.Where( c => c.Id == selectedCountryId.Value ).SingleOrDefault( ).Cities
        : null;
    Atlas atlas = new Atlas
    {
        SelectedContinentId = selectedContinentId ,
        SelectedCountryId = selectedCountryId ,
        Continents = this._continentRepository.All ,
        Countries = countries ,
        Cities = cities
    };
    if ( Request.IsAjaxRequest( ) )
    {
        return PartialView( MVC.CascadingDropDownLists.DropDownAjaxPost.Views._Cities , atlas );
    }
    else
    {
        return View( MVC.CascadingDropDownLists.DropDownAjaxPost.Views.Index , atlas );
    }
}

Again, the only difference is the if block.

_Cities.cshtml:

The _Cities.cshtml partial view is the same as in Part 1.

See it in action

Cascading Dropdown Lists - Ajax FORM post

Notice that there is no change in the datetime value at the bottom of the Index view, meaning that we do a partial page refresh. The only problem that remains is the need to click the Select buttons.

Download

Download code

ASP.NET MVC–Cascading Dropdown Lists Tutorial–Part 2: Cascading using normal FORM post (Html.BeginForm helper)

Sun, 13 Mar 2011 19:06:00 GMT

Part 1 – Defining the problem and the context
Part 2 – Cascading using normal FORM post (Html.BeginForm helper)
Part 3 – Cascading using Microsoft AJAX (Ajax.BeginForm helper)
Part 4 – Cascading using FORM Hijaxing
Part 5 – Cascading using jQuery.ajax():
Part 6 – Creating a jQuery Cascade Select Plugin

Part 2 – Cascading using normal FORM post (Html.BeginForm helper)

This method uses the Html.BeginForm helper and no client side scripts. We will start by creating a controller called DropDownNormalPostController:

public class DropDownNormalPostController : Controller
{
}

Because we need to access the database we will need a repository variable (we only need the ContinentRepository because we have the navigation properties defined):

public partial class DropDownNormalPostController : Controller
{
    private readonly IContinentRepository _continentRepository;
    // If you are using Dependency Injection, you can delete the following constructor
    public DropDownNormalPostController( ) : this( new ContinentRepository( ) ) { }
    public DropDownNormalPostController( IContinentRepository continentRepository )
    {
        this._continentRepository = continentRepository;
    }
}

We will use the default Index action to show the view with the two dropdown lists (Continents and Countries) and a table to show the Cities:

public virtual ViewResult Index( )
{
    var atlas = new Atlas( );
    atlas.Continents = this._continentRepository.All;
    return View( atlas );
}

Index.cshtml:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@{
    ViewBag.Title = "Index";
}
@Html.Partial(MVC.CascadingDropDownLists.DropDownNormalPost.Views._Continents)
@Html.Partial(MVC.CascadingDropDownLists.DropDownNormalPost.Views._Countries)
@Html.Partial(MVC.CascadingDropDownLists.DropDownNormalPost.Views._Cities)
@DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss:fff")

As you can see we have a partial view for each of three types. Below are the partial views:

_Continents.cshtml:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@*@using ( Html.BeginForm( "SelectContinent" , "DropDownNormalPost") )*@
@using ( Html.BeginForm( MVC.CascadingDropDownLists.DropDownNormalPost.SelectContinent( ) ) )
{ 
     <fieldset>
        <legend>Continents</legend>
        
        @Html.DropDownListFor( 
            m => m.SelectedContinentId , 
            new SelectList( Model.Continents , "Id" , "Name" ) , 
            "[Please select a continent]" 
        )
        <input type="submit" value="Select" />
    </fieldset>
}

We have a Dropdown list inside a form and when the Select submit button is clicked the form is posted to the SelectContinent action (The commented @using shows how we will normally write a form if we don’t use T4MVC).

The SelectContinent action:

[HttpPost]
public virtual ActionResult SelectContinent( int? selectedContinentId )
{
    var countries = selectedContinentId.HasValue
        ? this._continentRepository.Find( selectedContinentId.Value ).Countries
        : null;
    Atlas atlas = new Atlas
    {
        SelectedContinentId = selectedContinentId ,
        Continents = this._continentRepository.All ,
        Countries = countries
    };
    return View( MVC.CascadingDropDownLists.DropDownNormalPost.Views.Index , atlas );
}

The SelectContient action has a nullable int parameter because we don’t have any required constraint on the SelectedContinentId property from the Atlas model. In other words when the user selects the first option ([Please select a continent]) everything will be reset.

Because we need to fill the second dropdown list with countries we will call de Find method from the ContinentRepository and get the Countries property. Next we construct an Atlas object with the data we have so far and pass it to the Index view.

_Countries.cshtml:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
@if ( Model.Countries != null && Model.Countries.Count( ) > 0 )
{
    using ( Html.BeginForm( MVC.CascadingDropDownLists.DropDownNormalPost.SelectCountry( ) , FormMethod.Post ) )
    { 
        <fieldset>
            <legend>Countries</legend>
                @Html.HiddenFor( m => m.SelectedContinentId )
                @Html.DropDownListFor( 
                    m => m.SelectedCountryId , 
                    new SelectList( Model.Countries , "Id" , "Name" ) , 
                    "[Please select a country]" 
                )
                <input type="submit" value="Select" />
        </fieldset>
    }
}
else
{
    <fieldset>
        <legend>Countries</legend>
        No information available
    </fieldset>
}

and the SelectCountry action:

[HttpPost]
public virtual ActionResult SelectCountry( int? selectedContinentId , int? selectedCountryId )
{
    var selectedContinent = selectedContinentId.HasValue
        ? this._continentRepository.Find( selectedContinentId.Value )
        : null;
    var countries = ( selectedContinent != null )
        ? selectedContinent.Countries
        : null;
    var cities = ( countries != null && selectedCountryId.HasValue )
        ? countries.Where( c => c.Id == selectedCountryId.Value ).SingleOrDefault( ).Cities
        : null;
    Atlas atlas = new Atlas
    {
        SelectedContinentId = selectedContinentId ,
        SelectedCountryId = selectedCountryId ,
        Continents = this._continentRepository.All ,
        Countries = countries ,
        Cities = cities
    };
    return View( MVC.CascadingDropDownLists.DropDownNormalPost.Views.Index , atlas );
}

The only differences here are that we have now two nullable int parameters (selectedContinentId and selectedCountryId) and a little more code (nothing too complicated). We could have only 1 parameter, selectedCountryId and add the CountryRepository besides the ContinentRepository thus simplifying the SelectCountry action a little (Feel free to modify it as an exercise).

_Cities.cshtml:

@model Mvc3.Extensions.Demo.Areas.CascadingDropDownLists.Models.Atlas
<fieldset>
    <legend>Cities</legend>
    @if ( Model.Cities != null && Model.Cities.Count( ) > 0 )
    {
        <table>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Population
                </th>
            </tr>
            @foreach ( var item in Model.Cities )
            {
                <tr>
                    <td>
                        @item.Name
                    </td>
                    <td align="right">
                        @item.Population.ToString( "0,0" )
                    </td>
                </tr>
            }
        </table>
    }
    else
    {
        @:<text>No information available</text>
    }
</fieldset>

The _Cities.cshtml partial view is a simple table.

See it in action

Cascading Dropdown Lists - Normal FORM post

Have you noticed anything ugly about this approach? There are three things:

We need to click a button in order to apply the selection from the dropdown lists (we will fix this in the following posts)
The date and time displayed at the bottom of the Index view changes every time we click a Select button, indicating that we do a full page refresh (we will fix this in the next post)
When a Select button is clicked the URL changes from /CascadingDropDownLists/DropDownNormalPost to /CascadingDropDownLists/DropDownNormalPost/SelectContinent or /CascadingDropDownLists/DropDownNormalPost/SelectCountry. Also if we click refresh right after a button click we get a message saying that the form will be submitted again (we fix this below)

Here is the modified controller that keeps the same URL and removes the message about form resubmission (using the Post/Redirect/Get method):

public partial class DropDownNormalPostPRGController : Controller
{
    private readonly IContinentRepository _continentRepository;
    // If you are using Dependency Injection, you can delete the following constructor
    public DropDownNormalPostPRGController( ) : this( new ContinentRepository( ) ) { }
    public DropDownNormalPostPRGController( IContinentRepository continentRepository )
    {
        this._continentRepository = continentRepository;
    }
    public virtual ViewResult Index( )
    {
        Atlas atlas = TempData[ "atlas" ] as Atlas;
        if ( atlas == null )
        {
            atlas = new Atlas( );
            atlas.Continents = this._continentRepository.All;
        }
        return View( MVC.CascadingDropDownLists.DropDownNormalPostPRG.Views.Index , atlas );
    }
    [HttpPost]
    public virtual ActionResult SelectContinent( int? selectedContinentId )
    {
        var countries = selectedContinentId.HasValue
            ? this._continentRepository.Find( selectedContinentId.Value ).Countries
            : null;
        Atlas atlas = new Atlas
        {
            SelectedContinentId = selectedContinentId ,
            Continents = this._continentRepository.All ,
            Countries = countries
        };
        this.TempData[ "atlas" ] = atlas;
        return RedirectToAction( MVC.CascadingDropDownLists.DropDownNormalPostPRG.Index( ) );
    }
    [HttpPost]
    public virtual ActionResult SelectCountry( int? selectedContinentId , int? selectedCountryId )
    {
        var selectedContinent = selectedContinentId.HasValue
            ? this._continentRepository.Find( selectedContinentId.Value )
            : null;
        var countries = ( selectedContinent != null )
            ? selectedContinent.Countries
            : null;
        var cities = ( countries != null && selectedCountryId.HasValue )
            ? countries.Where( c => c.Id == selectedCountryId.Value ).SingleOrDefault( ).Cities
            : null;
        Atlas atlas = new Atlas
        {
            SelectedContinentId = selectedContinentId ,
            SelectedCountryId = selectedCountryId ,
            Continents = this._continentRepository.All ,
            Countries = countries ,
            Cities = cities
        };
        this.TempData[ "atlas" ] = atlas;
        return RedirectToAction( MVC.CascadingDropDownLists.DropDownNormalPostPRG.Index( ) );
    }
}

The actions are similar, the only difference is that now we use the TempData dictionary to keep the atlas object and redirect to the Index action instead of returning the Index view. In the Index action we look for the atlas object in the TempData dictionary or construct a new one before returning the Index view.

Cascading Dropdown Lists - Normal FORM post (PRG)

References

Post/Redirect/Get

Download

Download code

ASP.NET MVC–Cascading Dropdown Lists Tutorial

Sun, 06 Mar 2011 19:46:00 GMT

Part 1 – Defining the problem and the context
Part 2 – Cascading using normal FORM post (Html.BeginForm helper)
Part 3 – Cascading using Microsoft AJAX (Ajax.BeginForm helper)
Part 4 – Cascading using FORM Hijaxing
Part 5 – Cascading using jQuery.ajax():
Part 6 – Creating a jQuery Cascade Select Plugin

Part 1 – Defining the problem and the context

Problem

You want to cascade two or more dropdown lists from your view:
- You want to fill the contents of the next dropdown based on the selection in the current dropdown list.
- You want to display a list/table filtered based on the selection of the last dropdown list.

Context

There are several ways to achieve this, but before drilling into each of them let’s define the context:

Let’s say we want to display a list of continents and when we select a continent another list will be filled with countries from that continent. When we select a country we will show a table with information about cities from that particular country. Something like this:

For this we will use the following model:

Setup

Before going further let’s prepare the programming environment a little. What we need:

Visual Studio 2010 with Service Pack 1 (the edition doesn’t matter):
- You can install it via Web PI (Microsoft Web Platform Installer) or download it from here
ASP.NET MVC 3 Tools Update (and of course ASP.NET MVC 3 RTM):
- You can install it via Web PI or download it from here . Also you can read about it here
NuGet 1.3:
- The 1.2 version will be installed by the MVC 3 Tools Update. You can upgrade it from Visual Studio Extension Manager or from here
NuGet packages relevant for this tutorial (some of them are installed when you create a new ASP.NET MVC3 project and can be updated):
- EntityFramework.4.1.10331.0 (pre-installed)
- jQuery.1.6.1 (pre-installed as version 1.5.1 and can be updated from NuGet)
- T4MVC (version at the time of writing 2.6.54)
- SqlServerCompact.(version at the time of writing 4.0.8482.1)
- EntityFramework.SqlServerCompact (version at the time of writing 4.1.8482.2)
- MvcScaffolding.(version at the time of writing 1.0.0) – this must be installed from the NuGet Package Manager Console (Tools\Library Package Manager) by running the command Install-Package MvcScaffolding

We will use SQL Compact 4.0 to hold the data for this sample and we will access the data using EntityFramework 4.1 and the repository pattern. Lucky for us there is the MvcScaffolding package that will generate pretty much everything. In order to do that we need to run the following commands at the NuGet Package Manager Console (Tools\Library Package Manager) :

Scaffold Repository Continent -Area:CascadingDropDownLists
Scaffold Repository CascadingDropDownLists.Models.Country -Area:CascadingDropDownLists
Scaffold Repository CascadingDropDownLists.Models.City -Area:CascadingDropDownLists

The –Area parameter is optional. If you don’t have an area you can delete it.

The result of running the above commands will be 4 files:
1. ContinentRepository.cs
2. CountryRepository.cs
3. CityRepository.cs
4. AtlasContext.cs

Because we will only display data from the database we need to have some seed data. For this we need to create a Database Initializer as follows (see the whole class in the source code download):

    public class AtlasContextInitializer : DropCreateDatabaseIfModelChanges<AtlasContext>
    {
        protected override void Seed( AtlasContext context )
        {
            //Add continents
            var europe = new Continent { Name = "Europe" };
            var oceania = new Continent { Name = "Oceania" };
            //Add countries
            //Europe
            europe.Countries = new Collection<Country>
            {
                new Country{Name = "Russia", Population = 142200000}, 
                new Country{Name = "Germany", Population = 83251851}
            };
            var romania = new Country { Name = "Romania" , Population = 21698181 };
            europe.Countries.Add( romania );

            //Add cities
            romania.Cities = new Collection<City>
            {
                new City {Name = "Bucharest", Population = 1926334}
            };
            //Add to context
            context.Continents.Add( europe );
            context.Continents.Add( oceania );
            context.SaveChanges( );
        }
    }

In order to enable de initializer we need to add the following line in the Application_Start handler in Global.asax.cs:

System.Data.Entity.Database.SetInitializer( new AtlasContextInitializer( ) );

The database will be created when we first try to read something from it. But this is the job of the next post.

I won’t go into further details about EntityFramework 4.1 and the Repository pattern because we will move away from the scope of this post. If you want to learn more please see the links from the References section.

What we have at this moment:

Project setup with NuGet Packages
Model to work with
Database with seed data

We will define next a view model called Atlas that will help in the next parts:

public class Atlas
{
    public int? SelectedContinentId { get; set; }
    public int? SelectedCountryId { get; set; }
    public IEnumerable<Continent> Continents { get; set; }
    public IEnumerable<Country> Countries { get; set; }
    public IEnumerable<City> Cities { get; set; }
}

In each of the following parts we will create separate controllers, views and partial views even some of the code can be reused. This will help to see the differences from each method used to cascade the dropdown lists.

References

EntityFramework 4.1 | Repository Pattern | MvcScaffolding

Download

Download code

ASP.NET MVC – Extending the DropDownList to show the items grouped by a category

Sat, 26 Feb 2011 17:30:00 GMT

Problem
Solution
How it works
See it in action
References
Download

Problem

You want to Create/Edit an entity that has a foreign key relationship.
You want to be able to select the value for the foreign key from a list.
You want the items that show in the list to be grouped by a category (with the category un-selectable)

Solution

The first 2 points from the problem statement can be easily accomplished by using a DropDownListFor html helper. For the last thing let’s see how we can solve it in plain html first. There is a html tag called <optgroup> that allows us to group the items:

<select>
    <option value="">[Please select an option]</option>
    <optgroup label="Group 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </optgroup>
    <optgroup label="Group 2">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
    <optgroup label="Group 3">
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </optgroup>
    <optgroup label="Group 4">
        <option value="7">Option 7</option>
        <option value="8">Option 8</option>
    </optgroup>
</select>

As you can see we can mix the the <option> and <optgroup> tags at the same level but the <optgroup> tag cannot contain another <optgroup> tag inside.

The DropDownList cannot be used to generate the <select> tag as above but we can create our own extension. The DropDownList accepts an IEnumerable<SelectListItem> but we need to pass an IDictionary<string , IEnumerable<SelectListItem>> where the key will represent the category we will use for grouping the items in the DropDownList.

So it is clear that we need to create a html helper but because this helper will be an extension of the actual DropDownList we will create more overloads for the same helper.

Luckily for us the source code for ASP.NET MVC is publicly available and we can just grab de DropDownList implementation and bend it to our will. There are 3 things we need to modify:

Replace the IEnumerable<SelectListItem> with IDictionary<string , IEnumerable<SelectListItem>> in all method signatures
Add another overload for the ListItemToOption method that accepts 2 arguments (see below)
Modify the helper method SelectInternal that does all the magic (see below)

This is only relevant code the full source code can be obtained from the Download tab

ListItemToOption (applies to both MVC2 and MVC3):

internal static string ListItemToOption( SelectListItem item )
{
    TagBuilder builder = new TagBuilder( "option" )
    {
        InnerHtml = HttpUtility.HtmlEncode( item.Text )
    };
    if ( item.Value != null )
    {
        builder.Attributes[ "value" ] = item.Value;
    }
    if ( item.Selected )
    {
        builder.Attributes[ "selected" ] = "selected";
    }
    return builder.ToString( TagRenderMode.Normal );
}

SelectInternal - relevant code only (applies to both MVC2 and MVC3):

Dictionary<string, IEnumerable<SelectListItem>> newSelectListDictionary = 
    new Dictionary<string, IEnumerable<SelectListItem>>( );
foreach ( var category in selectList.Keys )
{
    List<SelectListItem> newSelectList = new List<SelectListItem>( );

    foreach ( SelectListItem item in selectList[ category ] )
    {
        item.Selected = ( item.Value != null ) ? 
            selectedValues.Contains( item.Value ) : 
            selectedValues.Contains( item.Text );
        newSelectList.Add( item );
    }

    newSelectListDictionary.Add( category, newSelectList );
}
selectList = newSelectListDictionary;

How it works

This new extension behaves exactly as a normal DropDownList helper except for the fact that it is accepting an IDictionary<string , IEnumerable<SelectListItem>> instead of an IEnumerable<SelectListItem> and it’s constructing an <optgroup> tag for each key in the dictionary

See it in action

Let’s consider the following model entities:

    public class Continent
    {
        public int ContinentId { get; set; }
        public string Name { get; set; }
    }

    public class Country
    {
        public int CountryId { get; set; }
        public string Name { get; set; }
        public int ContinentId { get; set; }
    }

    public class City
    {
        public int CityId { get; set; }
        public string Name { get; set; }
        public int CountryId { get; set; }
    }

In an action method (in CitiesController):

    [HttpGet]
    public ActionResult Create( )
    {
        IDictionary<string , IEnumerable<SelectListItem>> countriesByContinent = new Dictionary<string, IEnumerable<SelectListItem>>( );

        foreach ( var continent in this._continents )
        {
            var countryList = new List<SelectListItem>( );

            foreach ( var country in this._countries.Where( c => c.ContinentId == continent.ContinentId ) )
            {
                countryList.Add( new SelectListItem { Value = country.CountryId.ToString( ), Text = country.Name } );
            }

            countriesByContinent.Add( continent.Name, countryList );
        }

        ViewBag.CountriesList = countriesByContinent;

        return View( );
    }

In Create.cshtml:

    @Html.DropDownList( c => c.CountryId , ViewBag.CountriesList as IDictionary<string , IEnumerable<SelectListItem>> , "[Please select a country]" )

In Create.aspx:

    <%: Html.DropDownList( c => c.CountryId , ViewBag.CountriesList as IDictionary<string , IEnumerable<SelectListItem> > , "[Please select a country]" )%>

The result:

MVC2 | MVC3

References

HTML Tag | MVC Source Code

Download

Download code

ASP.NET MVC – Display visual hints for the required fields in your model

Thu, 17 Feb 2011 21:27:00 GMT

Problem

You want to display visual hints in the view to signal that certain fields are required.
You want the visual hints to be dynamically added when the RequiredAttribute is added to a model property.
You want to use a familiar way of displaying the visual hints.

Solution

Let’s analyze each of the requests above:

1. You want to display visual hints in the view to signal that certain fields are required.

The most common way to do this is to add a red star (*) near the field or to color the field label in red.

2. You want the visual hints to be dynamically added when the RequiredAttribute is added to a model property.

The best way will be to create a html helper, read the IsRequired property from ModelMetadata and output a red star (<span style=”color: red;”>*<span> ).

Unfortunately for the default ModelMetadataProvider the IsRequired property is always true for all non-nullable properties with or without the RequiredAttribute applied.

One way to overcome this is to create our own ModelMetadataProvider and set the IsRequired property to true only if the RequiredAttribute is present but there is an alternative solution using reflection. So instead of using the IsRequired property we need to use reflection to see if the RequiredAttribute is present in the custom attributes collection for the current property (see the code bellow).

We will end with something like this: Html.RequiredVisualHintFor( m => m.FirstName). Now we have the visual hint displayed automatically but we need to add a new html helper besides the LabelFor, TextBoxFor (or OtherInputForhelper) and DisplayMessageFor).

3. You want to use a familiar way of displaying the visual hints.

The solution at step 2 solves our problem but introduces a new helper and thus adding more code in our view. We already have the Label html control so why not to “extend” it by adding some overloads?

MVC2 (relevant code only):

internal static MvcHtmlString LabelHelper(
    HtmlHelper html ,
    ModelMetadata metadata ,
    string htmlFieldName ,
    string cssFieldId ,
    string cssClassName )
{
    string labelText = 
        metadata.DisplayName ?? metadata.PropertyName ?? htmlFieldName.Split( '.' ).Last( );
    if ( String.IsNullOrEmpty( labelText ) )
    {
        return MvcHtmlString.Empty;
    }

    TagBuilder tag = new TagBuilder( "label" );
    tag.Attributes.Add( "for" , 
        html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId( htmlFieldName ) );
    tag.SetInnerText( labelText );

    //The Required attribute has allow multiple false
    bool isRequired = 
        metadata.ContainerType.GetProperty( metadata.PropertyName )
        .GetCustomAttributes( typeof( RequiredAttribute ) , false )
        .Length == 1;

    if ( isRequired )
    {
        if ( cssFieldId.Equals( "self" , StringComparison.OrdinalIgnoreCase ) )
        {
            tag.AddCssClass( cssClassName );
        }
        else
        {
            if ( cssFieldId.StartsWith( "#" ) )
            {
                cssFieldId = cssFieldId.Remove( 0 , 1 );
            }
            StringBuilder jQueryString = new StringBuilder( )
                .Append( tag.ToString( TagRenderMode.Normal ) )
                .Append( "<script type='text/javascript'>" )
                .Append( "$(document).ready(function () {" )
                .Append( "$('#" ).Append( cssFieldId ).Append( "').addClass('" )
                .Append( cssClassName ).Append( "\')" )
                .Append( "});" )
                .Append( "</script> " );

            return MvcHtmlString.Create( jQueryString.ToString( ) );
        }
    }

    return MvcHtmlString.Create( tag.ToString( TagRenderMode.Normal ) );
}

MVC3 (relevant code only):

internal static MvcHtmlString LabelHelper(
    HtmlHelper html ,
    ModelMetadata metadata ,
    string htmlFieldName ,
    string labelText = null ,
    string cssFieldId = "self" ,
    string cssClassName = "field-required" )
{
    string resolvedLabelText = 
        labelText ?? metadata.DisplayName ?? 
        metadata.PropertyName ?? htmlFieldName.Split( '.' ).Last( );

    if ( String.IsNullOrEmpty( resolvedLabelText ) )
    {
        return MvcHtmlString.Empty;
    }

    TagBuilder tag = new TagBuilder( "label" );
    tag.Attributes.Add(
        "for" ,
        TagBuilder.CreateSanitizedId(
            html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName( htmlFieldName )
        )
    );
    tag.SetInnerText( resolvedLabelText );


    //The Required attribute has allow multiple false
    bool isRequired = 
        metadata.ContainerType.GetProperty( metadata.PropertyName )
            .GetCustomAttributes( typeof( RequiredAttribute ) , false )
            .Length == 1;

    if ( isRequired )
    {
        if ( cssFieldId.Equals( "self" , StringComparison.OrdinalIgnoreCase ) )
        {
            tag.AddCssClass( cssClassName );
        }
        else
        {
            if ( cssFieldId.StartsWith( "#" ) )
            {
                cssFieldId = cssFieldId.Remove( 0 , 1 );
            }
            StringBuilder jQueryString = new StringBuilder( )
                .Append( tag.ToString( TagRenderMode.Normal ) )
                .Append( "<script type='text/javascript'>" )
                .Append( "$(document).ready(function () {" )
                .Append( "$('#" ).Append( cssFieldId ).Append( "').addClass('" )
                .Append( cssClassName ).Append( "\')" )
                .Append( "});" )
                .Append( "</script> " );

            return MvcHtmlString.Create( jQueryString.ToString( ) );
        }
    }

    return MvcHtmlString.Create( tag.ToString( TagRenderMode.Normal ) );
}

How it works

As you can see above the whole magic is in identifying if the RequiredAttribute is present, If it is then we add a class to the tag (if the “self” value is present) or we output a jQuery snippet if we need to add the class to another control. After that is all about adding a CSS style for the respective class.

See it in action

Let’s consider the following model:

    public class Person
    {
        public string Prefix { get; set; }
        [Required( ErrorMessage = "The first name is required" )]
        public string FirstName { get; set; }
        [Required( ErrorMessage = "The middle name is required" )]
        public string MiddleName { get; set; }
        [Required( ErrorMessage = "The last name is required" )]
        public string LastName { get; set; }
        public string PrefferedName { get; set; }
        public string Suffix { get; set; }
        public bool Sex { get; set; }
    }

And the Edit view for it

MVC2 (Edit.aspx)

<% Html.EnableClientValidation(); %>
<% using ( Html.BeginForm( "Edit" , "Person" ) ) 
{%>
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>Fields</legend>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Prefix, "self") %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Prefix) %>
            <%: Html.ValidationMessageFor(model => model.Prefix) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.FirstName, "self") %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.FirstName) %>
            <%: Html.ValidationMessageFor(model => model.FirstName) %>
        </div>
        <div id="divRequired">
            <div class="editor-label">
                <%: Html.LabelFor( model => model.MiddleName , "#divRequired" , "field-required3" )%>
            </div>
            <div class="editor-field">
                <%: Html.TextBoxFor(model => model.MiddleName) %>
                <%: Html.ValidationMessageFor(model => model.MiddleName) %>
            </div>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.LastName, "self", "field-required2") %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.LastName) %>
            <%: Html.ValidationMessageFor(model => model.LastName) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.PrefferedName) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.PrefferedName) %>
            <%: Html.ValidationMessageFor(model => model.PrefferedName) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.Suffix) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Suffix) %>
            <%: Html.ValidationMessageFor(model => model.Suffix) %>
        </div>
        <div class="editor-label">
            <%: Html.LabelFor( model => model.Sex , "self" )%>
        </div>
        <div class="editor-field">
            <%: Html.CheckBoxFor(model => model.Sex) %>
            <%: Html.ValidationMessageFor(model => model.Sex) %>
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
<% } %>

MVC3 (Edit.cshtml)

@using ( Html.BeginForm( ) )
{
    @Html.ValidationSummary( true )
    <fieldset>
        <legend>Person</legend>
        <div class="editor-label">
            @Html.LabelFor( model => model.Prefix , null , null, null )
        </div>
        <div class="editor-field">
            @Html.EditorFor( model => model.Prefix )
            @Html.ValidationMessageFor( model => model.Prefix )
        </div>
        <div class="editor-label">
            @Html.LabelFor( model => model.FirstName , null , null , null )
        </div>
        <div class="editor-field">
            @Html.EditorFor( model => model.FirstName )
            @Html.ValidationMessageFor( model => model.FirstName )
        </div>
        <div id="divRequired">
            <div class="editor-label">
                @Html.LabelFor( model => model.MiddleName , "divRequired" , "field-required3" )
            </div>
            <div class="editor-field">
                @Html.EditorFor( model => model.MiddleName )
                @Html.ValidationMessageFor( model => model.MiddleName )
            </div>
        </div>
        <div class="editor-label">
            @Html.LabelFor( model => model.LastName , "self" , "field-required2" )
        </div>
        <div class="editor-field">
            @Html.EditorFor( model => model.LastName )
            @Html.ValidationMessageFor( model => model.LastName )
        </div>
        <div class="editor-label">
            @Html.LabelFor( model => model.PrefferedName )
        </div>
        <div class="editor-field">
            @Html.EditorFor( model => model.PrefferedName )
            @Html.ValidationMessageFor( model => model.PrefferedName )
        </div>
        <div class="editor-label">
            @Html.LabelFor( model => model.Suffix )
        </div>
        <div class="editor-field">
            @Html.EditorFor( model => model.Suffix )
            @Html.ValidationMessageFor( model => model.Suffix )
        </div>
        <div class="editor-label">
            @Html.LabelFor( model => model.Sex , null , null , null )
        </div>
        <div class="editor-field">
            @Html.EditorFor( model => model.Sex )
            @Html.ValidationMessageFor( model => model.Sex )
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

The styles:

/* Styles for editor and display hints
----------------------------------------------------------*/

.field-required:before
{
    color: red;
    content: "*";
}
.field-required2:after
{
    font-style: italic;
    font-weight: bold;
    color: red;
    content: " (Required)";
}
.field-required3
{
    border-color: #666666;
    border-style: dashed;
    width: 220px;
    padding: 5px;
}
.field-required3 label
{
    color: red;
    font-style: italic;
    font-weight: bold;
}

The result:

MVC2 | MVC3

References

RequiredAttribute | ModelMetadata | ModelMetadataProvider

Download

Download code