Usando múltiplos layouts em ASP.Net MVC

Veja como utilizar vários layouts no seu site em ASP .Net MVC baseado no domínio requisitante.

Antes de dar inicio a este artigo sobre como criar múltiplos layout em ASP.Net MVC, vamos imaginar o seguinte cenário em um aplicativo ASP.Net MVC:

Você desenvolveu um aplicativo em ASP .Net MVC e deseja disponibilizar ele para vários clientes, porem cada cliente deve possuir um domínio único (sitea.com.br, siteb.com.br) e um layout único para cada site, ou seja, um sistema com vários layouts.

Agora que temos o nosso cenário em mente, vamos ver como cria-lo.

Criando o projeto em ASP .Net MVC para múltiplos layouts

Para acompanhar este artigo você deve criar um projeto em ASP.Net Web Application escolher o template Empty. Após criar o projeto, crie um controller Home e uma view para a action index do controller Home.

Lembre-se de marcar a opção Use a layout page para que ele gera a nossa pasta Shared e adicione o CSS do Bootstrap na pasta Content.

Agora devemos definir uma pasta para guardar os nossos layouts, para isso crie uma subpasta Temas dentro da pasta Views e dentro desta pasta crie uma subpasta site1.com.br e dentro da pasta site1.com.br crie uma subpasta Layout.

Uma vez criado as pastas, você deve mover a pasta Home para dentro da pasta site1.com.br e o arquivo _Layout.cshtml para dentro da pasta Layout, como mostra a imagem abaixo:

Criando multiplos layouts em ASP.Net MVC

Criando multiplos layouts em ASP.Net MVC

Ao tentar rodar nosso aplicativo ele irá exibir um erro dizendo que não pode encontrar a view para Action Index do controller Home.

Alterando caminho das views para múltiplos layouts

Abra o controller Home e altere seu código como mostrado abaixo:

1
2
3
4
5
6
public ActionResult Index()
{
    var temaAtual = "sitea.com.br";
    ViewBag.tema = temaAtual;
    return View("~/Views/Temas/"+temaAtual+"/Home/Index.cshtml");
}

Com isso estamos informando para a View onde está o arquivo cshtml para que ela possa renderizar.

Criamos uma variável temaAtual que armazena o nosso domínio requisitante, nos próximos passos iremos substituir ele por um método que retorna a URL do domínio atual (host).

Agora altere o código da sua view index do controller Home para refletir o código abaixo:

1
2
3
4
5
6
@{
    ViewBag.Title = "siteA";
    Layout = "~/Views/Temas/" + ViewBag.tema + "/Layout/_Layout.cshtml";
}
 
<h2>Meu sitea.com.br</h2>

Repare que alteramos o Layout padrão, setando o caminho do nosso layout, concatenando a ViewBag.tema que contem o nome da pasta do nosso tema que foi passado dentro da action Index do nosso controller Home.

Agora para finalizar devemos remover todo o código do arquivo _ViewStart.cshtml que é quem define o layout padrão para nossas views.

Identificando o host de origem Request URL

Agora vamos criar uma pasta Helpers na raiz do nosso projeto, e dentro criar uma classe chamada Tema com o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
using System.Web;
 
namespace MultiplosLayoutsMVC.Helpers
{
    public class Tema
    {
        public static string UrlRequisitante()
        {
            var url = HttpContext.Current.Request.Url.Host;
            url = url.Replace("www.", "");
            return url;
        }
    }
}

Nesta classe criamos um método estático UrlRequisitante que irá retornar o domínio (Host) que está requisitando a URL. Para evitar inconsistências no nome do host com o da pasta do tema, removemos “www.” caso exista.

O segredo aqui é que a pasta tema seja sempre o nome do domino para o qual você quer criar o tema. Claro que podemos modificar isto, mas para simplificar usamos o próprio domínio.

Testando múltiplos layouts em ASP .Net MVC

Para testar em sua máquina você deve criar alias de domínio para o seu projeto no IISExpress, para que possamos ter um domínio sitea.com.br e não o localhost. Para saber como criar leia o artigo Domínio Fake, Alias de domínio e Binding de domínios no IISExpress.

No meu caso irei criar dois domínios fakes:

1
2
3
4
5
6
7
8
9
<site name="MultiplosLayoutsMVC" id="1814185385">
                <application path="/" applicationPool="Clr4IntegratedAppPool">
                    <virtualDirectory path="/" physicalPath="c:\users\cleyton\documents\visual studio 2013\Projects\MultiplosLayoutsMVC\MultiplosLayoutsMVC" />
                </application>
                <bindings>
                    <binding protocol="http" bindingInformation="*:35070:sitea.com.br" />
                    <binding protocol="http" bindingInformation="*:35070:siteb.com.br" />
                </bindings>
            </site>

Uma vez configurados os seus domínios podemos testar nossa aplicação acessando http://sitea.com.br que o nosso primeiro tema já será entregue.

Agora podemos duplicar a nossa pasta sitea.com.br para criarmos o siteb.com.br e fazer as alterações necessárias em cada layout.

Conclusão

Podemos ver que é bem simples a implementação de vários layouts em ASP .Net MVC, com pouco código podemos ter uma layout para cada cliente em um mesmo sistema.

Também podemos modificar o nosso código para refletir outro cenário: um site só onde o usuário pode escolher o layout.

Basta que para isso ao invés de utilizar o host para determinar o tema, você implemente um cadastro de temas, e utilize o id/nome deste cadastro para determinar qual o tema a ser utilizado.

Comentarios

comentarios

One Response to Usando múltiplos layouts em ASP.Net MVC