Htmx 1.8.0
dotnet add package Htmx --version 1.8.0
NuGet\Install-Package Htmx -Version 1.8.0
<PackageReference Include="Htmx" Version="1.8.0" />
paket add Htmx --version 1.8.0
#r "nuget: Htmx, 1.8.0"
// Install Htmx as a Cake Addin #addin nuget:?package=Htmx&version=1.8.0 // Install Htmx as a Cake Tool #tool nuget:?package=Htmx&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()为 fals 时，您的服务器渲染完整的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应用程序与不同来源之间交换的数据的细粒度控制。
此库提供了一种简单的方法来将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文件中添加以下行，使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以及是否将ASP.NET Core的防伪造令牌作为HTMX配置上的附加元素。
<!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属性。然后您需要在您的Web应用程序中包含此附加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助手将导致一个<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元素的末尾放入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
- System.Text.Json (>= 6.0.5)
NuGet 包 (1)
显示依赖 Htmx 的前 1 个 NuGet 包
| 包 | 下载 |
|---|---|
|
IPWhitelist
包描述 |
GitHub 仓库 (1)
显示依赖 Htmx 的最受欢迎的 1 个 GitHub 仓库
| 仓库 | 星星 |
|---|---|
|
westonwalker/BlazorMinimalAPI
|
| 版本 | 下载 | 最后更新 |
|---|---|---|
| 1.8.0 | 15,728 | 4/22/2024 |
| 1.7.0 | 21,564 | 2/9/2024 |
| 1.6.3 | 11,590 | 1/3/2024 |
| 1.6.2 | 540 | 1/2/2024 |
| 1.6.1 | 14,486 | 10/23/2023 |
| 1.6.0 | 1,326 | 10/16/2023 |
| 1.5.0 | 2,702 | 10/4/2023 |
| 1.4.0 | 5,393 | 9/27/2023 |
| 1.3.1 | 11,031 | 8/16/2023 |
| 1.3.0 | 6,260 | 8/11/2023 |
| 1.2.0 | 3,750 | 7/24/2023 |
| 1.1.3 | 12,911 | 5/31/2023 |
| 1.1.1 | 162 | 5/31/2023 |
| 1.1.0 | 179 | 5/31/2023 |
| 1.0.1 | 29,596 | 11/3/2022 |
| 1.0.0 | 7,202 | 8/4/2022 |
| 0.0.19 | 1,132 | 7/22/2022 |
| 0.0.18 | 2,452 | 6/16/2022 |
| 0.0.16 | 819 | 6/14/2022 |
| 0.0.15 | 4,694 | 1/26/2022 |
| 0.0.14 | 411 | 1/26/2022 |
| 0.0.13 | 407 | 1/26/2022 |
| 0.0.12 | 2,751 | 10/5/2021 |
| 0.0.11 | 518 | 9/29/2021 |
| 0.0.10 | 290 | 9/15/2021 |
| 0.0.9 | 293 | 9/15/2021 |
| 0.0.8 | 316 | 9/9/2021 |
| 0.0.7 | 269 | 9/3/2021 |
| 0.0.6 | 296 | 8/31/2021 |
| 0.0.5 | 263 | 8/30/2021 |
| 0.0.4 | 287 | 8/12/2021 |
| 0.0.3 | 374 | 8/6/2021 |
| 0.0.1 | 347 | 7/30/2021 |
| 0.0.0-alpha.0 | 128 | 9/29/2021 |