You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

5.1 KiB

Raw Blame History Unescape Escape

使用PocketView，操作Html

PocketView是一个API，用于使用C#代码，用HTML的术语简明地编写HTML。就像HTML方法一样，它返回一个实现IHtmlCent的对象，因此输出将被假定为有效的HTML并呈现到您的笔记本中。这里有一个例子：

using Microsoft.DotNet.Interactive.Formatting;
using static Microsoft.DotNet.Interactive.Formatting.PocketViewTags;

PocketView pocketView = PocketViewTags.span(img[src:"https://www.baidu.com/img/flexible/logo/pc/result.png",style:"height:1em"],HTML("&nbsp;"), a[href:@"https://www.baidu.com"](i("百度")));
pocketView.Display();

//display(pocketView);

解析上面的代码：

调用span方法：传递三个参数，img方法结果、HTML方法结果、a方法结果；
img方法是通过一个索引器调用的，该索引器传递了几个命名参数，src和style;
HTML方法有一个字符串参数   即空格的 html 转义字符；
a方法有另一个索引器参数（href）和一个参数，在本例中是对i方法的调用；

实质：以C#对象的方式，组装了一段 html代码片断通过将PocketView转换为字符串，您可以看到它产生的实际HTML，该字符串将以纯文本而不是HTML显示

//display(pocketView.ToDisplayString());
display(pocketView.ToString());

由于HTML难以使用静态类型语言进行简洁表示，PocketView采用了动态类型。这使得你可以使用任意索引器名称来指定HTML属性。PocketViewTags上的每个方法都返回一个动态的PocketView。让我们更详细地了解你可以用PocketView实现的功能。

注意：在本节的代码示例中，通过在笔记本中运行using static Microsoft.DotNet.Interactive.Formatting.PocketViewTags，你可以直接调用PocketView方法，而无需类名限定。

如上所述，你可以使用方括号限定符来指定HTML属性,小括号填充HTML元素内容:

//span html片断
PocketView spanElement = span[style:"font-style:italic"]("你好，我带了倾斜样式");
spanElement.Display();

//图片 html片断
PocketView imgElement = img[src:"https://www.baidu.com/img/flexible/logo/pc/result.png",style:"height:1em", title:"百度图片"];
imgElement.Display();

//超级连接 html片断
PocketView linkElement = a[href:@"https://www.baidu.com"](i("百度连接"));
linkElement.Display();

如果你将一个字符串传递给PocketView，它会为你进行HTML编码：

//sapn本身作为html标签，被当作Html显示；但span里的html样式的内容不被当作html渲染，而是编码后直接显示
PocketView view = span("<div>对我 进行编码</div>");
//原样显示html片断自身，不作为html元素进行渲染
display(view);

//显示被html编码过的原始字符串
display(view.ToString());

这就是HTML方法派上用场的地方。如果你想将一个字符串传递给PocketView，但又不希望它被HTML编码，你可以简单地将该字符串用HTML方法包裹起来：

//HTML方法后，就作为 html片断进行 "渲染" 了
PocketView view2 = span(HTML("<div>Don't encode me!</div>"));
display(view2);
display(view2.ToString());

HTML简单地将一个字符串捕获到一个实现IHtmlContent接口的实例中。该接口用于指示该值不应被HTML编码，而是应被视为有效的HTML并直接呈现。

了解了这一点，可能不会感到惊讶的是，PocketView本身也实现了IHtmlContent接口。

你还可以将其他类型的对象传递给PocketView。当你这样做时，它们会使用纯文本格式化器进行格式化，该格式化器默认会扩展对象的属性。

PocketView view3 = b(
    new {Fruit="apple", Texture="smooth"}
);

display(view3)

由于目前.NET Interactive的格式化API不支持为嵌套的HTML片段生成格式化器，PocketView会回退到text/plain格式化器来描述传递对象的属性。

你也可以将对象列表传递给PocketView。这对于从数据生成HTML非常有用：

var fruits = new []{"apple","banana","cherry"};
var colors = new []{"green","#F1C40F","red"};


ul(
    fruits.Zip(colors).Select(x => li[style:$"color:{x.Item2}"](x.Item1))
)

总结：其实这样的方式 "组装"html页面或片断，会非常繁琐；只适合临时做一些简单的html组装；方案：

使用 html 内核: 但有个最大问题是"html内核不能使用共享数据"；只适合纯静态页面；
使用 javascript 内核: 虽然能使用 "共享数据"功能，但js内核长处是操作现有html并非生成html;
使用 razor 或 blazor 库，像razor或blazor页面或组件一样，就非常方便了;非常推荐的终极解决方案 唯一缺点是智能提示差，可以在VS里写好，粘贴过来哈；使用 Razor的例子:体验下方不方便（后面专题讲解）

#r "nuget:RazorInteractive"

#!razor
@{
    
    var dic = new Dictionary<string, string>()
    {
        {"apple","green"},
        {"banana","#F1C40F"},
        {"cherry","red"},
    };
}

<ul>
    @foreach(var item in dic)
    {
        <li style='color:@item.Value'>@item.Key</li>;
    }
</ul>

5.1 KiB Raw Blame History Unescape Escape

使用PocketView，操作Html

5.1 KiB

Raw Blame History Unescape Escape