Optimizing image loading in MVC VS-2012 websites

Images often take up a large proportion of the load time of a webpage, second only to data retrieval from a database. Here are 3 things we can do in our Visual Studio MVC website projects, to significantly reduce that load time.

1. Reduce file size, by controlling the image dimensions and its jpeg quality. Ideally, images should be of exactly the dimensions (width and height in pixels) that are to be finally displayed on the webpage (typically controlled by the css img width and height properties). Also, reducing the jpeg quality (increasing compression) a little may result in a drastic drop in file size while still having very good screen-display quality. If you are using the EncoderParameter class to process images for uploading, consider using a compression level of 90.
2. Enable image caching at both server and browser levels. Use the OutputCache attribute on your controller action method that retrieves the images, and set its location property to "ServerAndClient". The duration property can be set appropriately depending upon your website, and will determine how long your web server and the user's browser are going to cache the image. Added bonus: The server caching will reduce your storage data-out costs, and the browser caching will reduce your web server data-out costs.
3. Eliminate duplicate pulls of the same image, by always using an identical method call pattern. Parameters in an action method are not case-sensitive, nor do they need all the parameters to be included in a call (missing parameters will receive a null). However, when retrieving the same image from different pages or different parts of the same page, inconsistency in the calls from your .cshtml or .vbhtml files will cause your browser to consider these as separate elements, and it will send multiple requests to your server. If the calls are identical, most browsers will send only a single request, and will then cache and re-use the same image. Recommendation: In your @Url.Action() calls, make sure to specify all of the action method's parameters, and treat them as though they were case-sensitive.

Using the above 3 suggestions, you should see significant load time improvements. A good way to do a quick (but pretty detailed) check of the page's performance in the Google Chrome browser: Right-click on the page | click on Inspect Element | click on the Network tab | refresh your page. You'll see exactly what was loaded, and how long each element took. You can click on the Images tab at the bottom, to examine just the images. Then tweak your website using the above suggestions - and look out for improved performance and happier users!

Happy coding!

Azure .Net 4.5 projects through VS 2012

Easy Azure deployment of .Net 4.5 websites, using Visual Studio 2012

Last week, Windows Azure started supporting .Net 4.5. Long awaited, most welcome feature!  Now we can create and deploy our .Net 4.5 websites straight to Azure, all from within Visual Studio 2012. No add-ons needed.

In your Azure account:

1. Sign-in into your Azure account. If you don't have one, you can always sign-up for a free 3-month trial;
2. Create a new Azure web host on the Azure server: Click on Web Sites in the left bar, then click on the large + New button at the bottom;
3. Select Compute / Website / Quick Create (Note: you may have to sign-up for the Preview program at this point, if not already done so - it's simple, painless and quick);
4. Give your new Azure web host a name that you like. The URL for your new site will be of the form: http://yournamechoice.azurewebsites.net;
5. In a minute or 2, the host will be set up, and good to go (to receive your actual web content);
6. (At this point, if you navigate to the URL, it will show an auto-created default page)
7. In the main Azure window, click on the name of your new web host (not its URL), to get to its Dashboard page. Click on Download Publish Profile, and note where the Publish Profile was downloaded into your local machine. This will be used by Visual Studio 2012 in the next step.

In Visual Studio 2012:

1. Open up your .Net 4.5 website project, and press Ctrl-F5 to make sure it runs well locally;
2. Right-click on the website project, and select the Publish... option;
3. You'll get a new Publish Web window. Click the Import... button, to import the Publish Profile (.PublishSettings file) you obtained earlier from your Azure website host;
4. You can check everything by using the Next> button, and click Publish when all looks good;
5. VS 2012 will take just 2 or 3 minutes to upload everything to your Azure host;
6. At the end of the upload, Visual Studio will automatically bring up your new website, in your default browser.

That's it... done! The whole process has been made very direct and clean - even eliminating the need to add the extra "Windows Azure Cloud Service" project (as had to be done with VS 2010 or with .Net 4.0 websites earlier).

Happy coding!

Adding custom fields to a VS2012 MVC4 SimpleMembership system

Add custom columns/fields to your MVC4 SimpleMembership "UserProfile" table

(This is the 2nd of a 3-article series, on using SimpleMembership along with customized fields)
Article 1: Visual Studio 2012 uses SimpleMembership as its new Membership Provider
Article 2: This article.
Article 3: Programatically accessing values in VS2012 SimpleMembership custom fields

MVC 4 in Visual Studio 2012 introduces the new SimpleMembership Provider as its default web-based authentication system. While this system is much simpler than the earlier ASPNETDB system that it replaces, there definitely are a few new and neat tricks to be learnt.

One of them is: How do I add custom fields to my MVC 4 registration system?

It can be done in just 4 simple steps:

1. Start up VS 2012, and create a new MVC 4 web project. Set up your SimpleMembership registration system - for some help, please see my blog post on setting up a SimpleMembership Provider in a VS2012 MVC4 project.

2. Next, run the project and navigate to the login page, so that the tables get created. It is not necessary to create a user at this point.

3. Then, in your database, alter the table UserProfile, and add a column: FullName (nvarchar(50)).

4. Next, add/reference the new FullName field in the following programs in your project:

In class UserProfile, in AccountModels.cs (to ensure the class matches the table columns):

    [Table("UserProfile")]

    public class UserProfile

    {

        [Key]

        [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]

        public int UserId { get; set; }

        public string UserName { get; set; }

        // Customization: Field(s) added

        public string FullName { get; set; }

    }

In class RegisterModel, in AccountModels.cs (to enable handling on the registration form):

    public class RegisterModel

    {

        // Existing code

        // ...

        // Customization: Field(s) added

        [Required]

        [Display(Name = "Your full name")]

        [DataType(DataType.Text)]

        public string FullName { get; set; }

    }

In the Register.cshtml view (so it'll appear on the user registration form), add a new li element with the following content:

    @Html.LabelFor(m => m.FullName)

    @Html.TextBoxFor(m => m.FullName)

In the [HttpPost] Register ActionResult, in AccountController.cs, modify the call to the CreateUserAndAccount method (to write the new column to your database):

    // Customization: Field(s) added when creating a new account

    WebSecurity.CreateUserAndAccount(

        model.UserName,

        model.Password,

        new { FullName = model.FullName }

        );

Now run your program and register a new user, supplying a value for the FullName field... success! The new row created in your database table contains the value supplied for the new column!

Note: This post covers how to create a custom column. Another post explains how to access the value of that column from within your VS 2012 MVC 4 projects. The link is given below.

Happy coding!

(This is the 2nd of a 3-article series, on using SimpleMembership along with customized fields)
Article 1: Visual Studio 2012 uses SimpleMembership as its new Membership Provider
Article 2: This article.
Article 3: Programatically accessing values in VS2012 SimpleMembership custom fields