Themes and ASP.NET MVC

I wanted to easily add theme support to yonkly, so that others can install it and modify its look and feel as they please.  I also wanted it to be as easy as installing a theme in wordpress.

I created a themes folder under the content folder

image

Then I referenced my css file in the master page using a helper method

<%= ThemeHelper.GetCss() %>

I also use a helper method for images

<img src='<%=ThemeHelper.GetImageUrl("reply.png")%>’ alt="reply" class="icon" />

But most of my images are set in the stylesheet, which makes it easier to manipulate different skins

The helper methods above look at the defined theme in the config file (or database or wherever you store your settings) and then return the path to the correct resource.

Take a look at these live samples:

They are all using the same codebase but have a different theme defined.  The trick is in making your HTML css-friendly by naming elements and assigning them classes as well as using Divs and avoiding tables.  This allows you to create a stylesheet that radically changes the look of the site.  Think of the element ids and classes as an API to your view, that the css can manipulate.

I also added a feature that lets you upload a folder theme as a zip file and have the application unzip it into the themes folder.

image

It would be cool if we can define a "virtual folder" in our application, so I wouldn’t have to use helper methods.  Imagine if you could just say /content/theme/logo.gif and it would just work.  The theme folder doesn’t really exist but instead it would route to the correct folder based on a setting.  I wonder if I can do that with current routing mechanism in asp.net mvc!!!  Anyone?

Major Update to Yonkly: Widgets, Ads & More

I just released a new version of Yonkly with a ton of new features.

Widgets

If you are logged in, you can add a widget to your sidebar even place Google ads if you wanted.  Take a look at the widget in my profile at http://yonkly.com/eibrahim.  To add your own widget, go to settings and click the widgets link then simply add your widget code and hit save

image

If you want your widget to fit nicely with the rest of the sidebar, click the link "insert default widget" and add your script in the correct place.

Control Panel

If you are the owner of the site i.e. an admin, you will have access to a control panel where you can customize a ton of things

image

Site Settings

You can modify all sort of site settings such as title, description, keywords, amazon s3 information and so on.

image

Email Templates

You can customize all the emails that get sent out e.g. "someone is following", "someone joined your group", "thanks for signing up", etc.

Ad Management

Now, you can add advertisements to your site by adding the ads code in the appropriate location.  You can add it as a banner in the sidebar or in the message stream.

Here is a sidebar ad, you can also skin to match the site

image

Here is a banner ad

image

And here is an embedded ad in the message stream

image

Theme Management

You can change the theme of the site.  For examples, check www.hokietalk.com and www.isweat.com.  Here is the theme selection screen

image

 

Content Management

See the TOS, privacy and contact us links in the footer, those are dynamically created and you can create other pages as well e.g. "FAQ", "Help" and so on…  You simply enter a page name and the content using a rich text editor

image

User Management

This is just a way to assign/revoke admin privileges to users.

The Future

I am very excited about all the new features specially that the site owner and the user can display ads and make money.   I can’t wait to release the new version.  Contact me if you are interested in setting up your own microblogging platform.

Stay Tuned!!!

A Good TDD Process Diagram?

I am trying to create a flow diagram that depicts the Test Driven Development process and I need your expertise/opinion/criticism in nailing it down.

Take a look below and let me know what is wrong, what is right and what can be done better.

image

I drew the above diagram based on my understanding of TDD and by referencing other diagrams that I found online.  Specifically:

image

from http://www.agiledata.org/essays/tdd.html

image

from http://designindrive.com/?p=31

image

from http://tinyurl.com/498pjg

Client & Server Side Validation in ASP.NET MVC

[Update: The code is open-sourced at http://code.google.com/p/mvcvalidation/]

The asp.net mvc codeplex preview 5 version just came out a few days ago and it includes a lot nice enhancements.  For the best introduction read Scott’s post

Some of my favorite changes happened in validation.  Incidentally, I was already working on a post to talk about doing client and server side validation the easy way.  The inspiration came after reading Steve Sanderson’s post and watching his screencast on how he created a model-based client-side validation – very cool.

I want a simple way to perform client and server side validation for the application I am creating for my book and my objectives are simple (yet there is no easy way to do it):

  1. Have a model-based validation mechanism
  2. Have the least amount of repetition (DRY)
  3. Client side validation using jQuery
  4. Server side validation

First, I will show you how it works then I will explain how I got there.  Here is my model class for a user

   1: public class User
   2: {
   3:     public virtual string UserName { get; set; }
   4:     public virtual string Email { get; set; }
   5:     public virtual string Password { get; set; }
   6:     public virtual Guid ProviderId { get; set; }
   7: }

To add validation to it, I simply decorate it with the appropriate validation attributes.  It ends up looking like this:

public class User
{
    [ValidateNonEmpty("Username is required")]
    public virtual string UserName { get; set; }

    [ValidateNonEmpty("Email is required")]
    [ValidateEmail("Invalid email address")]
    public virtual string Email { get; set; }

    [ValidateNonEmpty("Password is required")]
    [ValidateLength(4,50,"Password should be at least 4 characters long")]
    public virtual string Password { get; set; }

    public virtual Guid ProviderId { get; set; }
}

I then generate the client script by adding 1 line of code to my view

<%=Html.ClientSideValidation("formCreateList", ViewData.Model) %>

On the server side, I simply make a call to a validation method from my controller

[Authorize]
[AcceptVerbs("POST"), ActionName("Create")]
public ActionResult Save(User newUser)
{
    AppHelper.ValidateModel(ViewData.ModelState, newUser);
    //the rest of the action code
}

If there are any validation errors on the server, I display the errors by using the framework helper method ValidationSummary.  All I have to do is add this 1 line to the view

<%=Html.ValidationSummary() %>

JavaScript

That’s all there is to it.  Now let’s talk about how it works.  The first challenge was generating the JavaScript to validate on the client. 

I decided to use the excellent jQuery Validation plugin.  The plugin gives me 2 ways to validate my form.  The first method uses classes on the the fields to be validated, for example a required email field would look like this

<input id="email" name="email" size="25"  class="required email" />

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

The second method uses rules that are defined in JavaScript and look like this

<script type="text/javascript"> 
$("#signupForm").validate({
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: "Please enter a valid email address"
        }
    });
</script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Check out the plugin documenation and demos to understand how it all works.

Since I was generating the script on the server and I wanted to make only one call, I went with the second option.

The script generator simply loops through all the model properties and their attributes and generate the appropriate script.  Afterthought: Now that I think about it, I could have easily generated a script to add classes to the elements using jQuery’s addClass method…  Oh well, maybe someone else will be kind enough to do it.

Castle Validator

I used the Castle Validator Component as my validation framework.  That’s where all the validation attributes you see above come from, but you can also create your own validators.  I then created a class called JQueryValidationProvider that implements IBrowserValidationGenerator interface in the Castle.Components.Validator namespace.  I haven’t implemented the entire interface and only have a couple of validations working (I will update the source code when it is all done).  Here is a couple of methods that I implemented.

public void SetEmail(string target, string violationMessage)
{
     Rules.Add(new ValidationRule(Validate.Email, violationMessage));
}
public void SetAsRequired(string target, string violationMessage)
{
    Rules.Add(new ValidationRule(Validate.Required, violationMessage));
}

As you can see, all I am really doing is just adding the validation rule to List of ValidationRules.  ValidationRule is a straight forward class and looks like this:

internal class ValidationRule
{
    public ValidationRule(Validate validate) : this(validate, null) { }
    public ValidationRule(Validate validate, string failureMessage)
        : this(validate, failureMessage, null) { }
    public ValidationRule(Validate validate, string failureMessage, object value)
    {
        Validate = validate;
        Value = value;
        if (failureMessage != null)
        {
            ErrorMessage = failureMessage;
        }
        else
        {
            //setup default error messages
            switch (Validate)
            {
                case Validate.Required:
                    ErrorMessage = "This field is required";
                    break;
                default:
                    ErrorMessage = "Field error";
                    break;
            }
        }

    }
    public readonly object Value;
    public readonly Validate Validate;
    public readonly string ErrorMessage;
}

The helper ClientSideValidation method simply loops through the collection of rules and generate the appropriate JavaScript.  Here it is

public static string ClientSideValidation(this HtmlHelper htmlHelper,
    string formName,
    object modelToValidate)
{
    var results = new StringBuilder();
    var rules = new StringBuilder();
    var messages = new StringBuilder();
    results.AppendFormat("$("#{0}").validate({1}", formName, "{");
    results.AppendLine();
    rules.AppendFormat("rules: {0}", "{");
    messages.AppendFormat("messages: {0}", "{");

    var props = TypeDescriptor.GetProperties(modelToValidate.GetType());

    var propCounter = 0;
    foreach (PropertyDescriptor prop in props)
    {
        var generator = new JQueryValidationProvider();
        foreach (var attrib in prop.Attributes.OfType<AbstractValidationAttribute>())
        {
            var v = attrib.Build();
            v.ErrorMessage = v.ErrorMessage ?? "*";
            v.Initialize(new CachedValidationRegistry(), null);
            v.ApplyBrowserValidation(null, InputElementType.Undefined,
                                     generator, null, null);
        }

        if (generator.Rules.Count > 0)
        {
            if (propCounter > 0)
            {
                rules.Append(",");
                messages.Append(",");
            }
            rules.AppendLine();
            messages.AppendLine();
            rules.AppendFormat("{0}: {1}", prop.Name.ToLower(), "{");
            messages.AppendFormat("{0}: {1}", prop.Name.ToLower(), "{");
            rules.AppendLine();
            messages.AppendLine();

            for (var i = 0; i < generator.Rules.Count; i++)
            {
                var rule = generator.Rules[i];
                rules.AppendFormat("{0}", rule.GetRuleString());
                messages.AppendFormat("{0}", rule.GetMessageString());

                if (i < generator.Rules.Count - 1)
                {
                    rules.Append(",");
                    messages.Append(",");
                }
                else
                {
                    rules.Append("}");
                    messages.Append("}");
                }
                rules.AppendLine();
                messages.AppendLine();
            }

            propCounter++;
        }
    }

    rules.Append("},");
    messages.Append("}");
    rules.AppendLine();
    messages.AppendLine();
    results.Append(rules.ToString());
    results.Append(messages.ToString());
    results.Append("});");

    return string.Format("<script type='text/javascript'><!--{1}{0}{1}--></script>", 
                            results.ToString(), Environment.NewLine);
}

Changes

Halfway through this post, I read Steve Sanderson’s new post and Stephen Walther’s new post on validation, I made some changes to the code.  I agree with their point that the controller shouldn’t be responsible for initiating the validation and it should be done at a lower layer.  I refactored the code and my controller now looks like this

[AcceptVerbs("POST")]
public ActionResult Create(User user)
{
    try
    {
        user = new User();
        UpdateModel(user, new[] { "name", "email" });
        var service = new UserService();
        service.Save(user);
    }
    catch (RuleViolationException ex)
    {
        MvcValidator.PopulateModelStateWithErrors(user, ViewData.ModelState, ex);
    }
    return View(user);
}

 

The validation gets initiated at the service (business logic) layer and if there is a rule violation an exception is thrown.  I then take the exception and pass it to a helper method that populates the model state. Note: I could probably rewrite this so that the ModelState population happens before the exception throwing which will eliminate the call to the population method.

My view looks like this

<%=Html.ValidationSummary() %>
<form id="formCreate" name="formCreate" 
        action='<%=Url.Action("Create")%>' method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
    <br />
    <label for="email">Email</label>
    <input type="text" id="email" name="email" />
    <br />
    <input type="submit" value="Submit" />
</form>
<%= Html.ClientSideValidation("formCreate", ViewData.Model) %>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Now if I try to submit the form, the client script validation runs and I get these errors

clip_image001

If you get rid of client validation and only use server validation

to submit the form, the form would look like this

clip_image001[4]

Finally, here is the client JavaScript generated in the view:

<script type='text/javascript'><!--
    $("#formCreate").validate({
        rules: {
            name: {
                required: true,
                minlength: "3",
                maxlength: "25"
            },
            email: {
                email: true,
                required: true
            }
        },
        messages: {
            name: {
                required: "Username is required",
                minlength: "Username should be between 3 and 25 characters long",
                maxlength: "Username should be between 3 and 25 characters long"
            },
            email: {
                email: "Invalid email address",
                required: "Email is required"
            }
        }
    });
--></script> 

 

Pros & Cons

Here is what I think the pros of this design are:

  1. I love using model attributes to define validation rules
  2. I like that I only need 2 lines in my view
  3. I like that I don’t have to do anything in the controller other than catch an exception and call a helper method

The one thing I don’t like about this design is that it feels like there is a lot of dependencies.  I might need to refactor the code and move things around.  Here is my dependency diagram

image

Credit

This code was possible because of other people’s work:

Stephen Walther – link

Steve Sanderson – link and link 2

Hamilton Verissimo – link

Rick Strahl – link

Scott Guthrie – link

Source Code

Click here to download the rough-quality source code.

Let me hear what you think of this design.  What’s wrong with it?  What’s right?  Should I put this up on codeplex?

Deciding Between ASP.NET MVC and WebForms

I am trying to create a decision flowchart for my ASP.NET MVC book and wanted to get some community feedback.  Does this diagram make sense?  What other factors should one consider that should make it into the chart?

image

Things to Note

I have tried to use the general consensus of the community for each decision.  For example, some might argue that MVC is better for prototyping but I would say the majority would disagree.

Keep in mind that these choices are not set in stone and are not mutually exclusive but are more like a guide to which platform would be better suited to satisfy a particular requirement.  For example you might want to use TDD but still end up choosing on WebForms.  (I should probably assign a weight to each question)

The "No" branch doesn’t mean exactly NO.  I mean, answering No to "Want cleaner HTML?" doesn’t mean you have something against clean HTML or you want crappy HTML – no one wants that.  Think of the question in terms of "is clean html important to you?" 

Let me hear your feedback below and I will incorporate it in version of 2 of the diagram and post it back on the blog.  Hopefully, this will help someone choose between ASP.NET MVC and WebForms on a new project.

Also, I don’t think a flowchart diagram is the best type of diagram for this type of decision tree.  Can you suggest a better format?

Use ModelBinder to Generically Bind Complex Types

[Update: Simone brought my attention to the fact that ComplexModelBinder which comes with the framework does exactly that.  You can find more info here]

ASP.NET MVC Preview 5 introduce the ModelBinder attribute that can be used to decorate a complex type in an Action.  This allows us to have actions that look like this

public ActionResult Create([ModelBinder(typeof(GenericBinder))] ContactList myList)

 

Instead of this:

public ActionResult Create(string name, string description)

 

The problem is that you have to build a Binder for every complex type you want to use as a parameter.  For example, Maarten Balliauw created a model binder on his blog and it looks like this:

public class ContactBinder : IModelBinder
{
    #region IModelBinder Members
    public object GetValue(ControllerContext controllerContext, 
                 string modelName, Type modelType, 
                 ModelStateDictionary modelState)
    {
        if (modelType == typeof(Contact))
        {
            return new Contact
            {
                Name = controllerContext.HttpContext.Request.Form["name"] ?? "",
                Email = controllerContext.HttpContext.Request.Form["email"] ?? "",
                Message = controllerContext.HttpContext.Request.Form["message"] ?? ""
            };
        }
        return null;
    }
    #endregion
}

 

Now that is a lot of typing and because I am lazy, I decided to create a generic binder that uses reflection and can work with all my complex types. 

Note: By generic I mean common – it has nothing to do with .net Generics

Also note that this will only work if you follow these conventions:

  1. The html field name must match the property name
  2. User lower case names for the html fields
  3. You don’t have to user lower case on your model properties

Here is the very rough and untested Generic Binder:

class GenericBinder : IModelBinder
{
    public object GetValue(ControllerContext controllerContext, 
                            string modelName, Type modelType, 
                            ModelStateDictionary modelState)
    {
        var instance = Activator.CreateInstance(modelType);
        foreach (var prop in modelType.GetProperties())
        {
            prop.SetValue(instance, 
                    controllerContext.HttpContext.Request
                                    .Form[prop.Name.ToLower()], 
                    null);
        }
        return instance;
    }
}

 

If you find any bugs or have a better implementation, please share.

Google Chrome JavaScript Speed Test

Google’s new browser – Chrome – has a JavaScript engine called V8 that was built from scratch.  So, how fast is it?

I ran these tests http://mootools.net/slickspeed/ on IE, Firefox and Chrome.

Here are the results:

It looks like Chrome is about 13% faster than Firefox and 82% faster than IE 7.

All browsers are running on the same computer, so the hardware/os settings are irrelevant.  But if you are curious, it’s a Windows Vista 64-bit machine with 6 Gigs of RAM and a quad core chip.

[Update] If you are reading this in Chrome, the embedded document is broken.  I guess Google didn’t test there own sites.  It should look like this:

image

Instead it looks like this:

image