Htmx.TagHelpers 1.8.0
dotnet add package Htmx.TagHelpers --version 1.8.0
NuGet\Install-Package Htmx.TagHelpers -Version 1.8.0
<PackageReference Include="Htmx.TagHelpers" Version="1.8.0" />
paket add Htmx.TagHelpers --version 1.8.0
#r "nuget: Htmx.TagHelpers, 1.8.0"
// Install Htmx.TagHelpers as a Cake Addin #addin nuget:?package=Htmx.TagHelpers&version=1.8.0 // Install Htmx.TagHelpers as a Cake Tool #tool nuget:?package=Htmx.TagHelpers&version=1.8.0
Htmx.Net
这是一个设计用于为 HttpRequest 和 HttpResponse 添加服务器端辅助方法的软件包。这使得使用 htmx 服务器端概念更加简单。您还应该考虑阅读有关 Hyperscript 的内容，这是一个可选的 HTMX 伴侣项目。
如果您是 HTMX 的初学者，可以查看关于 实现 ASP.NET Core 开发者的 HTMX 入门 的这一系列文章，其中还包括一个示例项目和您可能认为有帮助的模型。
Htmx 扩展方法
入门指南
将 Htmx NuGet 软件包 安装到您的 ASP.NET Core 项目中。
dotnet add package Htmx
HttpRequest
使用 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();
HttpResponse
我们可以使用Htmx扩展方法设置HTTP响应头，该方法传递一个操作和HtmxResponseHeaders对象。
Response.Htmx(h => {
h.PushUrl("/new-url")
.WithTrigger("cool")
});
更多关于HTTP响应头的信息，请参阅官方文档网站。
触发客户端事件
您可以使用HTMX的HX-Trigger头触发客户端事件。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中添加以下行来使Tag Helper在项目中可用：
@addTagHelper *, Htmx.TagHelpers
通常需要将URL路径指向您的ASP.NET Core后端。幸运的是，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"
/>
</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>"}}' />
</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助手将生成一个带有前面提到的JavaScript的<script>标签。注意：您可以为htmx:configRequest注册多个事件处理器，因此多于一个是可以接受的。
注意，如果hx-[get|post|put]属性在<form ..>标签上，并且该<form>元素拥有method="post"（并且还有一个空的或缺失的action=""）属性，则ASP.NET Tag Helper将在这里添加防伪造令牌作为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>
<script src="@HtmxAntiforgeryScriptEndpoints.Path" defer></script>
</head>
许可证
版权所有 © 2022 Khalid Abuhakmeh
特此授予任何获得本软件及关联文档副本（以下简称“软件”）的人士免费使用软件的权利，包括但不限于使用的权利、复制权、修改权、合并权、发布权、分发权、再许可权以及/或销售副本的权利，并允许获得软件的人士在本许可证规定的条件下使用该软件。
上述版权声明和本许可声明应包括在软件的任何副本或主要部分中。
软件按“原样”提供，不提供任何形式的明示或暗示保证，包括但不限于适用性、特定目的的适用性和非侵权性保证。在任何情况下，作者或版权持有人不对任何索赔、损害或其他责任负责，无论这些责任是因合同、侵权或其他原因而引起的，也不论这些责任是否与软件有关、包括使用或其他使用方式。
| 产品 | 版本 兼容及额外的目标框架版本。 |
|---|---|
| .NET | net6.0 兼容。 net6.0-android 已计算。 net6.0-ios 已计算。 net6.0-maccatalyst 已计算。 net6.0-macos 已计算。 net6.0-tvos 已计算。 net6.0-windows 已计算。 net7.0 已计算。 net7.0-android 已计算。 net7.0-ios 已计算。 net7.0-maccatalyst 已计算。 net7.0-macos 已计算。 net7.0-tvos 已计算。 net7.0-windows 已计算。 net8.0 已计算。 net8.0-android 已计算。 net8.0-browser 已计算。 net8.0-ios 已计算。 net8.0-maccatalyst 已计算。 net8.0-macos 已计算。 net8.0-tvos 已计算。 net8.0-windows 已计算。 |
-
net6.0
- 无依赖。
NuGet 包 (1)
显示对 Htmx.TagHelpers 有依赖的前1个 NuGet 包
| 包 | 下载 |
|---|---|
|
IPWhitelist
包描述 |
GitHub 仓库
该包未用于任何流行的 GitHub 仓库。
| 版本 | 下载 | 最后更新 |
|---|---|---|
| 1.8.0 | 13,600 | 4/22/2024 |
| 1.7.0 | 21,987 | 2/9/2024 |
| 1.6.3 | 6,800 | 1/3/2024 |
| 1.6.2 | 491 | 1/2/2024 |
| 1.6.1 | 12,231 | 10/23/2023 |
| 1.6.0 | 1,260 | 10/16/2023 |
| 1.5.0 | 5,400 | 10/4/2023 |
| 1.4.0 | 533 | 9/27/2023 |
| 1.3.1 | 10,215 | 8/16/2023 |
| 1.3.0 | 5,553 | 8/11/2023 |
| 1.2.0 | 3,573 | 7/24/2023 |
| 1.1.3 | 13,213 | 5/31/2023 |
| 1.1.1 | 132 | 5/31/2023 |
| 1.1.0 | 124 | 5/31/2023 |
| 1.0.1 | 17,370 | 11/3/2022 |
| 1.0.0 | 4,743 | 8/4/2022 |
| 0.0.19 | 1,087 | 7/22/2022 |
| 0.0.18 | 2,367 | 6/16/2022 |
| 0.0.16 | 826 | 6/14/2022 |
| 0.0.15 | 4,291 | 1/26/2022 |
| 0.0.14 | 396 | 1/26/2022 |
| 0.0.13 | 408 | 1/26/2022 |
| 0.0.12 | 3,047 | 10/5/2021 |
| 0.0.11 | 521 | 9/29/2021 |
| 0.0.10 | 300 | 9/15/2021 |
| 0.0.9 | 306 | 9/15/2021 |
| 0.0.8 | 337 | 9/9/2021 |
| 0.0.7 | 287 | 9/3/2021 |
| 0.0.6 | 288 | 8/31/2021 |
| 0.0.5 | 282 | 8/30/2021 |
| 0.0.4 | 322 | 8/12/2021 |
| 0.0.3 | 422 | 8/6/2021 |
| 0.0.0-alpha.0 | 137 | 9/29/2021 |