如何在浏览器中运行 .NET

述：本文将讨论如何用最简单的术语在网站上运行 C# 代码。半技术讲座我使用了 wasm-tools-net7，这是一个基于 wasm-tools 的工作负载，没有包含任何额外的包。我的重点是简单性和主要主题。彻底了解该主题可提供完成所有其他任务所需的信息。如何工作？WebAssembly 工作原理：序列图创建演示创建项目我用的是net7，但这取决于你。Dotnet new console -o WASM_Demo cd WASM_Demo Dotnet workload install wasm-tools-net7此时，需要对 csproj 文件进行修改。Project Sdk=Mi

本文将讨论如何用最简单的术语在网站上运行 C# 代码。

半技术讲座

我使用了 wasm-tools-net7，这是一个基于 wasm-tools 的工作负载，没有包含任何额外的包。我的重点是简单性和主要主题。彻底了解该主题可提供完成所有其他任务所需的信息。

如何工作？

WebAssembly 工作原理：序列图

创建演示

创建项目

我用的是net7，但这取决于你。

Dotnet new console -o WASM_Demo  
  
cd WASM_Demo  
  
Dotnet workload install wasm-tools-net7

此时，需要对 csproj 文件进行修改。

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <OutputType>Exe</OutputType>
        <TargetFramework>net7.0</TargetFramework>
        <ImplicitUsings>enable</ImplicitUsings>
        <Nullable>enable</Nullable>

        <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
        <WasmMainJSPath>main.js</WasmMainJSPath>
        <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
    </PropertyGroup>

    <ItemGroup>
        <WasmExtraFilesToDeploy Include="index.html" />
        <WasmExtraFilesToDeploy Include="main.js" />
    </ItemGroup>

</Project>

我们添加了什么：

RuntimeIdentifier （wasm-tools 需要）
WasmMainJSPath （wasm-tools 需要）
AllowUnsafeBlocks（JSExportAttribute 需要不安全的代码）
ItemGroup （Include as resource）导入 index.html导入main.js

返回到program.cs文件，需要考虑某些规则。

类必须是公共的和部分的。
函数必须是公共的和静态的，并且必须使用 [JSExport] 进行属性化。

让我们举个例子。

using System.Runtime.InteropServices.JavaScript;

namespace WASM_Demo;

public partial class Program
{
    static void Main(string[] args) { }

    [JSExport]
    public static string Response()
    {
        return """
               <h1>
                   Hello World
               </h1>
               """;
    }
}

没关系，但是我们如何在浏览器中运行此代码？

运行这个程序的代码是dotnet.js的，它自带了wasm-tools，所以没有必要担心它。要使用此dotnet.js，我们只需使用一个名为 main.js 的文件。

import { dotnet } from './dotnet.js'

const is_browser = typeof window != "undefined";
if (!is_browser) throw new Error(`Expected to be running in a browser`);

const { setModuleImports, getAssemblyExports, getConfig, runMainAndExit } = await dotnet
    .withDiagnosticTracing(false)
    .withApplicationArgumentsFromQuery()
    .create();

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);

const html = 
    exports
        .WASM_Demo    // Namespace
        .Program      // Class Name
        .Response();  // Function Name

// Regular javascript code
document.getElementById("app").innerHTML = `${html}`;

await runMainAndExit(config.mainAssemblyName, [] /* Console App Args */);

index.html页面的模板已经准备完毕。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>WASM Demo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="modulepreload" href="./dotnet.js" />
    </head>
    
    <body>
        <main id="app"></main>
        <script type="module" src="./main.js"></script>
    </body>
</html>

现在，让我们再看一遍这个过程，

HTTP 请求传入
WASM-Tools 处理此问题并发送index.html文件。
index.html文件请求dotnet.js和main.js文件，dotnet.js由 WASM-Tools 发送，main.js是我们的自定义代码。
通过在 main.js 中使用 dotnet.js，我们可以进入 C# 代码中的 Program 类，调用 Response 函数并在 main.js 中进行我们想要的任何客户端更改。

我们还有一件事要做，你需要打开一个名为 runtimeconfig.template.json 的文件，并将以下 JSON 数据放入其中。

{
  "wasmHostProperties": {
    "perHostConfig": [
      {
        "name": "browser",
        "html-path": "index.html",
        "Host": "browser"
      }
    ]
  }
}

我们已经到了尽头，程序现在可以运行了。唯一需要的命令是：

Dotnet run -c Release

常见问题

我可以托管所有文件而不是 wasm-tools 吗？又是如何做到的呢？
当然，但它可能会变得有点复杂，你用 wasm-tools 制作的项目不能用于任何其他目的，即控制台应用程序不起作用，wasm-tools 可以工作。因为我们选择 browser-wasm 作为 RuntimeIdentifier，并且多个 RuntimeIdentifiers 在 .NET 中不可用。作为替代方法，您可以打开两个项目，将第一个项目设置为 WASM 项目，然后在第二个项目中将其设置为控制台应用程序，然后生成第一个项目并托管输出文件夹，所有 DLL 和文件都将在那里。

这个演示只是索引文件，我可以做多页吗？又是如何做到的呢？
当然，但这比你想象的要难得多，因为这样做的方法是一种叫做SPA（单页应用程序）的方法，用户总是在同一页面上，只是内容发生了变化。有多种方法可以做到这一点。所以它可以用你的创造力来完成。

我可以像计数器一样做动态代码吗？又是如何做到的呢？
_是的，我也这样做了，你可以一遍又一遍地调用 C# 函数，如果你只是将导出绑定到 window 对象，你可以从每个 JavaScript 代码中调用它。

4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。

内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：

<div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

链接方式

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比较链接方式和导入方式

链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。

link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

小结：我们应尽量使用 <link> 标签导入外部 CSS 文件，避免或者少用使用其他三种方式。

程序员HTML5培训教程-css的引入方式和选择器

01.引入css方式（重点掌握）

行内样式

内接样式

外接样式

3.1 链接式

3.1 导入式

css介绍

现在的互联网前端分三层：

HTML：超文本标记语言。从语义的角度描述页面结构。

CSS：层叠样式表。从审美的角度负责页面样式。

JS：JavaScript 。从交互的角度描述页面行为

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

css的最新版本是css3，我们目前学习的是css2.1

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷：

不能够适应多种设备

要求浏览器必须智能化足够庞大

数据和显示没有分开

功能不够强大

CSS 优点：

使数据和显示分开

降低网络流量

使整个网站视觉效果一致

使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

行内样式

1 <div>
2 <p style="color: green">我是一个段落</p>
3 </div>

内接样式

复制代码

<style type="text/css">
/*写我们的css代码*/
 
span{
color: yellow;
}
</style>

复制代码

外接样式-链接式

<link rel="stylesheet" href="./index.css">
外接样式-导入式
<style type="text/css">
@import url('./index.css');
</style>

02.css的选择器：

1.基本选择器 2.高级选择器

基本选择器包含：

1.标签选择器

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 “共性” 而不是 ”特性“

复制代码

body{

color:gray;

font-size: 12px;

}

/标签选择器/

color: red;

font-size: 20px;

}

span{

color: yellow;

}

复制代码

2.id选择器

选中id

同一个页面中id不能重复。

任何的标签都可以设置id

id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

复制代码

1 #box{
2 background:green;
3 }
4 
5 #s1{
6 color: red;
7 }
8 
9 #s2{
10 font-size: 30px;
11 }

复制代码

3.类选择器

所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

类的使用，能够决定前端工程师的css水平到底有多牛逼？

玩类了，一定要有”公共类“的概念。

复制代码

.lv{
 color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}

复制代码

<!-- 公共类 共有的属性 -->
 <div>
 <p class="lv big">段落1</p>
 <p class="lv line">段落2</p>
 <p class="line big">段落3</p>
 </div>

复制代码

总结：

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式

每个类要尽可能的小，有公共的概念，能够让更多的标签使用

未完待续欢迎继续关注好程序员前端教程分享!

在线咨询

上一篇：如何编写HTML提交按钮代码？
下一篇：推荐8款非常好用的HTML5开发工具

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何在浏览器中运行 .NET

半技术讲座

如何工作？

创建演示

创建项目

常见问题

您的项目需求