core razor是什么_什么是Blazor和什么是Razor Components？

core razor是什么

I've blogged a little about Blazor, showing examples like Compiling C# to WASM with Mono and Blazor then Debugging .NET Source with Remote Debugging in Chrome DevTools as well as very early on asking questions like .NET and WebAssembly - Is this the future of the front-end?

我已经写了一些有关Blazor的博客，展示了示例，例如，使用Mono和Blazor将C＃编译为WASM，然后在Chrome DevTools中使用远程调试对.NET源进行调试，以及非常早就提出诸如.NET和WebAssembly的问题-这是未来的趋势吗？前端？

Let's back up and level-set.

让我们备份并设置级别。

NOTE: This is a great site for learning Blazor! Check out 注意：这是学习Blazor的好网站！ 退房 Blazor University! Blazor University！

什么是Blazor？ (What is Blazor?)

Blazor is a single-page app framework for building interactive client-side Web apps with .NET. Blazor uses open web standards without plugins or code transpilation. Blazor works in all modern web browsers, including mobile browsers.

Blazor是一个单页应用程序框架，用于使用.NET构建交互式客户端Web应用程序。 Blazor使用开放式Web标准，而无需插件或代码转译。 Blazor可在所有现代Web浏览器(包括移动浏览器)中使用。

You write C# in case of JavaScript, and you can use most of the .NET ecosystem of open source libraries. For the most part, if it's .NET Standard, it'll run in the browser. (Of course if you called a Windows API or a Linux specific API and it didn't exist in the client-side browser S world, it's not gonna work, but you get the idea).

如果使用JavaScript，则可以编写C＃，并且可以使用大多数.NET生态系统的开源库。 在大多数情况下，如果它是.NET Standard，它将在浏览器中运行。 (当然，如果您调用了Windows API或Linux特定的API，并且在客户端浏览器S世界中不存在，那么它将无法正常工作，但是您可以理解)。

The .NET code runs inside the context of WebAssembly. You're running "a .NET" inside your browser on the client-side with no plugins, no Silverlight, Java, Flash, just open web standards.

.NET代码在WebAssembly的上下文中运行。 您正在客户端的浏览器中运行“ .NET”，没有插件，没有Silverlight，Java，Flash，只是开放的Web标准。

WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed.

WebAssembly是一种紧凑的字节码格式，已针对快速下载和最大执行速度进行了优化。

Here's a great diagram from the Blazor docs.

这是Blazor文档中的一个很棒的图表。

Here's where it could get a little confusing. Blazor is the client-side hosting model for Razor Components. I can write Razor Components. I can host them on the server or host them on the client with Blazor.

在这里可能会造成一些混乱。 Blazor是Razor组件的客户端托管模型。 我可以编写Razor组件。 我可以使用Blazor将它们托管在服务器上或将其托管在客户端上。

You may have written Razor in the past in .cshtml files, or more recently in .razor files. You can create and share components using Razor - which is a mix of standard C# and standard HTML, and you can host these Razor Components on either the client or the server.

您过去可能已经在.cshtml文件中编写了Razor，或者最近在.razor文件中编写了Razor。 您可以使用Razor创建和共享组件，Razor是标准C＃和标准HTML的混合，您可以在客户端或服务器上托管这些Razor组件。

In this diagram from the docs you can see that the Razor Components are running on the Server and SignalR (over Web Sockets, etc) is remoting them and updating the DOM on the client. This doesn't require Web Assembly on the client, the .NET code runs in the .NET Core CLR (Common Language Runtime) and has full compatibility - you can do anything you'd like as you are not longer limited by the browser's sandbox.

在文档的此图中，您可以看到Razor组件正在服务器上运行，而SignalR(通过Web套接字等)正在对其进行远程处理并在客户端上更新DOM。 这不需要客户端上的Web组件，.NET代码在.NET Core CLR(通用语言运行时)中运行，并且具有完全的兼容性-您可以做任何您想做的事，因为您不再受浏览器沙箱的限制。

Per the docs:

根据文档：

Razor Components decouples component rendering logic from how UI updates are applied. ASP.NET Core Razor Components in .NET Core 3.0 adds support for hosting Razor Components on the server in an ASP.NET Core app. UI updates are handled over a SignalR connection.

Razor组件使组件渲染逻辑与UI更新的应用方式脱钩。 .NET Core 3.0中的ASP.NET Core Razor组件增加了对在ASP.NET Core应用程序中的服务器上托管Razor组件的支持。 UI更新通过SignalR连接进行处理。

Here's the canonical "click a button update some HTML" example.

这是规范的“单击按钮以更新一些HTML”示例。

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

You can see this running entirely in the browser, with the C# .NET code running on the client side. .NET DLLs (assemblies) are downloaded and executed by the CLR that's been compiled into WASM and running entirely in the context of the browser.

您可以看到它完全在浏览器中运行，而C＃.NET代码在客户端运行。 .NET DLL(程序集)是由CLR下载并执行的，而CLR已编译为WASM，并且完全在浏览器的上下文中运行。

Note also that I'm stopped at a BREAKPOINT in C# code, except the code is running in the browser and mapped back into JS/WASM world.

还要注意，我在C＃代码中的BREAKPOINT处停止了，除了代码在浏览器中运行并映射回JS / WASM世界之外。

But if I host my app on the server as hosted Razor Components, the C# code runs entirely on the Server-side and the client-side DOM is updated over a SignalR link. Here I've clicked the button on the client side and hit the breakpoint on the server-side in Visual Studio. No there's no POST and no POST-back. This isn't WebForms - It's Razor Components. It's a SPA app written in C#, not JavaScript, and I can change the locations of the running logic, while the UI remains always standard HTML and CSS.

但是，如果我将我的应用程序作为托管的Razor组件托管在服务器上，则C＃代码将完全在服务器端运行，并且客户端DOM将通过SignalR链接进行更新。 在这里，我单击了客户端上的按钮，并在Visual Studio中达到了服务器端的断点。 不，没有POST，也没有POST回传。 这不是WebForms，而是Razor组件。 这是一个用C＃而不是JavaScript编写的SPA应用程序，我可以更改运行逻辑的位置，而UI始终是标准HTML和CSS。

Looking at how Razor Components and now Phoenix LiveView are offering a new way to manage JavaScript-free stateful server-rendered apps has me realizing it’s the best parts of WebForms where the postback is now a persistent websockets tunnel to the backend and only diffs are sent

— Scott Hanselman (@shanselman)

看看Razor Components和现在的Phoenix LiveView如何提供一种新方法来管理无JavaScript的有状态服务器渲染的应用程序，我意识到这是WebForms的最佳部分，其中回发现在是持久化Websockets隧道到后端，并且仅发送差异

-Scott Hanselman(@shanselman) March 16, 2019 2019年3月16日

It's a pretty exciting time on the open web. There's a lot of great work happening in this space and I'm very interesting to see how frameworks like Razor Components/Blazor and Phoenix LiveView change (or don't) how we write apps for the web.

在开放的网络上，这是一段令人兴奋的时刻。 在这个领域中发生了很多伟大的工作，我很有趣地看到Razor Components / Blazor和Phoenix LiveView之类的框架如何改变(或不改变)我们为网络编写应用程序的方式。

翻译自: https://www.hanselman.com/blog/what-is-blazor-and-what-is-razor-components

core razor是什么