Htmx.Net下載 - Htmx.Net源碼下載

Htmx.Net

HTMX標誌

這是一個旨在為HttpRequest和HttpResponse新增伺服器端幫助器方法的套件。這使得使用 htmx 伺服器端概念變得更加簡單。您還應該考慮閱讀 Hyperscript，這是 HTMX 的一個可選配套專案。

如果您是 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 和 HX-Request 請求標頭的組合進行鍵控，而不是僅基於回應 URL。

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

return Page ( ) ;

Http響應

我們可以使用Htmx擴充方法設定 Http Response 標頭，該方法傳遞一個操作和HtmxResponseHeaders物件。

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 策略還允許您定義對請求和回應標頭的特定限制，從而對可在 Web 之間交換的資料進行細粒度控制應用和不同的起源。

該庫提供了一種向 CORS 策略公開 Htmx 標頭的簡單方法：

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

還包含一個額外的htmx-config標記幫助程序，可以將其應用於頁面head的meta元素，從而使建立 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 包含在您的 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 ;
}

您可以透過兩種方式存取該程式碼片段。第一種是在視圖中使用HtmxSnippet靜態類別。

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

一個更簡單的方法是使用擴展IHtmlHelper的HtmlExtensions類別。

 @Html.HtmxAntiforgeryScript()

此 html 幫助程式將產生一個<script>標籤以及前面提到的 JavaScript。注意：您仍然可以為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此端點。

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

執照

特此免費授予任何獲得本軟體及相關文件文件（「軟體」）副本的人不受限制地使用本軟體，包括但不限於使用、複製、修改、合併的權利、發布、散佈、再授權和/或銷售軟體的副本，並允許向其提供軟體的人員這樣做，但須滿足以下條件：

本軟體以「現況」提供，不提供任何明示或暗示的保證，包括但不限於適銷性、特定用途的適用性和不侵權的保證。 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE軟體.

展開