Htmx.Net

Htmx.Net

Este é um pacote projetado para adicionar métodos auxiliares do lado do servidor para HttpRequest e HttpResponse . Isso simplifica o trabalho com conceitos do lado do servidor htmx. Você também deve considerar ler sobre o Hyperscript, um projeto complementar opcional para HTML.

Se você é novo no HTMX, confira esta série sobre introdução ao HTMX para desenvolvedor ASP.NET Core, que também inclui um projeto de amostra e padrões que podem ser úteis.

Métodos de extensão Htmx

Começando

Instale o pacote Htmx NuGet em seu projeto ASP.NET Core.

 dotnet add package Htmx

HttpRequest

Usando HttpRequest , podemos determinar se a solicitação foi iniciada por Htmx no cliente.

httpContext . Request . IsHtmx ( )

Isso pode ser usado para retornar uma resposta de página completa ou uma renderização parcial da página.

 // in a Razor Page
return Request . IsHtmx ( )
    ? Partial ( " _Form " , this )
    : Page ( ) ;

Também podemos recuperar os outros valores de cabeçalho que o htmx pode definir.

Request . IsHtmx ( out var values ) ;

Leia mais sobre os outros valores de cabeçalho na página de documentação oficial.

Cache do navegador

Como observação especial, lembre-se de que se o seu servidor puder renderizar conteúdo diferente para o mesmo URL dependendo de outros cabeçalhos, você precisará usar o cabeçalho HTTP de resposta Vary. Por exemplo, se o seu servidor renderizar o HTML completo quando Request.IsHtmx() for falso, e renderizar um fragmento desse HTML quando Request.IsHtmx() for verdadeiro, você precisará adicionar Vary: HX-Request. Isso faz com que o cache seja codificado com base em uma combinação do URL de resposta e do cabeçalho da solicitação HX-Request – em vez de ser baseado apenas no URL de resposta.

 // in a Razor Page
if ( Request . IsHtmx ( ) )
{
  Response . Headers . Add ( " Vary " , " HX-Request " ) ;
  return Partial ( " _Form " , this )
}

return Page ( ) ;

Resposta HTTP

Podemos definir cabeçalhos de resposta Http usando o método de extensão Htmx , que passa uma ação e o objeto HtmxResponseHeaders .

Response . Htmx ( h => {
    h . PushUrl ( " /new-url " )
     . WithTrigger ( " cool " )
} ) ;

Leia mais sobre os cabeçalhos de resposta HTTP no site de documentação oficial.

Acionando eventos do lado do cliente

Você pode acionar eventos do lado do cliente com HTMX usando o cabeçalho HX-Trigger . Htmx.Net fornece um método auxiliar WithTrigger para configurar um ou mais eventos que você deseja acionar.

Response . Htmx ( h => {
    h . WithTrigger ( " yes " )
     . WithTrigger ( " cool " , timing : HtmxTriggerTiming . AfterSettle )
     . WithTrigger ( " neat " , new { valueForFrontEnd = 42 , status = " Done! " } , timing : HtmxTriggerTiming . AfterSwap ) ;
} ) ; 

Política CORS

Por padrão, todas as solicitações e respostas Htmx serão bloqueadas em um contexto de origem cruzada.

Se você configurar seu aplicativo em um contexto de origem cruzada, definir uma política CORS no ASP.NET Core também permitirá definir restrições específicas em cabeçalhos de solicitação e resposta, permitindo um controle refinado sobre os dados que podem ser trocados entre seu servidor web. aplicação e diferentes origens.

Esta biblioteca fornece uma abordagem simples para expor cabeçalhos Htmx à sua política CORS:

{ options.AddPolicy(name: MyAllowSpecificOrigins, policy => { policy.WithOrigins("http://example.com", "http://www.contoso.com") .WithHeaders(HtmxRequestHeaders.Keys.All) // Add htmx request headers .WithExposedHeaders(HtmxResponseHeaders.Keys.All) // Add htmx response headers }); });">

 var  MyAllowSpecificOrigins = " _myAllowSpecificOrigins " ;

var builder = WebApplication . CreateBuilder ( args ) ;

builder . Services . AddCors ( options =>
{
    options . AddPolicy ( name : MyAllowSpecificOrigins ,
                      policy  =>
                      {
                          policy . WithOrigins ( " http://example.com " , " http://www.contoso.com " )
                                   . WithHeaders ( HtmxRequestHeaders . Keys . All )  // Add htmx request headers
                                   . WithExposedHeaders ( HtmxResponseHeaders . Keys . All )  // Add htmx response headers
                      } ) ;
} ) ; 

Htmx.TagHelpers

Começando

Instale o pacote Htmx.TagHelpers NuGet em seu projeto ASP.NET Core. Destina-se a projetos .NET Core 3.1+.

 dotnet add package Htmx.TagHelpers

Disponibilize os Tag Helpers em seu projeto adicionando a seguinte linha ao seu _ViewImports.cshtml :

 @addTagHelper *, Htmx.TagHelpers

Geralmente, você precisará de caminhos de URL apontando para o back-end do ASP.NET Core. Felizmente, Htmx.TagHelpers imita a geração de URL incluída no ASP.NET Core. Isso torna a vinculação do HTMX ao seu aplicativo ASP.NET Core uma experiência perfeita.

Click Me (Razor Page w/ Handler)

Click Me (Controller)

Click Me (Named)

">

 < div hx-target =" this " >
    < button hx-get
            hx-page =" Index "
            hx-page-handler =" Snippet "
            hx-swap =" outerHtml " >
        Click Me (Razor Page w/ Handler)
     button >
 div >

< div hx-target =" this " >
    < button hx-get
            hx-controller =" Home "
            hx-action =" Index "
            hx-route-id =" 1 " >
        Click Me (Controller)
     button >
 div >

< div hx-target =" this " >
    < button hx-post
            hx-route =" named " >
        Click Me (Named)
     button >
 div >