Oxpecker.ViewEngine 0.12.0

.NET 8.0 此软件包针对 .NET 8.0。该软件包与此框架兼容或更高。 
dotnet add package Oxpecker.ViewEngine --version 0.12.0                

                    
                

            
NuGet\Install-Package Oxpecker.ViewEngine -Version 0.12.0
此命令旨在在 Visual Studio 的包管理器控制台中使用，因为它使用 NuGet 模块的 Install-Package 版本。
<PackageReference Include="Oxpecker.ViewEngine" Version="0.12.0" />
对于支持 包引用 的项目，将此 XML 节点复制到项目文件以引用软件包。
paket add Oxpecker.ViewEngine --version 0.12.0                

                    
                

            
#r "nuget: Oxpecker.ViewEngine, 0.12.0"
#r 指令可用于 F# Interactive 和多语言笔记本。将其复制到交互式工具或脚本的源代码中，以引用软件包。
// Install Oxpecker.ViewEngine as a Cake Addin
#addin nuget:?package=Oxpecker.ViewEngine&version=0.12.0

// Install Oxpecker.ViewEngine as a Cake Tool
#tool nuget:?package=Oxpecker.ViewEngine&version=0.12.0

Oxpecker.ViewEngine

Oxpecker.ViewEngine 是一个代码标记引擎，用于根据 F# 中的 计算表达式 功能渲染您的 HTML 视图。

Nuget 软件包 dotnet add package Oxpecker.ViewEngine

标记示例

open Oxpecker.ViewEngine

type Person = { Name: string }

let subView = p() { "Have a nice day" }

let mainView (model: Person) =
    html() {
        body(style="width: 800px; margin: 0 auto") {
            h1(style="text-align: center; color: red") {
                $"Hello, {model.Name}!"
            }
            subView
            ul() {
                for i in 1..10 do
                    br()
                    li().attr("onclick", $"alert('Test {i}')") {
                        span(id= $"span{i}", class'="test") { $"Test {i}" }
                    }
            }
        }
    }

文档

HtmlElement

HtmlElement 是 Oxpecker.ViewEngine 的主要接口。它扩展了两个附加接口 HtmlTag 和 HtmlContainer

    type HtmlElement =
        abstract member Render: StringBuilder -> unit
    type HtmlTag =
        inherit HtmlElement
        abstract member AddAttribute: HtmlAttribute -> unit
    type HtmlContainer =
        inherit HtmlElement
        abstract member AddChild: HtmlElement -> unit
    ...

有 5 种可用的 HTML 元素类型：RegularNode、VoidNode（仅属性）、FragmentNode（仅子元素）、RegularTextNode(转义文本)、RawTextNode(未转义文本)。

所有 HTML 标签都继承自 RegularNode 或 VoidNode，并且您可以轻松地创建自己的标签

type myTag() =
    inherit RegularNode("myTag") // will render <myTag></myTag>

HtmlElement 内部包含两个集合：属性和子元素。下面将详细介绍这些内容。

子元素

常规节点可以具有子元素，这些子元素将作为您在花括号内写入它们时添加到子元素集合中。空节点和文本节点没有子元素。您可以以编程方式访问任何 HtmlContainer 的 Chidren 属性。

let result = div() {
    br()
    span() { "Some text" }
}

let children = result.Children // br and span

属性

常规和空节点可以具有属性。一些通用属性在 HtmlElement 内部定义，而每个标签都可以有自己的特定属性。这将防止您将属性分配给不支持该属性的元素。您可以以编程方式访问任何 HtmlTag 的 Attributes 属性。

let result = div(class'="myClass") {
    br(id="1234") // href attribute won't work here
    a(href="/") { "Some link" }
}

let children = result.Attributes // class=myClass

您还可以使用.attr方法将任何自定义属性附加到HtmlElement

div().attr("my-secret-key", "lk23j4oij234"){
    "Secret div"
}

对于data-*属性，您可以使用专用的方法

div().data("secret-key", "lk23j4oij234"){
    "Secret div"
} // renders <div data-secret-key="lk23j4oij234">Secret div</div>

事件处理程序

Oxpecker.ViewEngine不提供类似于onclick的javascript事件处理器属性。这是故意的，因为它会鼓励人们使用它们，而这其实是一种反模式。然而，如果您确实需要它，您始终可以使用.on方法达到相同的目的。

ViewEngine将为您创建具有内联处理器的html属性

div().on("click", "alert('Hello')"){
    "Clickable div"
}
// <div onclick="alert('Hello')">Clickable div</div>

HTML转义

Oxpecker.ViewEngine将为您提供文本节点和属性值的转义。然而，在某些情况下，您可能希望渲染未转义的HTML字符串，在这种情况下，提供了raw函数。

div(){
    "<script></script>" // This will be escaped
    raw "<script></script>" // This will NOT be escaped
}

渲染

有多个函数可以渲染HtmlElement（在打开Oxpecker.ViewEngine命名空间之后）

  • Render.toString会将内容渲染为标准的.NET UTF16字符串
  • Render.toBytes会将内容渲染为UTF8编码的字节序列
  • Render.toStreamAsync会异步将内容渲染到UTF8编码的流中
  • Render.toTextWriterAsync会异步将内容渲染到提供的文本写入器
  • Render.toHtmlDocBytes与Render.toBytes相同，但在HTML文档前会添加"<!DOCTYPE html>"
  • Render.toHtmlDocString与Render.toString相同，但在HTML文档前会添加"<!DOCTYPE html>"
  • Render.toHtmlDocStreamAsync与Render.toStreamAsync相同，但在HTML文档前会添加"<!DOCTYPE html>"
  • Render.toHtmlDocTextWriterAsync与Render.toTextWriterAsync相同，但在HTML文档前会添加"<!DOCTYPE html>"

Aria

要启用对ARIA属性的支持，您需要打开Aria模块

open Oxpecker.ViewEngine.Aria

let x = span(
    role="checkbox",
    id="checkBoxInput",
    ariaChecked="false",
    tabindex=0,
    ariaLabelledBy="chk15-label"
)

片段

有时您需要将多个元素组合在一起，而不将它们包裹在div或类似标签中。为此，您可以使用__特殊标签

let onlyChildren = __() {
    span() { "one" }
    span() { "two" }
}

let parent = div() {
    onlyChildren
} // renders <div><span>one</span><span>two</span></div>
产品 兼容和额外的计算目标框架版本。
.NET net8.0是兼容的。 net8.0-android已计算。 net8.0-browser已计算。 net8.0-ios已计算。 net8.0-maccatalyst已计算。 net8.0-macos已计算。 net8.0-tvos已计算。 net8.0-windows已计算。
兼容目标框架
包含的目标框架（在包中）
了解更多关于目标框架和.NET Standard的信息。

NuGet软件包 (2)

显示依赖于Oxpecker.ViewEngine的前两个NuGet软件包

软件包 下载
Oxpecker

基于ASP.NET Core的F# Web框架
Oxpecker.Htmx

为Oxpecker.ViewEngine提供HTMX支持

GitHub仓库

此软件包在没有任何流行的GitHub仓库中使用。

版本 下载 最后更新
0.12.0 70 8/13/2024
0.11.0 53 8/5/2024
0.10.2 95 7/24/2024
0.10.1 76 7/23/2024
0.10.0 219 7/17/2024
0.9.0 93 7/16/2024
0.8.0 91 6/18/2024
0.7.2 795 5/8/2024
0.7.1 102 4/29/2024
0.7.0 476 3/5/2024
0.6.0 115 3/3/2024
0.5.0 199 2/29/2024
0.4.0 131 2/21/2024
0.3.0 98 2/15/2024
0.2.0 245 1/24/2024
0.1.0 119 1/19/2024

将HtmlElement更改为接口