As I was playing around with MVC4 Beta and watching some of the hype and the presentations about it – I wanted to share with you some of the features that I’m mostly excited about. These I think would directly come into play. I’ll share my opinion about them and give you few tips on how to use them y0′
Btw if you still haven’t tried it – you can do so at: http://www.asp.net/mvc/mvc4
Here is the list:
- New WebAPI using REST
- View Switcher Component
- Mobile specific views
- Inbuilt Ajax Scaffolding plus cool looking default template
So here we go…
Basically the recipes would give us the option to automate processes inside of our application. To create a recipe you would need to create a class library and implement IRecipe Interface.
There is also a package that would make it easier for you to create recipes made by Phil Haack – AspNetMvc4.RecipeSdk. You can install it using Nuget – press Tools->Library Package Manager->Package Manager Console and then type: “Install-Package AspNetMvc4.RecipeSdk”.
I recommend you reading the whole blog post on how to create recipes at Haack’s blog:
View Switcher Component
This is very neat feature that would basically allow us to use jQuery Mobile for rendering our website! In order to use this we would need to install the following package using the package manager:
In the package manager please type: Install-Package jQuery.Mobile.MVC
This will add automatically the jQuery.Mobile.MVC and few other references to your project. Also in the default View’s shared folder it will add 2 additional files:
Here is how _ViewSwitcher should look like:
It basically detects if a mobile version of the view should be passed to the client or not! If you directly let jQuery to do everything for you – your page could be translated into something completely different, like this:
Note that the styles of your website would be completely overwritten by jQuery mobile, and would be defaulted to cleared black/gray functional UI.
This – could look ok for you. At least it looks functional and easy to click etc. - however if you want to preserve the original feel – colors and styling of your website – you should definetely make your own Mobile specific views.
Mobile specific views
This feature is the one that comes most straight forward – and basically is the easiest to use.
Simply rename your existing or create a new view with the follwing convention:
Basically you need to rename the view inside of your view folder from “ViewName.cshtml” to “ViewName.mobile.cshtml”. In ViewName.mobile.cshtml you should optimize the page for mobile device, you could change a couple of css selectors, use partials etc.
Now when the request for this view resource comes from a mobile device – the ASP .NET will automatically pass your mobile version of the view overriding the jQuery mobile’s default styling.
That’s it – no strings attached. You could simply decide to do this for several or all of your views – depending on what you want to achieve. Or if you are too lazy you could leave all the view styling up to jQuery mobile – it’s all up to you
So this is one of the features that it would be so easy to benefit from. By minifying your js and css files you gain could performance of your website, because any white-space and newline is removed.
Also it makes it extremely easy to include additional js files and css files into your project. By now you had to add a “<link href=… or <script src=… for each file. Now you can do this:
<script src=”~/Scripts/js”></scripts> <link href=”~/Content/css” rel=”stylesheet” />
Voilla – all the css files inside of Content/css and all files inside of /Scripts/js are added to your website.
You can also use: @System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl
<script src=@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(”~/Scripts/js”)></scripts> <link href=@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(”~/Content/css”) rel=”stylesheet” />
The second option using Bundlers will create a hash code in similar format:
The generated hash will be different every time you change a js file inside of the Scripts/js folder. This way you will be always sure that the client always gets the lastes version of your css / js files. New hash-code is generated only when you change / add something – this means that you havent changed anything in your js/css files and they will cached. Pretty cool huh
The only bad thing is that you won’t be able to use this features with VS2010 and .NET 4.0 you will need to wait for VS2012 – or download the beta of VS2011 from here:
VS2011 Beta Offline Download
I’ll try to finish this post – adding info about the Inbuilt Ajax Scaffolding and the updated default template in the next few days!