Posts in category MVC3

ASP.NET MVC4 : Create a Mobile Application

Sep19
2011 2 Comments Written by Morgan

If you’re not using (yet) ASP.NET MVC4 (Preview), please read this post and install MVC4.

In this post, I will show you three new functionalities brought by MVC4 for mobile websites.

The mobile Application Template
The View Switcher
The Display mode by Browser type

Smartphone and tablet are able to read websites not optimized for tiny screen but if a user can jump automatically on an optimized version of the website, it’s better for everyone!

One interesting feature of this new version of the ASP.NET MVC framework 4 is the new Mobile Application template. With this template you’ll be able to develop quickly a website especially for mobile and tablet.

1 – Create a full-mobile Website

In Visual Studio, Create a new MVC4 project and select the “Mobile Application” template.

Mobile Application Template - MVC4

I consider that you’ve already develop a classic MVC application. If true, you will not be surprised by the generated project. It’s almost the same as a classic MVC desktop website.

So what the difference?

In the “content” folder you will find another JavaScript library: jQuery Mobile. ASP.NET MVC4 Mobile Template is based on the famous JavaScript framework for mobile application. You can learn a lot if you visit the jQuery mobile website.

Models and Controller are similar to a classic MVC Application.

In the view, you just have to add some tag to tell how jQuery mobile needs to display the page.

If we take a look at this code (Menu of the website generated by MVC4), you will probably recognize the Razor syntax. Nothing change when you want to develop Mobile Application with MVC4. You just have to use special attribute in your HTML.

Here, we declare a classic HTML list….and jQuery Mobile will transform it into an accessible list for mobile devices user.

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

The mobile version of ... Coding-in.net !

This new template is perfect to start learning ASP.NET MVC4 mobile functionnalities and JQuery Mobile. If you already worked with MVC 3, you will see a big different between generated websites ! The MVC 4 website is simple, clean and uses jQuery. It’s a very good point to start learning !

2 – Classic and mobile Website

I will not describe all the new mobile features in MVC 4 in this post but there’s two another interesting features that I want to talk about and wich can interest some of you. It’s the “Display mode by Browser type” and the “View Switcher”.

“View Switcher”

A lot of mobile website have a special link to switch between mobile and classic view. ASP.NET MVC4 allows you to do this in … 1 click !

This browser overriding ability allows user with mobile device to switch onto the classic version and vice versa.

To add this functionnality to your ASP.NET MVC4 website, just open the Package Manager Console (Visual Studio > Tools > Library Package Manager) and paste this line :

Install-Package jQuery.Mobile.MVC

NuGet is awesome isn’t it ? Your solution is updated and you now have a beautiful view switcher in your website !

If we take a look at the added code, you should have a new partial View (in the Shared folder) called _ViewSwitcher.cshtml.

@if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
{
    <div class="view-switcher ui-bar-a">
        @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice)
        {
            @: Displaying mobile view
            @Html.ActionLink("Desktop view", "SwitchView", "ViewSwitcher", new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
        else
        {
            @: Displaying desktop view
            @Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })
        }
    </div>
}

In this code we can see the new GetOverridenBrowser method which returns the request’s user agent override value, or the actual user agent string if no override has been specified.

The view call the SwitchView action in the ViewSwitcher controller.

        public RedirectResult SwitchView(bool mobile, string returnUrl) {
            if (Request.Browser.IsMobileDevice == mobile)
                HttpContext.ClearOverriddenBrowser();
            else
                HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);

            return Redirect(returnUrl);
        }

Here again we could take a look at some new method wich allows overriding brower agent value.

“Display mode by Browser type”

Okay, that is cool. You are now able to develop a full mobile website … But how to switch automatically between classic and mobile website depending on the browser type ? Thanks to MVC 4 , everything can be done easily !

For example, if you already developped a classic website, you can easily develop the Mobile version with a new view called by the same name and with the extension .mobile.cshtml.

If you have a Home.cshtml, create a Home.mobile.cshtml. If a user tries to acces to your website, the mobile version will be displayed.
Better, you can override this feature and develop particular pages for a specific device. Thanks to the User Agent name available in the page request, you can, for example, target an iPhone, Android or WP7 user.

In the Global.asax file, in the Application_Start method, just copy the code below.

            DisplayModes.Modes.Insert(0, new DefaultDisplayMode("Android")
            {
                ContextCondition = (context => context.Request.UserAgent.IndexOf
                    ("Android", StringComparison.OrdinalIgnoreCase) >= 0)
            });

            DisplayModes.Modes.Insert(0, new DefaultDisplayMode("WindowsPhone")
            {
                ContextCondition = (context => context.Request.UserAgent.IndexOf
                    ("Windows Phone OS", StringComparison.OrdinalIgnoreCase) >= 0)
            });

Here, we are saying to MVC 4 that we will add particular views (With .Android.cshtml and .WindowsPhone.cshtml) to the solution. If the user Agent is declared as an Android or Windows Phone browser, MVC4 will try to find the good view for this device. Simple and efficient !

If you want to change the user agent without buy every mobile on the market, you could use amazing extension like User Agent Switcher (For Firefox).

Okay that’s all for today ! I hope you will enjoy as me these new functionnalities.
Stay tuned of Coding-in.net, I will publish some post about MVC4 !

Canadian Museum of Civilization

MVC 3 – Organize your partial views

Aug27
2011 6 Comments Written by Morgan

MVC 3 is amazing. I love how it’s working and how developpers are able to enhance its behavior.

When you’re building an ASP.NET MVC3 project, you work with views. To organize and share view’s part, you can use partial view. (Or Editor Template but it’s not today’s subject).

Often, partial’s views are placed into the View folder and editor template in the Shared/EditorsTemplate folder.

Partial View in View/Module Folder

Partial View in View/Shared Folder

But when you want to correctly separate View and Partial view, you want to reorganize folder. And that’s where the problem is. Razor tries to find a partial view in a predefined location’s list.

If the parent page is in the Module “Home” and the partial view name is “_MyPartial”, Razor will search the partial view in different folder:

The /Views/Home folder a file named “_MyPartial” (With aspx, ascx, cshtml or vbhtml extension).
The View/Shared folder a file named “_MyPartial” (With aspx, ascx, cshtml or vbhtml extension).

Okay so we don’t have a lot of choice. If the Partial is shared between modules, the View/Shared folder is perfect. But if the view is just called by the Home module, I want to create a subfolder into this module to include all my partial view.

So, how could we say to Razor: “Please, find my partial view in the /View/Home/Partial folder”?

Two solutions are available:

When you call the partial view in the parent view, just change the path to the partial view …

Replace

@Html.Partial("_MyPartial")

@Html.Partial("Partial/_MyPartial")

This is the simplest solution but, on my opinion, we remove the intelligence of Razor to find the partial view on his own.

You can override Razor’s predefined path to find partial views.

The procedure is simple :

First, create a class with RazorViewEngine as its base class and add your view locations.
RozorViewEngine class has a property named PartialViewLocationFormats where you can find all the location used by Razor to find the partial view. So we just need to add location format in this list and …that’s all !

    public class MyViewEngine : RazorViewEngine
    {
        public MyViewEngine()
        {
            var newLocationFormat = new[]
                                        {
                                            "~/Views/{1}/Partial/{0}.cshtml",
                                        };

            PartialViewLocationFormats = PartialViewLocationFormats.Union(newLocationFormat).ToArray();
        }
    }

About the location format, remember that {0} is the ViewName and {1} the module name.

The last thing to do is to register your custom view engine in the Razor ViewEngines collection.

In the Application_Start method of the Global.asax, just add this line :

        protected void Application_Start()
        {
            ViewEngines.Engines.Add(new MyViewEngine());
            AreaRegistration.RegisterAllAreas();
            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
        }

So, now you can add your partial view in the View/Home/Partial folder and call normaly your partial view.

Posted in .NET, C#

MVC 3 and Extension method : How to bind an Enum to a DropDownList

May20
2011 8 Comments Written by Morgan

ASP.NET MVC 3 is delivered with a lot of « Helpers ». These methods help the developer to improve his productivity and the quality of his Html code. If you don’t know yet the MVC Html Helper, you can read the MSDN page about HtmlHelper or read this article with plenty of examples.

Before reading this post and if you don’t know extension methods in .NET, you can read (again!) this article.

Okay, now you’ve learned a lot about Html Helper and methods extension, we can start!

I’m currently on an ASP.NET MVC 3 project and developers need to produce quick and clean HTML forms. MVC Helper has a clean and useful method to bind a collection in a DropDownList and that works perfectly for Enums.

Imagine we have two Enums :

    public enum Vertebrate
    {
        Fish,
        Mammals,
        Reptile,
        Amphibians,
        Birds
    }

    public enum Invertebrate
    {
        Arachnids,
        Insects,
        Mollusks,
        Crustacean,
        Echinoderms,
        Protozoa
    }

We want to write the less code possible to bind this enum in a dropdownlist and bind the list with our model. With MVC Helper we could write something like that :

@Html.DropDownListFor(model => model.Vertebrate, new SelectList(Enum.GetValues(typeof(EnumHtmlHelper.Models.Invertebrate))), "Please select a vertebrate")

That is pretty simple isn’t it? But what I don’t like in this code is the “Technical” part. We need to instantiate the “SelectList” and get all the values of the enum with “Enum.GetValue” and finally we need to specify the “type of” the enum. Boring isn’t it?

And when you have big and complex forms in you view, it’s a good practice to simplify code like that. So, what’s the simplest call we could make in our view? Perhaps something like that :

@Html.EnumDropDownListFor(model => model.Vertebrate, "Please select a vertebrate")

Here, we don’t have complex thing just the binding between the DropDownList with the lamda Expression and, this is optional, the first line of our dropdownlist.

Okay, let’s take a lot deeply in the code to understand how do we build the extension method.

namespace EnumHtmlHelper.Helper
{
    public static class EnumDropDownList
    {
        public static HtmlString EnumDropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> modelExpression, string firstElement)
        {
            var typeOfProperty = modelExpression.ReturnType;
            if(!typeOfProperty.IsEnum)
                throw new ArgumentException(string.Format("Type {0} is not an enum", typeOfProperty));

            var enumValues = new SelectList(Enum.GetValues(typeOfProperty));
            return htmlHelper.DropDownListFor(modelExpression, enumValues, firstElement);
        }
    }
}

First, we need to place our extension class in a namespace with a simple and meaning name. Don’t forget that your extension method will be visible only when the extension namespace is present in the using statement of your view.

Our method has three parameters.

The first parameter is the object on which we want to add an extension.
The second parameter is the lambda expression.
The third parameter is the first element of our dropdownlist.

The expression “modelExpression” is targeting a model property. Therefore we know the return type of this element. So we are able to get all the values of the Enum type. Finaly, we just have to create the SelectList and call the “real” DropDownListFor method.

If we take a look at our view, we just need to add the namespace where the extension is and call the EnumDropDownList method on the @Html object.

@using EnumHtmlHelper.Helper

@model EnumHtmlHelper.Models.IndexModel

<h2>Animals</h2>
<p>@Html.LabelFor(model => model.Vertebrate)</p>
@Html.EnumDropDownListFor(model => model.Vertebrate, "Please select a vertebrate")
<p>@Html.LabelFor(model => model.Invertebrate)</p>
@Html.EnumDropDownListFor(model => model.Invertebrate, "Please select an invertebrate")

Download the Visual Studio solution for this example

Posted in .NET, C#

ASP.NET MVC 3 – How to use EditorTemplates

May14
2011 12 Comments Written by Morgan

There are a lot of fabulous functionalities in ASP.NET MVC.

One of my favorite is the EditorTemplates.

With these templates, it is possible to say

“Okay, I’m gonna make an html template for this type of object and when I want to display this type, Razor will uses my template”.

WPF and Silverlight Developers already know this functionality to display their objet.

For example, a “Person” objet has an “Address” list. (Everyone has already implemented this type of job isn’t it?).

Our (simple) model

Thanks to EditorTemplates in ASP.NET MVC, you will be able to create a template for one address.

First, create the template

Here we want to create a template for the Address objet so we create the file “Address.cshtml”. The name has to be the same that the object. Pretty simple, no?

This file has to be placed into the “Shared/EditorTemplates/” folder.

Editor Template in ASP.NET MVC Visual Studio Solution

Second step, create model and controller

Model : Person Class

    public class Person
    {
        public Person()
        {
            Name = "George";

            var newYork = new Address
                      {
                          City = "NY",
                          Country = "USA",
                          PostalCode = "10021",
                          Street = "34 Vosges street"
                      };

            var paris = new Address
                            {
                                City = "Paris",
                                Country = "France",
                                PostalCode = "75001",
                                Street = "13 Leclerc street"
                            };

            var bruxelles = new Address
                                {
                                    City = "Bruxelles",
                                    Country = "Belgium",
                                    PostalCode = "65478",
                                    Street = "01 Garden Street"
                                };

            Addresses = new List<Address> { newYork, paris, bruxelles };
        }

        public string Name { get; set; }
        public List<Address> Addresses { get; set; }
    }

Model : Address Class

    public class Address
    {
        public string Street { get; set; }
        public string PostalCode { get; set; }
        public string City { get; set; }
        public string Country { get; set; }
    }

Controler : PersonWithAddress

    public class PersonWithAddressController : Controller
    {
        public ActionResult Index()
        {
            return View(new Person());
        }
    }

Nothing special here. If you don’t use MVC yet, please download the example below to better understand the article..

Third step, the view

Here, we strongly typed our View with our model (Person). (Of course it’s not mandatory to use strongly typed view if you want to use EditorTemplate). We want to be able to display the Person with all its addresses.

We call the Html helper EditorFor. For each Address object in the list, Razor will call the Address template.

@model MvcEditorTemplates.Models.Person
@{
    ViewBag.Title = "Person with Addresses";
}
<h2>Person</h2>
<p>
    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)
</p>

<h2>Person Addresses</h2>
@Html.EditorFor(model => model.Addresses)

I Love the syntax. There is no loop in the view. The EditorTemplate does all the job for us. Thanks ASP.NET MVC !

The result - Person and Addresses

Download the example EditorTemplates (Required : ASP.NET MVC 3 – Visual Studio 2010).

Posted in .NET, C#

Posts in category MVC3

ASP.NET MVC4 : Create a Mobile Application

MVC 3 – Organize your partial views

MVC 3 and Extension method : How to bind an Enum to a DropDownList

ASP.NET MVC 3 – How to use EditorTemplates

Recent Posts

Categories

Me, Myself & I

Clean Code