I usually like to combines my images into a single *.png file and use CSS Sprites to display the image, or merge all my JavaScripts and Styles into a single js/css file.

This article is going to focus only on JavaScript and CSS minification/merging, but I might write another for images and sprites later.

I use this technique in all my project, it is very easy, lightweight and the best is it runs when you build your solution.

In this example I used:

• Visual Studio 2010
• .NET 4
• ASP.NET MVC 3
• Yahoo YUI Compressor
• EcmaScript.NET

Step 1: Create a new MVC Project.

Step 2: Create some CSS and JS files.

In this case I simply split the Site.css that comes with MVC into many files and added a Site.js files that simply does on alert on document ready.

Step 3: Modify the MasterPage (_Layout.cshtml) to reference the right files depending on the solution running in Debug or Release.

Step4: Add the EcmacScript.NET and Yahoo.UI.Compressor binariesfrom the example file on Codeplex).

Step 5: Create MSBuild.xml file – start from Codeplex example

    

    
        
            ../AssetsMinification/Content/AssetsMinification.css
        
        
            ../AssetsMinification/Scripts/AssetsMinification.js
        
    

    

        
            
            
            
            
            
            

            
            
            
        

        
    

Step 5: Run It in release mode

That’s it!

Here’s the code.

Here it is:

Html.ActionLink("Display Text", "Action", "Controller", new { area = "Area" }, null);

I hope it helps someone!

In this post I’ll not be using the SetCulture Attribute from ASP.NET MVC And Localization. Instead I’ll be using the auto-culture feature of ASP.NET which will be explained here; note you could achieve the same thing with the SetCulture Attribute.

Obviously, we’ll start by creating a new ASP.NET MVC 2 Web Application. I did not create a Test Project for this…

Then we need to setup proper Globalization configuration in our project. For this we’ll use the Auto-Culture features of ASP.NET. Open up the Web.Config and add this line.

    ....
    
        ....
        
    
    ....

Lets make sure the Globalization works.

First, we’ll create the App_GlobalResources folder and add 2 resources files to it; Global.resx and Global.fr.resx. Also add some Resources to this files.

Well also need to make sure that these Resources files do not have Internal properties, but Public properties and also make it an embedded resources. To do this we need to click the Global.resx file, right-blick and go to properties. Set the Build Action to Embedded Resources and the Custom Tool to PublicResXFileCodeGenerator.

Now we’ll change some hard-coded text to Resources. I simply opened up the HomeController and changed the Index action…

public ActionResult Index()
{
    ViewData["Message"] = Resources.Global.Welcome;

    return View();
}

Just try the application and make sure it works properly.

So now we know that our Localization works, but that’s not what this post is about is it… What we want is to localize the Error Messages in our Model! So lets make a test model with some validation attributes!

Notice that I’m not using ErrorMessage anymore, instead I’m using ErrorMessageResourceType and ErrorMessageResourceName.

public class Test
{
    // StringLength
    [StringLength(5, ErrorMessageResourceType = typeof(Global), ErrorMessageResourceName = "StringLength")]
    public string StringLength { get; set; }

    // Required
    [Required(ErrorMessageResourceType = typeof(Global), ErrorMessageResourceName = "Required")]
    public string Required { get; set; }

    // Required and StringLength
    [Required(ErrorMessageResourceType = typeof(Global), ErrorMessageResourceName = "Required")]
    [StringLength(5, ErrorMessageResourceType = typeof(Global), ErrorMessageResourceName = "StringLength")]
    public string Combos { get; set; }

    // Range Attribute
    [Range(1, 31, ErrorMessageResourceType = typeof(Global), ErrorMessageResourceName = "Range")]
    public int Range { get; set; }

    // RegularExpression Attribute
    [RegularExpression(@"^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$", ErrorMessageResourceType = typeof(Global), ErrorMessageResourceName = "Email")]
    public string Regex { get; set; }

    // Custom Regular Expression EmailAttribute
    [Email(ErrorMessageResourceType = typeof(Global), ErrorMessageResourceName = "Email")]
    public string Email { get; set; }
}

So that’s it for the model, now we need a Controller and a View for that.

[HttpGet]
public ActionResult Create()
{
   var t = new Test();
   return View(t);
}

[HttpPost]
public ActionResult Create(Test t)
{
    if (ModelState.IsValid)
    {
        // If it's valid redirect to success page, or in my case the Home page since I have nothing else...
        return Redirect("/");
    }
    return View(t);
}

For the view, just right click on either Create and click Add View…

We don’t need to change anything to the view so I’m not going to go into details on this one… Beside I’ll post the Source Code when I’m done..

Here’s the final result, with my browser set to French.

It’s my first strike at this so if you have any comments or suggestion feel free to share it with us in the comment section!

Here’s the Source Code

You need to write your model with the proper validation attributes.

using System;
using System.ComponentModel.DataAnnotations;

namespace FunWithMvc2RC2
{
    public class Test
    {
        // StringLenght
        [StringLength(5, ErrorMessage = "Maximum 25 Characters")]
        public string StringLength { get; set; }

        // Required
        [Required(ErrorMessage = "Required Field")]
        public string Required { get; set; }

        // Required and StringLenght
        [Required(ErrorMessage = "Required Field")]
        [StringLength(5, ErrorMessage = "Maximum 25 Characters")]
        public string Combos { get; set; }

        // Range Attribute
        [Range(1, 31, ErrorMessage = "Minimum 1; Maximum 31")]
        public int Range { get; set; }

        // RegularExpression Attribute
        [RegularExpression(@"^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$", ErrorMessage = "Invalid Email Address")]
        public string Regex { get; set; }

        // Custom Regular Expression EmailAttribute
        [Email(ErrorMessage = "Email Validation")]
        public string Email { get; set; }
    }
}

This will give you something like this:

And to make the Email Attribute you simply make a new class, which inherits RegularExpressionAttribute and then send the constructor an Email Address Regex! It’s this simple. You could do the same for any other Regular Expression based validation. Just Make sure you call your class – SomethingAttribute.

using System;
using System.ComponentModel.DataAnnotations;

namespace FunWithMvc2RC2
{
    public class EmailAttribute : RegularExpressionAttribute
    {
        public EmailAttribute() :
            base(@"^(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6}$") {}
    }
}

If you need such an ActionResult in your application, I would recommend you to read his article first!

public static string Image(this UrlHelper helper, string fileName)
{
    return helper.Content("~/Content/Images/" + fileName));
}

public static string Stylesheet(this UrlHelper helper, string fileName)
{
    return helper.Content("~/Content/Stylesheets/" + fileName);
}

public static string Script(this UrlHelper helper, string fileName)
{
    return helper.Content("~/Content/Scripts/" + fileName);
}

So instead of doing this:

<link href="../../../Content/StyleSheets/Main.css" rel="stylesheet" type="text/css" />

You can do this:

<link href="<%= Url.Stylesheet("Main.css")%>" rel="stylesheet" type="text/css" />

These are just 3 common examples, you should do the same thing for things you use a lot.

Scott Guthrie wrote a nice article about it.

Found it on ScottGu’s and Erik Porter’s blogs

There are many solutions to fix this, I’ll just explain my favorite, which is extension-less url.

So lets show IIS6 how to handle extension-less URL. For this, we’ll use the Wildcard Mapping feature.

• Open Internet Information Services (IIS) Manager. (run inetmgr)
• Right Click » Properties on your website.
  
• Open the Home Directory tab.
• Click on the Configuration button.
• Open the Mappings tab of the Application Configuration window.
• In the Wildcard application maps section, click on the Insert button.
• Browse to %windir%\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll.
• uncheck “Verify that file exists”.
  
• That’s it! Now try your ASP.NET MVC Application it should work nicely!

Phil Haack has a very good article about this matter and also explains other solution. You should definitly read it!

First you need models. I chosed to do this example using a Country and State dropdown, so I’m going to build to Models (Country and State) with a little bit of fake data.

Lets start with the Country Model and Fake Data

using System.Collections.Generic;
using System.Linq;

namespace CascadingDDLjQueryDemo.Models
{
    public class Country
    {
        public string CountryCode { get; set; }
        public string CountryName { get; set; }

        public static IQueryable GetCountries()
        {
            return new List
            {
                new Country {
                    CountryCode = "CA",
                    CountryName = "Canada"
                },
                new Country{
                    CountryCode = "US",
                    CountryName = "United-States"
                }
            }.AsQueryable();
        }
    }
}

And now the State Model and Fake Data

using System.Collections.Generic;
using System.Linq;

namespace CascadingDDLjQueryDemo.Models
{
    public class State
    {
        public string CountryCode { get; set; }
        public int StateID { get; set; }
        public string StateName { get; set; }

        public static IQueryable GetStates()
        {
            return new List
            {
                new State
                    {
                        CountryCode = "CA",
                        StateID=1,
                        StateName = "Ontario"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=2,
                        StateName = "Quebec"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=3,
                        StateName = "Nova Scotia"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=4,
                        StateName = "New Brunswick"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=5,
                        StateName = "Manitoba"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=6,
                        StateName = "British Columbia"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=7,
                        StateName = "Prince Edward Island"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=8,
                        StateName = "Saskatchewan"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=9,
                        StateName = "Alberta"
                    },
                new State
                    {
                        CountryCode = "CA",
                        StateID=10,
                        StateName = "Newfoundland and Labrador"
                    },
                new State
                    {
                        CountryCode = "US",
                        StateID=11,
                        StateName = "New-York"
                    },
                new State
                    {
                        CountryCode = "US",
                        StateID=12,
                        StateName = "California"
                    },
                new State
                    {
                        CountryCode = "US",
                        StateID=13,
                        StateName = "Washington"
                    },
                new State
                    {
                        CountryCode = "US",
                        StateID=14,
                        StateName = "Vermont"
                    }
            }.AsQueryable();
        }
    }
}

We can now add List methods in the controller. I chosed to return both Json and View so I could decide to make a page CountryList and use the same method.

using System.Linq;
using System.Web.Mvc;
using CascadingDDLjQueryDemo.Models;

namespace CascadingDDLjQueryDemo.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult CountryList()
        {
            IQueryable countries =
                Country.GetCountries();

            if(HttpContext.Request.IsAjaxRequest())
                return Json(new SelectList(
                                countries,
                                "CountryCode",
                                "CountryName")
                            );

            return View(countries);
        }

        public ActionResult StateList(string CountryCode)
        {
            IQueryable states = State.GetStates()
                .Where(x => x.CountryCode == CountryCode);

            if (HttpContext.Request.IsAjaxRequest())
                return Json(new SelectList(
                                states,
                                "StateID",
                                "StateName")
                            );

            return View(states);
        }
    }
}

And now we require Routes to access this data

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace CascadingDDLjQueryDemo
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode,
    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                "StatesList",
                "Home/States/List/{CountryCode}",
                new { controller = "Home", action = "StateList", CountryCode = "" }
            );

            routes.MapRoute(
                "CountriesList",
                "Home/Countries/List",
                new { controller = "Home", action = "CountryList" }
            );

            routes.MapRoute(
                "Default",
                "{controller}/{action}/{id}",
                new { controller = "Home", action = "Index", id = "" }
            );

        }

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

The Javavascript

$(function() {
        $.getJSON("/Home/Countries/List", function(data) {
            var items = "
---------------------

";
            $.each(data, function(i, country) {
                items += "
" + country.Text + "

";
            });
            $("#Countries").html(items);
        });

        $("#Countries").change(function() {
            $.getJSON("/Home/States/List/" + $("#Countries > option:selected").attr("value"), function(data) {
                var items = "
---------------------

";
                $.each(data, function(i, state) {
                    items += "
" + state.Text + "

";
                });
                $("#States").html(items);
            });
        });
    });

And finally, the Index View.

ASP.NET MVC Cascading DropDownList using jQuery

Countries


        States

You can find the source code here.