Htmx.Net 다운로드 - Htmx.Net 소스 코드 다운로드

Htmx.Net

HTMX 로고

이것은 HttpRequest 및 HttpResponse 에 대한 서버 측 도우미 메서드를 추가하도록 설계된 패키지입니다. 이로 인해 htmx 서버 측 개념 작업이 더 간단해졌습니다. 또한 HTMX의 선택적 동반 프로젝트인 Hyperscript에 대해 읽어 보는 것도 고려해야 합니다.

HTMX를 처음 사용하는 경우 ASP.NET Core 개발자를 위한 HTMX 시작에 대한 이 시리즈를 확인하세요. 이 시리즈에는 도움이 될 수 있는 샘플 프로젝트와 패턴도 포함되어 있습니다.

Htmx 확장 방법

시작하기

ASP.NET Core 프로젝트에 Htmx NuGet 패키지를 설치합니다.

 dotnet add package Htmx

HTTP요청

HttpRequest 사용하면 요청이 클라이언트의 Htmx에 의해 시작되었는지 확인할 수 있습니다.

httpContext . Request . IsHtmx ( )

이는 전체 페이지 응답 또는 부분 페이지 렌더링을 반환하는 데 사용될 수 있습니다.

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

htmx가 설정할 수 있는 다른 헤더 값을 검색할 수도 있습니다.

Request . IsHtmx ( out var values ) ;

공식 문서 페이지에서 다른 헤더 값에 대해 자세히 알아보세요.

브라우저 캐싱

특별히 주의할 점은 서버가 일부 다른 헤더에 따라 동일한 URL에 대해 다른 콘텐츠를 렌더링할 수 있는 경우 Vary 응답 HTTP 헤더를 사용해야 한다는 점입니다. 예를 들어, Request.IsHtmx()가 false일 때 서버가 전체 HTML을 렌더링하고 Request.IsHtmx()가 true일 때 해당 HTML의 조각을 렌더링하는 경우 Vary: HX-Request를 추가해야 합니다. 이로 인해 캐시는 응답 URL만을 기반으로 하는 것이 아니라 응답 URL과 HX-Request 요청 헤더의 조합을 기반으로 키가 지정됩니다.

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

return Page ( ) ;

HttpResponse

작업과 HtmxResponseHeaders 개체를 전달하는 Htmx 확장 메서드를 사용하여 Http 응답 헤더를 설정할 수 있습니다.

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

공식 문서 사이트에서 HTTP 응답 헤더에 대해 자세히 알아보세요.

클라이언트측 이벤트 트리거

HX-Trigger 헤더를 사용하여 HTMX로 클라이언트 측 이벤트를 트리거할 수 있습니다. Htmx.Net은 트리거하려는 하나 이상의 이벤트를 구성하기 위한 WithTrigger 도우미 메서드를 제공합니다.

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

CORS 정책

기본적으로 모든 Htmx 요청 및 응답은 교차 출처 컨텍스트에서 차단됩니다.

원본 간 컨텍스트에서 애플리케이션을 구성하는 경우 ASP.NET Core에서 CORS 정책을 설정하면 요청 및 응답 헤더에 대한 특정 제한 사항을 정의하여 웹 간에 교환할 수 있는 데이터를 세밀하게 제어할 수 있습니다. 신청 및 다른 근원.

이 라이브러리는 Htmx 헤더를 CORS 정책에 노출하는 간단한 접근 방식을 제공합니다.

 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

시작하기

ASP.NET Core 프로젝트에 Htmx.TagHelpers NuGet 패키지를 설치합니다. .NET Core 3.1+ 프로젝트를 대상으로 합니다.

 dotnet add package Htmx.TagHelpers

_ViewImports.cshtml 에 다음 줄을 추가하여 프로젝트에서 태그 도우미를 사용할 수 있도록 만드세요.

 @addTagHelper *, Htmx.TagHelpers

일반적으로 ASP.NET Core 백엔드를 다시 가리키는 URL 경로가 필요합니다. 다행히 Htmx.TagHelpers ASP.NET Core에 포함된 URL 생성을 모방합니다. 이를 통해 HTMX를 ASP.NET Core 애플리케이션과 원활하게 연결할 수 있습니다.

 < 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 >

Htmx.Config

페이지 head 의 meta 요소에 적용할 수 있는 추가 htmx-config 태그 도우미가 포함되어 있어 HTMX 구성을 더 쉽게 만들 수 있습니다. 예를 들어 아래에서는 historyCacheSize , 기본 indicatorClass 및 ASP.NET Core의 위조 방지 토큰을 HTMX 구성의 추가 요소로 포함할지 여부를 설정할 수 있습니다.

 <!DOCTYPE html >
< html lang =" en " >
< head >
    < meta name =" htmx-config " 
          historyCacheSize =" 20 "
          indicatorClass =" htmx-indicator "
          includeAspNetAntiforgeryToken =" true "
          />
    <!-- additional elements... -->
</ head >

결과 HTML은 다음과 같습니다.

 <!DOCTYPE html >
< html lang =" en " >
< head >
    < meta name =" htmx-config " content =' {"indicatorClass":"htmx-indicator","historyCacheSize":20,"antiForgery":{"formFieldName":"__RequestVerificationToken","headerName":"RequestVerificationToken","requestToken":"<token>"}} ' />
    <!-- additional elements... -->
</ head >

HTMX 및 위조 방지 토큰

htmx-config 요소에 includeAspNetAntiforgerToken 속성을 설정할 수 있습니다. 그런 다음 웹 애플리케이션에 이 추가 JavaScript를 포함해야 합니다. 이미 추가된 이벤트 리스너를 추적하기 위해 __htmx_antiforgery 속성을 포함합니다. 이렇게 하면 실수로 이벤트 리스너를 다시 등록하는 일이 방지됩니다.

 if ( ! document . body . attributes . __htmx_antiforgery ) {
    document . addEventListener ( "htmx:configRequest" , evt => {
        let httpVerb = evt . detail . verb . toUpperCase ( ) ;
        if ( httpVerb === 'GET' ) return ;
        let antiForgery = htmx . config . antiForgery ;
        if ( antiForgery ) {
            // already specified on form, short circuit
            if ( evt . detail . parameters [ antiForgery . formFieldName ] )
                return ;

            if ( antiForgery . headerName ) {
                evt . detail . headers [ antiForgery . headerName ]
                    = antiForgery . requestToken ;
            } else {
                evt . detail . parameters [ antiForgery . formFieldName ]
                    = antiForgery . requestToken ;
            }
        }
    } ) ;
    document . addEventListener ( "htmx:afterOnLoad" , evt => {
        if ( evt . detail . boosted ) {
            const parser = new DOMParser ( ) ;
            const html = parser . parseFromString ( evt . detail . xhr . responseText , 'text/html' ) ;
            const selector = 'meta[name=htmx-config]' ;
            const config = html . querySelector ( selector ) ;
            if ( config ) {
                const current = document . querySelector ( selector ) ;
                // only change the anti-forgery token
                const key = 'antiForgery' ;
                htmx . config [ key ] = JSON . parse ( config . attributes [ 'content' ] . value ) [ key ] ;
                // update DOM, probably not necessary, but for sanity's sake
                current . replaceWith ( config ) ;
            }
        }
    } ) ;
    document . body . attributes . __htmx_antiforgery = true ;
}

두 가지 방법으로 스니펫에 액세스할 수 있습니다. 첫 번째는 뷰에서 HtmxSnippet 정적 클래스를 사용하는 것입니다.

 <script>
@Html.Raw(HtmxSnippets.AntiforgeryJavaScript)
</script>

더 간단한 방법은 IHtmlHelper 확장하는 HtmlExtensions 클래스를 사용하는 것입니다.

 @Html.HtmxAntiforgeryScript()

이 html 도우미는 이전에 언급한 JavaScript와 함께 <script> 태그를 생성합니다. 참고: htmx:configRequest 에 대해 여러 이벤트 핸들러를 등록할 수 있으므로 두 개 이상 있어도 괜찮습니다.

hx-[get|post|put] 속성이 <form ..> 태그에 있고 <form> 요소에 method="post" (또한 비어 있거나 누락된 action="" ) 속성이 있는 경우, ASP.NET 태그 도우미는 위조 방지 토큰을 input 요소로 추가하므로 위와 같이 요청을 추가로 구성할 필요가 없습니다. 양식을 가리키는 hx-include 사용할 수도 있지만 이는 모두 선호도의 문제입니다.

또한 권장되는 접근 방식은 HtmxAntiforgeryScriptEndpoint 를 사용하는 것입니다. 이를 통해 JavaScript 파일을 특정 엔드포인트에 매핑할 수 있으며 기본적으로 _htmx/antiforgery.js 가 됩니다.

app . UseAuthorization ( ) ;
// registered here
app . MapHtmxAntiforgeryScript ( ) ;
app . MapRazorPages ( ) ;
app . MapControllers ( ) ;

이제 캐싱, 인증 등으로 이 끝점을 구성할 수 있습니다. 더 중요한 것은 이제 defer 태그를 적용하여 head 태그에서 스크립트를 사용할 수 있다는 점입니다. 이는 body 요소 끝에 JavaScript를 두는 것보다 선호됩니다.

 < head >
    < meta charset =" utf-8 "/>
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 "/>
    < meta
        name =" htmx-config "
        historyCacheSize =" 20 "
        indicatorClass =" htmx-indicator "
        includeAspNetAntiforgeryToken =" true "/>
    < title > @ViewData["Title"] - Htmx.Sample </ title >
    < link rel =" stylesheet " href =" ~/lib/bootstrap/dist/css/bootstrap.min.css "/>
    < link rel =" stylesheet " href =" ~/css/site.css " asp-append-version =" true "/>
    < script src =" ~/lib/jquery/dist/jquery.min.js " defer > </ script >
    < script src =" ~/lib/bootstrap/dist/js/bootstrap.bundle.min.js " defer > </ script >
    < script src =" https://unpkg.com/htmx.org@@1.9.2 " defer > </ script >
    <!-- this uses the static value in a script tag -->
    < script src =" @HtmxAntiforgeryScriptEndpoints.Path " defer > </ script >
</ head >

특허

본 소프트웨어 및 관련 문서 파일(이하 "소프트웨어")의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.

소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이든 묵시적이든 어떠한 종류의 보증 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 작성자나 저작권 보유자는 계약, 불법 행위 또는 기타 행위로 인해 소프트웨어나 사용 또는 기타 거래와 관련하여 발생하는 모든 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. 소프트웨어.

확장하다