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.

First of all, to build a Windows Phone 7 Application you will need to download and install the this. You will also need to have a basic understanding of Silverlight/XAML.

1. First things first, lets create a new Project.

2. Then I created a few pages in a folder I created and named Views (You could call this folder whatever you want…)

3. This is what my Solution Explorer looks like now.

4. To create Static Links, add some Hyperlink to the ContentGrid of MainPage.xaml and give them the NavigateUri property with the path to the page you want to navigate to.

5. Now if you run the application using the Windows Phone 7 Emulator and click one of the Hyperlink you created you should see the content of that page. In my case the only thing I changed is the Page Title..

6. Lets try to do the same thing with the Navigation Service. Open App.xaml and add the following code in

7. We now need to tell the Application to use this UriMapper. This is very simple, open App.xaml.cs and add RootFrame.UriMapper = Resources["UriMapper"] as UriMapper; at the end of the constructor. It should look like this:

public App()
{
    // Global handler for uncaught exceptions.
    // Note that exceptions thrown by ApplicationBarItem.Click will not get caught here.
    UnhandledException += Application_UnhandledException;

    // Standard Silverlight initialization
    InitializeComponent();

    // Phone-specific initialization
    InitializePhoneApplication();

    RootFrame.UriMapper = Resources["UriMapper"] as UriMapper;
}

8. Once this is done, add a button on the MainPage.xaml.

    
    
    
< B utton Content="Go To Page 3" Height="72" HorizontalAlignment="Left" Margin="21,291,0,0" Name="button1" VerticalAlignment="Top" Width="246" Click="button1_Click" />

9. Double click on the button you just added to give it a Click Event. This should create button1_Click method in MaiPage.xaml.cs. Put the following line of code in the method:

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/Page3", UriKind.Relative));
}

10. NavigationService also provides you metods like GoBack() to go back to the previous page. If you want to try this, you could add a button a Page3.xaml much like we did for step 9 and put this code in Page3.xaml.cs:

private void button1_Click(object sender, RoutedEventArgs e)
{
    NavigationService.GoBack();
}

I know I skipped the second option, Routes. I’ll write about it in another post! I think the most important navigation feature in a Windows Phone 7 application is the NavigationService!

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}$") {}
    }
}

So I look around in VS menus and find Tools -> WCF Service Configurator Editor. I clicked it and modified my Web.Config…But I really liked to have the option to just open this in the Context Menu! I clicked again just to humor myself and it was back!

I don’t know what happened there, it’s actually the first time I see this, but I don’t play much with WCF! I was actually able to reproduce this first hand on a virtual machine….

1. Open the Command Line ( Start -> Run -> cmd)
2. Go to:  C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE (or C:\Program Files\Microsoft Visual Studio 8\Common7\IDE for Visual Studio 2005)
3. Execute: tf workspaces /remove:workspace

This probably works with Visual Studio 2010, I should update this post whenever I try it!

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.