Trabalhando com a template engine Liquid no ASP.NET Core \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 13 Horas 

 34 Min 

 09 Seg 

   Tempo restante da oferta: 13 34 09 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Trabalhando com a template engine Liquid no ASP.NET Core  [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) [ ASP .NET ](https://www.treinaweb.com.br/blog/categoria/asp-net) [ .NET Core ](https://www.treinaweb.com.br/blog/categoria/net-core) 

# Trabalhando com a template engine Liquid no ASP.NET Core

 Em alguns projetos pode ser necessário substituir o Razor por outra engine template. Neste caso, aprenda como fazer esta substituição pelo Liquid.

 [ Wladimilson M. Nascimento ](https://www.treinaweb.com.br/blog/autor/wladimilson-m-nascimento) 7 anos atrás

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/16094538/liquid-fluid.png)  

Quando pensamos em template engine para o ASP.NET, a primeira coisa que vem a mente é o Razor. É uma unanimidade o quanto esta template engine é poderosa e, graças ao suporte constante da Microsoft, sempre recebe novos recursos, como os [Razor Componentes](https://www.treinaweb.com.br/blog/net-core-3-0-criando-componentes-no-razor-components/). Também tem o fato que ela está integrada ao ASP.NET Core, o que facilita o seu uso. Mas ela não é a única opção de template engine para o ASP.NET Core.

Neste quesito se destaca a biblioteca [**Fluid**](https://github.com/sebastienros/fluid), que adiciona ao ASP.NET Core suporte a template engine [**Liquid**](https://shopify.github.io/liquid/).

[  ![Windows Server 2016 - Internet Information Services](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/windows-server.svg)   Curso Windows Server 2016 - Internet Information Services Conhecer o curso ](https://www.treinaweb.com.br/curso/windows-server-2016-internet-information-services)

## Liquid

Liquid é uma template engine open source criada pela empresa [Shopify](https://www.shopify.com/) para ser utilizado na criação de temas do seu CMS (sistema de gerenciamento de conteúdo). Possuindo uma sintaxe simples, ele facilita a definição de templates principalmente para quem não está habituado com programação.

Criada em 2006, com o tempo esta template engine passou a ser adotada por outras soluções, principalmente sistemas CMS, como o [Orchard Core](https://www.orchardcore.net/), que é um framework CMS para ASP.NET Core.

## Criando a aplicação que utilizará o Liquid

Diferente do Razor, o Liquid pode ser implementado até em um projeto console (para fazer isso com o Razor é necessário utilizar alguma [biblioteca de terceiro](https://www.treinaweb.com.br/blog/quatro-habilidades-para-se-tornar-um-desenvolvedor-web-back-end/)). Mas para este artigo, trabalharemos com um projeto web e veremos como substituir o Razor pelo Liquid.

Desta forma, inicialmente iremos criar uma aplicação web vazia:

```dos
dotnet new web -n SimpleWebLiquid

```

Em seguida, adicione no projeto a referência da biblioteca Fluid:

```dos
dotnet add package Fluid.MvcViewEngine

```

Por fim, habilite o Fluid no método `ConfigureServices` da classe `Startup`:

```csharp
public void ConfigureServices(IServiceCollection services) => services.AddMvc().AddFluid();

```

Como criamos uma aplicação web vazia, também é importante adicionar as rotas dos controllers no método `Configure` desta classe:

```csharp
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Pessoa}/{action=Index}/{id?}");
    });
}

```

Acima é definido como controller padrão `Pessoa`, pois o criaremos a seguir.

## Definindo o modelo e controller do exemplo

Para exemplificar o uso do Liquid, será definido no projeto um model `Pessoa`:

```csharp
public class Pessoa
{
    public int Id { get; set; }
    public string Nome { get; set; }
}

```

Um repositório simples para ele:

```csharp
public class PessoaRepository
{
    private static Dictionary pessoas = new Dictionary();

    public List GetAll(){
        return pessoas.Values.ToList();
    }

    public void Add(Pessoa pessoa){
        pessoa.Id = pessoas.Count + 1;
        pessoas.Add(pessoa.Id, pessoa);
    }
}

```

E por fim, o controller:

```csharp
public class PessoaController: Controller
{
    public readonly PessoaRepository repository;

    public PessoaController() => repository = new PessoaRepository();

    public IActionResult Index()
    {
        var pessoas = repository.GetAll();

        return View(pessoas);
    }

    public IActionResult Create() => View();

    [HttpPost]
    public IActionResult Create([FromForm] Pessoa pessoa)
    {
        repository.Add(pessoa);
        return RedirectToAction(nameof(Index));
    }
}

```

Note que este controller não diferente muito de um controller definido quando estamos trabalhando com o Razor. A diferença é em relação ao não uso do validador contra ataques XSRF/CSRF (mesmo sem o Razor, isso pode ser configurado na classe `Startup`, mas não faz parte do escopo deste artigo) e a definição da anotação `[FromForm]` no parâmetro da nossa action `Create`. Como não iremos trabalhar com modelos fortemente tipados nos templates, também não é possível validar os dados do modelo. Isso teria que ser feito “manualmente”.

## Criando os templates Liquid

Assim como ocorre com o uso do Razor, o controller também irá procurar pelos templates Liquid das actions dentro de uma pasta com seu nome em `Views`. Assim, no projeto, crie esta estrutura de pastas:

```reStructuredText
+-- Views
|   +-- Pessoa

```

A biblioteca Fluid segue algumas conversões do Razor. Caso haja um arquivo chamado **\_ViewStart** na pasta, ele será o primeiro arquivo carregado. Assim, dentro de `Views` crie um arquivo chamado **\_ViewStart.liquid** e adicione o conteúdo abaixo:

```django
{% layout '_Layout' %}

```

A tag `{% layout [template] %}` é utilizada para definir o template padrão utilizado nas views da pasta atual e todas as subpastas, funcionando como uma “master page”.

Acima, estamos indicando como template um arquivo chamado **\_Layout**, assim o crie dentro da pasta atual (não se esqueça da extensão **.liquid**) e adicione o conteúdo abaixo:

```html

        {{ ViewData['Title'] }}

                    Exemplo de Liquid

            {% renderbody %}

                © 2020 - Treinaweb

```

No código acima é importante frisar a tag `{% renderbody %}`. Ela indica o ponto onde o conteúdo das views será renderizado na template. Funcionando como o `@RenderBody()` do Razor.

Também note o trecho de exibição do título:

```html
{{ ViewData['Title'] }}

```

Nele estamos utilizando duas chaves. Estas chaves são utilizadas para indicar objetos que devem ser renderizados. Desta forma, quando este template for processado o conteúdo de `ViewData['Title']` será exibido no HTML gerado.

Com o nosso template definido, podemos criar dentro da pasta `Pessoa`, a view de listagem (**Index.liquid**):

```html

    Adicionar pessoa

                Id

                Nome

    {% for p in Model %}

                {{ p.Id }}

                {{ p.Nome }}

    {% endfor %}

```

E de cadastrado (**Create.liquid**):

```html