如何在瀏覽器中運行 .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

半技術講座

如何工作？

創建演示

創建項目

常見問題

您的項目需求