Personalização é uma característica comum aos principais produtos da internet. Empresas como Google, Twitter e WordPress sabem que na “nova internet” o usuário é uma multidão mas também é único e possui um gosto exclusivo. Para conseguir que o usuário passe mais tempo em seu site e tenha uma experiência mais agradável os produtos dessas empresas permitem que o usuário modifique o ambiente de acordo com o seu gosto.

Eu criei uma personalização semelhante aos temas do WordPress e hospedei no endereço http://mvc3themes.100loop.com/.  Nessa aplicação você inicialmente é direcionado ao tema padrão, veja a tela inicial:

Tema Padrão (Azul)

E através do DropDownList você sai de um tema extremamente simples para interfaces completamente diferentes apenas selecionando um outro tema. Veja algumas possibilidades:

Tema em 1 Coluna

Tema em 2 Colunas

Tema em 3 Colunas

E sabe o que é mais legal? Com ASP.NET MVC você atinge esse resultado facilmente. No tutorial abaixo o passo-a-passo e ao final o download da solução.

Como criar temas usando ASP.NET MVC 3?

Criar um aplicativo temático usando ASP.NET MVC 3 é muito simples, basta você fazer algumas configurações na sua estrutura de pastas e ajustes no carregamento das Views pela sua ViewEngine.

  1. Crie um novo projeto ASP.NET MVC 3 Web Application e crie uma pasta chamada Themes na raíz do projeto.
  2. Em seguida crie uma pasta chamada Default e mova as pastas Views, Scripts e Content para dentro dela.

A pasta Default irá conter o tema padrão do seu site, e nela colocamos os recursos originais desse template de projeto. Clique na imagem abaixo para conferir a estrutura final:

Estrutura de Pastas

  1. O próximo passo é adicionar um código para definir o tema corrente no evento Begin_Request da aplicação. Então acrescente o seguinte código no Global.asax.cs:
protected void Application_BeginRequest(object sender, EventArgs e)
{
    RazorViewEngine engine = (RazorViewEngine)System.Web.Mvc.ViewEngines.Engines[1];

    HttpCookie themeCookie = Request.Cookies["Theme"];

    string themeName = "Default";

    if (themeCookie != null)
        themeName = themeCookie.Value;

    engine.MasterLocationFormats = new string[] {
            "~/Themes/" + themeName + "/Views/{1}/{0}.cshtml",
            "~/Themes/" + themeName + "/Views/Shared/{0}.cshtml",
        };

    engine.ViewLocationFormats = new string[] {
            "~/Themes/" + themeName + "/Views/{1}/{0}.cshtml",
            "~/Themes/" + themeName + "/Views/Shared/{0}.cshtml",
        };

    engine.PartialViewLocationFormats = new string[] {
            "~/Themes/" + themeName + "/Views/{1}/{0}.cshtml",
            "~/Themes/" + themeName + "/Views/Shared/{0}.cshtml",
        };

    string extensionsPath = Server.MapPath(string.Format("~/Themes/{0}/Extensions/", themeName));
}

Este evento verifica se o cookie Theme possui algum tema definido, em caso positivo nós modificamos na ViewEngine o local de procura de Views.

Além desse código para definir o tema. Temos que fazer mais algumas pequenas modificações para criarmos aquele DropDownList do menu. Vamos a eles:

  1. Acrescente os seguintes Action Methods no seu controlador Home:
public ActionResult Themes()
{
    HttpCookie themeCookie = Request.Cookies["Theme"];

    string theme = themeCookie != null ? themeCookie.Value : "Default";

    ViewBag.Themes = new SelectList(
        new[] { "Default", "1Column", "2Column", "3Column" }, theme);

    return PartialView();
}

[HttpPost]
public ActionResult Themes(string theme)
{
    HttpCookie themeCookie = new HttpCookie("Theme", theme);
    HttpContext.Response.Cookies.Add(themeCookie);

    ViewBag.Themes = new SelectList(
        new[] { "Default", "1Column", "2Column", "3Column" }, theme);

    return PartialView();
}
  1. Crie uma PartialView chamada Themes.cshtml na pasta “~/Themes/Default/Views/Home/” e substitua pelo seguinte código:
@using (Html.BeginForm())
{
    @Html.DropDownList("Theme", (SelectList)ViewBag.Themes)
    <input value="Alterar" type="submit" />
}
  1. Encontre e substitua o seu menu no arquivo _Layout.cshtml por esse:
<div id="menucontainer">
    <ul id="menu">
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.Action("Themes", "Home")</li>
    </ul>
</div>

Com esses códigos você já pode criar outros temas e acrescentar na pasta Themes e usá-los.

Download da Solução

Você pode baixar a solução através do endereço http://www.megaupload.com/?d=3TFUPGJ3. Como complemento ao post recomendo que você me siga no twitter @ivanpaulovich e faça sua inscrição no evento gratuito em que irei palestrar.