.NET Core 3.0 Preview 3已經推出,它包含了一系列關於ASP.NET Core的新的更新。
下面是該預覽版的更新列表:
- Razor組件改進:
- 單項目模板
- 新的Razer擴展
- Endpoint路由集成
- 預呈現
- Razor類庫中的Razor組件
- 改進事件處理
- Forms & validation
- 運行時編譯
- Worker服務模板
- gRPC模板
- Angular模板已更新為Angular 7
- SPA認證
- SignalR與Endpoint路由集成
- SignalR Java客戶端支持長輪詢
其他詳細信息和已知問題,請參閱發行說明。
開始
要在.NET Core 3.0 Preview 3中開始使用ASP.NET Core,請安裝.NET Core 3.0 Preview 3 SDK
如果您使用的是Visual Studio,則還需要安裝Visual Studio 2019的最新預覽版【譯者注:目前VS2019正式版已經發布,直接安裝正式版即可】。
- 注意:要在Visual Studio 2019中使用.NET Core 3.0預覽版,需要啟用選項以使用.NET Core SDK預覽版,方法是通過【工具>選項>項目和解決方案> .NET Core>使用.NET Core SDK預覽版】
升級現有項目
將現有的ASP.NET Core應用程序升級到.NET Core 3.0 Preview 3,請按照ASP.NET Core文檔中的遷移步驟進行操作。
另請參閱ASP.NET Core 3.0 中的重大更改的完整列表。
Razor組件改進
在前面的預覽中,我們介紹了Razor組件,這是一種用ASP.NET核心構建交互式客戶端Web UI的新方法。本節將會介紹我們在該預覽更新中對Razor組件所做的各種改進。
單項目模板
Razor組件項目模板現在是單個項目,而不是同一解決方案中的兩個項目。所編寫的Razor組件位於托管它們的ASP.NET Core應用程序中。同一個ASP.NET Core項目可以包含Razor組件、頁面和視圖。Razor組件模板與其他ASP.NET Core Web應用程序模板一樣,默認情況下也啟用了HTTPS。
新的Razer擴展
Razor組件使用Razor語法編寫,但編譯方式與Razor頁面和視圖不同。為了明確哪些Razor文件應該編譯為Razor組件,我們引入了一個新的文件擴展名:.razor。在Razor組件模板中,所有組件文件現在都使用.razor擴展名。Razor頁面和視圖仍然使用.cshtml擴展名。
只要使用_RazorComponentInclude MSBuild屬性將這些文件標識為Razor組件文件,Razor組件仍然可以使用.cshtml文件擴展名來創建。例如,該版本中的Razor組件模板指定Components文件夾下的所有.cshtml文件為Razor組件。
1: <_RazorComponentInclude>Components\**\*.cshtml</_RazorComponentInclude>
請注意,這個版本中的.razor文件有很多限制。有關已知問題和可用解決方案的列表,請參考發布說明。
Endpoint路由集成
Razor組件現在已經集成到了ASP.NET Core中新的Endpoint路由系統。要在應用程序中啟用Razor組件支持,需要在路由配置中使用MapComponentHub<TComponent>。
1: app.UseRouting(routes =>
2: {
3: routes.MapRazorPages();
4: routes.MapComponentHub<App>("app");
這會將應用程序配置以接受交互式Razor組件的傳入連接,並指定根組件App應該在匹配選擇器App的DOM元素中呈現。
預呈現
默認情況下,Razor組件項目模板執行服務端預渲染。也就是說當用戶瀏覽您的應用程序時,服務器將對您的Razor組件執行初始化渲染,並將結果作為純靜態HTML傳遞給瀏覽器。然后,瀏覽器將通過SignalR重新連接到服務器,並將Razor組件切換為完全交互的模式。這兩個階段的交付是有益的,因為:
- 它提高了站點的感知能力,因為用戶界面可以更快地出現,而無需等待進行任何WebSocket連接,甚至運行任何客戶端腳本。這對連接速度較慢的用戶有着更大的影響,如2G/3G手機。
- 它可以讓搜索引擎很容易的搜索到你的應用程序。
對於使用更快連接的用戶(如內網用戶),此功能的影響較小,因為無論如何用戶界面都應該立即出現。
設置預渲染,Razor組件項目模板不會有靜態HTML文件。取而代之的是單個Razor頁面/Pages/Index.cshtml,使用Html.RenderComponentAsync<TComponent>() HTML幫助器預呈現應用程序內容。該頁面還引用components.server.js腳本,在預呈現和下載內容后設置SignalR 連接。由於這是一個Razor頁面,像環境標簽助手這樣的功能就可以工作了。
Index.cshtml
1: @page "{*clientPath}"
2: <!DOCTYPE html>
3: <html>
4: <head>
5: ...
6: </head>
7: <body>
8: <app>@(await Html.RenderComponentAsync<App>())</app>
9:
10: <script src="_framework/components.server.js"></script>
11: </body>
12: </html>
除了應用程序加載速度更快之外,還可以在瀏覽器開發工具中查看下載的HTML源代碼,從而可以看到預渲染正在進行。Razor組件在HTML中是完全呈現的。
Razor類庫中的Razor組件
現在可以將Razor組件添加到Razor類庫中,並使用Razor組件從ASP.NET核心項目引用它們。
在Razer類庫中創建可重用的Razer組件:
1、創建Razer組件應用程序
1: dotnet new razorcomponents -o RazorComponentsApp1
2、創建Razer類庫
1: dotnet new razorclasslib -o RazorClassLib1
3、添加Component1.razor文件到Razer類庫
Component1.razor
1: <h1>Component1</h1>
2:
3: <p>@message</p>
4:
5: @functions {
6: string message = "Hello from a Razor Class Library"!;
7: }
1、使用Razor組件從ASP.NET Core應用程序引用Razor類庫
1: dotnet add RazorComponentsApp1 reference RazorClassLib1
在Razor組件應用程序中,使用@addTagHelper指令從Razor類庫導入所有組件,然后在應用程序中使用component1
Index.razor
1: @page "/"
2: @addTagHelper *, RazorClassLib1
3:
4: <h1>Hello, world!</h1>
5:
6: Welcome to your new app.
7:
8: <Component1 />
注意:在此版本中,Razer類庫與Blazor應用程序並不兼容。另外,Razor類庫還不支持靜態資源。如果要在庫中創建可與Blazor和Razor組件應用程序共享的組件,仍然需要使用Blazor類庫。這寫問題會在未來的更新中解決。
改進事件處理
新的eventcallback和eventcallback<>類型使得定義組件回調更加簡單。例如,考慮以下兩個組件:
MyButton.razor
1: <button onclick="@OnClick">Click here and see what happens!</button>
2:
3: @functions {
4: [Parameter] EventCallback<UIMouseEventArgs> OnClick { get; set; }
5: }
1: <div>@text</div>
2:
3: <MyButton OnClick="ShowMessage" />
4:
5: @function {
6: string text;
7:
8: void ShowMessage(UIMouseEventArgs e)
9: {
10: text = "Hello, world!";
11: }
12: }
onclick回調的類型是EventCallback<UIMouseEventArgs>(取代Action<UIMouseEventArgs>),MyButton直接傳遞給onclick事件處理程序。編譯器處理將委托轉換為EventCallback的過程,並將執行其他一些操作,以確保呈現過程具有足夠的信息來呈現正確的目標組件。因此,不需要在ShowMessage事件處理程序中顯式調用StateHasChanged。編譯器處理將委托轉換為EventCallback的過程,並將執行其他一些操作,以確保渲染過程具有足夠的信息來渲染正確的目標組件。因此,不需要在ShowMessage事件處理程序中顯式調用StateHasChanged。
通過使用EventCallback<>類型的OnClick處理程序可以是異步的,而不需要對MyButton進行任何其他代碼的修改。
UsesMyButton.razor
1: <div>@text</div>
2:
3: <MyButton OnClick="ShowMessageAsync" />
4:
5: @function {
6: string text;
7:
8: async Task ShowMessageAsync(UIMouseEventArgs e)
9: {
10: await Task.Yield();
11: text = "Hello, world!";
12: }
13: }
我們建議在為事件處理和綁定定義組件參數時使用EventCallback and EventCallback<T>。盡可能使用EventCallback<>,因為它是強類型的並且可以向組件的用戶提供更好的反饋。當沒有傳遞給回調函數的值時,也使用EventCallback。
Forms&validation
此預覽版本添加了用於處理表單和驗證的內置組件和基礎結構。
使用. net進行客戶端web開發的一個好處是能夠在客戶端和服務器之間共享相同的實現邏輯。驗證邏輯是一個很好的邏輯。Razor組件中的新的Forms&validation支持包括使用數據注解處理驗證的支持,或者可以插入你喜歡的驗證系統。
例如,以下Person類型使用數據注解定義驗證邏輯:
1: public class Person
2: {
3: [Required(ErrorMessage = "Enter a name")]
4: [StringLength(10, ErrorMessage = "That name is too long")]
5: public string Name { get; set; }
6:
7: [Range(0, 200, ErrorMessage = "Nobody is that old")]
8: public int AgeInYears { get; set; }
9:
10: [Required]
11: [Range(typeof(bool), "true", "true", ErrorMessage = "Must accept terms")]
12: public bool AcceptsTerms { get; set; }
13: }
以下是如何基於Person
模型鎖創建的驗證表單:
1: <EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
2: <DataAnnotationsValidator />
3: <ValidationSummary />
4:
5: <p class="name">
6: Name: <InputText bind-Value="@person.Name" />
7: </p>
8: <p class="age">
9: Age (years): <InputNumber bind-Value="@person.AgeInYears" />
10: </p>
11: <p class="accepts-terms">
12: Accepts terms: <InputCheckbox bind-Value="@person.AcceptsTerms" />
13: </p>
14:
15: <button type="submit">Submit</button>
16: </EditForm>
17:
18: @functions {
19: Person person = new Person();
20:
21: void HandleValidSubmit()
22: {
23: Console.WriteLine("OnValidSubmit");
24: }
25: }
如果將此表單添加到應用程序中,並運行它,你將獲得一個基本表單,該表單在字段更改和表單提交時自動進行字段輸入值的驗證。
這里發生了很多事情,讓我們把它一個一個地分解:
- 這個表單是使用新的EditForm組件定義的。EditForm將EditContext設置為一個級聯相關的值,該值用於跟蹤關於編輯過程的元數據(例如,已修改的內容、當前驗證消息等)。EditForm還為有效和無效提交(OnValidSubmit、OnInvalidSubmit)提供了合適的事件。如果想自己觸發驗證,也可以直接使用OnSubmit。
- DataAnnotationsValidator組件使用數據注解,以驗證支持附加到級聯的EditContext。 使用數據注釋啟用驗證支持需要顯式調用,但我們正在考慮將其作為默認行為,但隨后你可以覆蓋它。
- 每個表單字段都是使用一組內置的輸入組件(InputText, InputNumber, InputCheckbox, InputSelect等)定義的。這些組件提供默認行為,用於在編輯時驗證並更改它們的CSS類以反映字段狀態。其中一些具有有用的分析邏輯(例如,InputDate和InputNumber將不可解析的值注冊為驗證錯誤,這樣可以優雅地處理它們)。相關字段還支持目標字段的可空性(例如,int?)。
- ValidationMessage組件顯示特定字段的驗證消息。
- ValidationSummary組件匯總所有驗證消息(類似於驗證摘要標記助手)。
內置的輸入組件存在一些限制,我們希望在將來的更新中改進這些限制。例如,目前不能在生成輸入標記上指定任意屬性。將來,我們計划啟用組件的所有額外屬性。現在,您需要構建自己的組件子類來處理這些情況。
運行時驗證
對運行時編譯的支持已從.NET Core 3.0中的ASP.NET核心共享框架中刪除,但現在可以通過向應用程序添加包的方式來啟用它。
啟用運行時編譯:
添加Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation
1: <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.0.0-preview3-19153-02" />
在Startup.ConfigureServices添加對AddRazorRuntimeCompilation的調用
1: services.AddMvc().AddRazorRuntimeCompilation();
Worker服務模板
在preview3中,我們引入了一個名為“Worker Service”的新模板。此模板被設計為運行長時間運行的后台進程的起點,就像您可能作為Windows服務或Linux守護進程運行一樣。例如,從消息隊列生成/消費消息,或者監視要處理的文件。它旨在支持ASP.NET Core的生產力功能,如日志記錄,DI,配置等,而不承載任何Web依賴項。
在接下來的幾天里,我們將發布一些博客文章,提供更多關於使用Worker模板入門的練習。我們將有一些專門官微Windows/SystemD服務發布、在ACI/AKS上運行以及作為WebJob運行的文章。
提醒
雖然其目的是使工作模板默認情況下不依賴於web技術,但在preview3中它仍然使用web SDK,並在您選擇“ASP.NET Core WebApplication”之后顯示出來。
Angular模板更新到了Angular 7
Angular模板更新到了Angular 7。在 .NET Core 3.0 發布穩定版本之前,我們預計會更新到Angular 8。
SPA身份認證
這個版本,在Angular和React模板中引入了對身份驗證的支持。在本節中,我們將展示如何創建一個新的Angular或React模板,該模板允許我們對用戶進行身份驗證並訪問受保護的API資源。
我們對用戶身份驗證和授權的支持是由IdentityServer在后台提供的,我們構建了一些擴展來簡化我們特定場景的配置體驗。
注意:在本文中,我們展示了對Angular的身份驗證支持,但在React模板中提供了相同的功能。
創建新的Angular應用程序
要創建一一個新的支持身份驗證的Angular應用程序,我們需要調用以下命令:
1: dotnet new angular -au Individual
這個命令創建一個新的ASP.NET Core應用程序和托管的客戶端Angular應用程序。ASP.NET Core應用程序包括已配置的Identity Server實例,可是讓Angular應用程序很方面的對用戶進行身份驗證,並針對ASP.NET Core應用程序中的受保護資源發送HTTP請求。
Angular模塊所構建的身份驗證和授權支持,可以導入到您的應用程序中,並提供一套組件和服務來增強主應用程序模塊的功能。
運行該應用程序
要運行應用程序,只需執行以下命令,然后用瀏覽器打開控制台上顯示的URL:
1: dotnet run
1: Hosting environment: Development
2: Content root path: C:\angularapp
3: Now listening on: https://localhost:5001
4: Now listening on: http://localhost:5000
5: Application started. Press Ctrl+C to shut down.
運行結果如下:
當我們打開應用程序時,我們會看到常用的Home、Counter和Fetch數據菜單選項以及兩個新選項:Register和Login。如果單擊Register,我們將被發送到默認的認證界面(在運行遷移和更新數據庫之后),在那里我們可以注冊為新用戶。
注冊為新用戶后,我們將被重定向回應用程序,在那里我們可以看到我們成功地通過了身份驗證。
調用經過身份驗證的API
如果我們點擊獲取數據,我們可以看到天氣預報數據列表
保護現有的API
要保護服務器上的API,只需要在要保護的控制器或操作上使用[Authorize]屬性。
1: [Authorize]
2: [Route("api/[controller]")]
3: public class SampleDataController : Controller
4: {
5: ...
6: }
客戶端路徑認證
為了在Angular應用程序訪問頁面時,要求對用戶進行身份驗證,我們將[AuthorizeGuard]應用到正在配置的路由上。
1: import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
2: import { AuthorizeGuard } from 'src/api-authorization/authorize.guard';
3: import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
4:
5: @NgModule({
6: declarations: [
7: AppComponent,
8: NavMenuComponent,
9: HomeComponent,
10: CounterComponent,
11: FetchDataComponent
12: ],
13: imports: [
14: BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
15: HttpClientModule,
16: FormsModule,
17: ApiAuthorizationModule,
18: RouterModule.forRoot([
19: { path: '', component: HomeComponent, pathMatch: 'full' },
20: { path: 'counter', component: CounterComponent },
21: { path: 'fetch-data', component: FetchDataComponent, canActivate: [AuthorizeGuard] },
22: ])
23: ],
24: providers: [
25: { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
26: ],
27: bootstrap: [AppComponent]
28: })
29: export class AppModule { }
帶有SignalR Hubs的Endpoint路由
在preview3中,我們將SignalR hubs連接到最近發布的新端點路由特性中。SignalR hub連線之前已經明確完成:
1: app.UseSignalR(routes =>
2: {
3: routes.MapHub<ChatHub>("hubs/chat");
4: });
這意味着開發人員需要在啟動期間將控制器、Razor頁面和hubs連接到不同的位置,從而產生一系列幾乎相同的路由片段:
1: app.UseSignalR(routes =>
2: {
3: routes.MapHub<ChatHub>("hubs/chat");
4: });
5:
6: app.UseRouting(routes =>
7: {
8: routes.MapRazorPages();
9: });
現在,SignalR hub也可以通過endpoint路由進行路由分發,因此您可以在ASP.NET Core中一站式地路由幾乎所有內容。
1: app.UseRouting(routes =>
2: {
3: routes.MapRazorPages();
4: routes.MapHub<ChatHub>("hubs/chat");
5: });
Java SignalR客戶端的長輪詢
我們向Java客戶端添加了長輪詢支持,這使它能夠在不支持WebSockets的環境中建立連接。這也使您能夠在客戶端應用程序中專門選擇長輪詢傳輸。
gRPC 模板
這個預覽版引入了一個用ASP.NET Core構建的gRPC服務的新模板。NET Core使用一個新的gRPC框架,我們正在與谷歌合作構建。
gRPC是一個流行的RPC(遠程過程調用)框架,它為API開發提供了一種固定的契約優先方法。它使用HTTP/2進行傳輸,協議緩沖區作為接口描述語言,並提供諸如身份驗證、雙向流和流控制、取消和超時等功能。
這些模板創建了兩個項目:一個是托管於ASP. NET Core中的gRPC服務,以及一個用於測試它的控制台應用程序。
這是第一個為ASP.NET Core公開發布的gRPC預覽,並沒有實現gRPC的所有功能,但是我們正在努力使ASP.NET Core提供所提供得最佳的gRPC體驗成為可能。請嘗試一下,並在GitHub上的grpc/grpc-dotnet上給我們反饋。
未來將會有更詳細地討論ASP.NET Core使用gRPC的博客文章,請繼續關注。
反饋
我們希望您喜歡這個預覽版的ASP.NET Core中的新功能!請通過在Github上提交問題讓我們知道你的想法。
原文地址:https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-0-preview-3/