Htmx.Netダウンロード - Htmx.Netソースコードのダウンロード

Htmx.Net

HTMX ロゴ

これは、 HttpRequestおよびHttpResponseのサーバー側ヘルパーメソッドを追加するように設計されたパッケージです。これにより、htmx サーバー側の概念の操作が簡単になります。 HTMX のオプションのコンパニオンプロジェクトである Hyperscript についても読むことを検討してください。

HTMX を初めて使用する場合は、ASP.NET Core 開発者向けの HTMX の開始に関するこのシリーズを確認してください。このシリーズには、役に立つサンプルプロジェクトとパターンも含まれています。

Htmx 拡張メソッド

はじめる

Htmx NuGet パッケージを ASP.NET Core プロジェクトにインストールします。

 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 ( ) ;

HTTPレスポンス

Http Response ヘッダーは、アクションとHtmxResponseHeadersオブジェクトを渡すHtmx拡張メソッドを使用して設定できます。

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

HTTP 応答ヘッダーの詳細については、公式ドキュメントサイトを参照してください。

クライアント側イベントのトリガー

HX-Triggerヘッダーを使用して、HTMX でクライアント側イベントをトリガーできます。 Htmx.Net は、トリガーする 1 つ以上のイベントを構成するための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 ポリシーを設定すると、要求ヘッダーと応答ヘッダーに特定の制限を定義することもでき、Web 間で交換できるデータをきめ細かく制御できるようになります。アプリケーションと異なる起源。

このライブラリは、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

はじめる

Htmx.TagHelpers NuGet パッケージを ASP.NET Core プロジェクトにインストールします。 .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

追加のhtmx-configタグヘルパーが含まれており、ページのhead内のmeta要素に適用できるため、HTMX 構成の作成が簡単になります。たとえば、以下では、 historyCacheSize 、デフォルトのindicatorClass 、および HTMX 構成の追加要素として ASP.NET Core の偽造防止トークンを含めるかどうかを設定できます。

 <!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 を Web アプリケーションに含める必要があります。すでに追加されたイベントリスナーを追跡するために、属性__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 ;
}

スニペットには 2 つの方法でアクセスできます。 1 つ目は、ビューで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 >

ライセンス

本ソフトウェアおよび関連ドキュメントファイル (以下「ソフトウェア」) のコピーを入手した人には、使用、コピー、変更、マージの権利を含むがこれらに限定されない、制限なくソフトウェアを取り扱う許可が、ここに無償で与えられます。、以下の条件を条件として、本ソフトウェアのコピーを出版、配布、サブライセンス、および/または販売すること、および本ソフトウェアが提供される人物にそれを許可すること。

上記の著作権表示およびこの許可通知は、ソフトウェアのすべてのコピーまたは主要部分に含まれるものとします。

ソフトウェアは「現状のまま」提供され、明示的か黙示的かを問わず、商品性、特定目的への適合性、および非侵害の保証を含むがこれらに限定されない、いかなる種類の保証も行われません。いかなる場合においても、作者または著作権所有者は、契約行為、不法行為、またはその他の行為であるかどうかにかかわらず、ソフトウェアまたはソフトウェアの使用またはその他の取引に起因または関連して生じる、いかなる請求、損害、またはその他の責任に対しても責任を負わないものとします。ソフトウェア。

拡大する