.NET Core 又一殺器! Web Blazor框架橫空出世!

来源:https://www.cnblogs.com/ZaraNet/archive/2019/11/07/11812701.html

多年來,Javascript(及其子框架)已在瀏覽器中運行DOM(文檔對象模型),並且掌握了腳本知識才能真正操作客戶端UI。大約2年前,所有這些都隨著Web Assembly的引入而發生了變化-Web Assembly允許在客戶端解釋已編譯的語言(相對Web Assembly更多瞭解請閱讀瞭解was ...


  

  多年來,Javascript(及其子框架)已在瀏覽器中運行DOM(文檔對象模型),並且掌握了腳本知識才能真正操作客戶端UI。大約2年前,所有這些都隨著Web Assembly的引入而發生了變化-Web Assembly允許在客戶端解釋已編譯的語言(相對Web Assembly更多瞭解請閱讀瞭解wasm的前世今身),並且現在所有瀏覽器都完全支持它。微軟對此的回答是Blazor的創立。允許C#開發人員在.NET(包括UI)中構建其整個堆棧是一個令人興奮的主張。一段時間以來,Blazor一直處於預覽狀態,但現在已包含在2019年9月23日的一般發行版以及.NET Core 3.0版的下一版中,當然想要品味Blazor的味道,再怎麼說也要用.VisualStudio 2019 且安裝.NET Core 3.0 + SDK。微軟已經就如何執行此操作編寫了一套給力的說明,並且該文檔已在Microsoft Docs中呈現。您可以選擇退出我的博客選擇微軟官方,但與其對比,我的還算....其GitHub地址為: https://github.com/AdrienTorris/awesome-blazor 

  創建Blazor項目可以通過dotnetCli命令來創建項目, dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview1.19508.20 ,我們文章中就直接通過Visual Studio來創建,如下圖所示我們選擇。

創建項目成功,我們來分析一下Blazor中的項目初始文件都是些什麼?都有啥用?

  • 依賴項,屬性和wwwroot文件夾與標準ASP.NET Core應用程式文件夾相同。  
  • 該網頁文件夾包含包括這個應用程式,就像網頁MVC應用程式一樣。
  • 該共用文件夾包含適用於整個應用程式的佈局頁。
  • 該_ViewImports.cshtml文件用於導入命名空間為其它* .cshtml文件。  
  • 在Program.cs的文件用於創建ASP.NET核心托管環境。
  • 該Startup.cs文件 不多解釋。
  • 在_Imports.razor中我們直接全局引入庫

 如果運行示例應用程式,則會得到一個如下所示的頁面:

隨後你會在暢游在官方示例中,無盡遐想,這麼給力的框架!我改如何去駕馭它,使用它?好的,我們現在就開始!激動的時刻!

現在我們需要一個razor組件,註意現在是叫做組件,不是通常使用的*.cshtml了,將我已編寫好的代碼來繼續我的演講,複製下麵的代碼。

<h3>Todo</h3>
@page "/todo"
@inject TodoItemService todoitemservice
<table class="table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var todoitem in todos)
        {
            <tr>
                <td>@todoitem.IsDone</td>
                <td>@todoitem.Title</td>
            </tr>
        }
    </tbody>
</table>
<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo,id=Guid.NewGuid().ToString()  });
            newTodo = string.Empty;
        }
    }
}
@functions{
    protected override async Task OnInitializedAsync()
    {
        todos = await todoitemservice.GetTodoItems();
    }
}

 讓我們看看上面發生了什麼?我們從上到下一個一個來說。 @using BlazorDemo.Data; 是我的組件需要使用的實體,如果你仔細閱讀上文,您會知道在 _Imports.razor 中如果引用了該實體,那麼所有組件將無需多言。所以我在其中添加了該實體。

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.JSInterop
@using BlazorDemo
@using BlazorDemo.Shared
@using BlazorDemo.Data;

 @page 是一個指令,它告訴ASP.NET這是一個Razor頁面並設置預設路由。在我們的例子中,路線是相對路線“ / todo”。此參數接受相對和絕對路徑;後者類似於“〜/ Path / To / Page”。您可以@page為多個路由使用多個指令。隨後您可以在 NavMenu.razor 中添加該頁面的導航。

<li class="nav-item px-3">
            <NavLink class="nav-link" href="todo">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Todo
            </NavLink>
        </li>

 該@inject指令告訴Blazor使用依賴註入將一個類註入此頁面。在本例中,我們正在註入 TodoItemService ,以便我們可以從之前創建的樣本數據中讀取。其該服務的定義如下,它簡單的離譜。

public class TodoItemService
    {
        public Task<List<TodoItem>> GetTodoItems()
        {
            List<TodoItem> list = new List<TodoItem>();
            list.Add(new TodoItem() { 
                IsDone = false, Title = "zaranet",id = Guid.NewGuid().ToString()
            });
            return Task.FromResult(list);
        }
    }

由於現在有了讀取和查看數據的方法,因此我們需要定義一種可以載入樣本數據的方法。為此,我們需要 @functions 指令。

@functions{
    protected override async Task OnInitializedAsync()
    {
        todos = await todoitemservice.GetTodoItems();
    }
}

真正的魔術就是 OnInitializedAsync 方法。將頁面載入到瀏覽器時將觸發此方法。在我們的實現中,它所做的就是獲取JSON示例數據並將其轉換為我們新定義的ToDoItem類。現在我們可以運行該應用程式,並查看我們的頁面!看起來像這樣:

 難以置信!我們有一個工作頁面!現在,我們可以擴展此頁面,以便我們可以刪除,這裡就不再提出更新,後期我在詳細說明我在Blazor中使用的UI。現在我們在表格中添加一列按鈕 用於觸發刪除的事件,看看我們該如何編寫?

<table class="table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Description</th>
            <th>Work</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var todoitem in todos)
        {
        <tr>
            <td>@todoitem.IsDone</td>
            <td>@todoitem.Title</td>
            <td><button @onclick="(() => RemoveTodo(todoitem.id))"><i class="oi oi-trash"></i></button></td>
        </tr>
        }
    </tbody>
</table>

 請註意onclick綁定到HTML按鈕事件。此事件綁定到C#方法 RemoveTodo() ,如下所示:

@functions{
    private void RemoveTodo(string id)
    {
        todos.Remove(todos.First(x => x.id == id));
    }
}

我們重新試著啟動程式~看看會發生什麼?是報錯?是編譯不成功?都有可能會發生?

 Blazor是一個客戶端Web框架,使我們能夠在客戶端單頁應用程式中使用C#。它的外觀與Razor Pages應用程式非常相似。這個示例項目使我們能夠從外部數據源獲取ToDo列表項,添加新項,刪除項。所有這些功能都發生在客戶端。

 此時,我無法控制內心的喜悅 .NET Core這樣優秀的框架再配上宇宙第一的Visual Studio簡直是傳說中的人中呂布馬中赤兔!

該示例代碼在 https://github.com/zaranetCore/dotNetCoreBlazor中.

 


您的分享是我們最大的動力!

更多相關文章
  • 包裝 1.二次加工標準類型(包裝) class List(list): def append(self, a_objcet): if type(a_objcet) is str: super().append(a_objcet) else: print('請傳入字元轉類型') l1 = List(' ...
  • 我們都知道 HTTP 是一種協議,允許 WEB 伺服器和瀏覽器通過互聯網進行發送和接受數據。想對 HTTP 進行詳細的瞭解,可以找下其他文章,這篇文章不多做介紹。我們在網上能看到的界面,圖片,動畫,音頻,視頻 等,都有依賴這個協議的。在做 WEB 系統的時候,都使用過 IIS、Apache、Ngin ...
  • 1. 內置函數 什麼是內置函數? 就是python給你提供的,拿來直接⽤的函數,比如print,input等等,截⽌到python版本3.6.2 python⼀共提供了68個內置函數。他們就是python直接提供給我們的,有 ⼀些我們已經⽤過了,有⼀些還沒有⽤過,還有⼀些需要學完了⾯向對象才能繼續學 ...
  • 面向對象語言中,介面用於定義對象的行為。介面只指定對象應該做什麼,實現這種行為的方法(實現細節)是由對象來決定。 ...
  • 今天,我的任務是,在 Laravel 應用程式用戶個人資料頁面上,用戶名旁邊添加一個綠點,表示他們是否線上。我首先想到的是,我們將需要啟動一個 node.js 伺服器並跟蹤每個用戶的活動套接字連接。然後用當前登錄的用戶套接字,我們可以實時更新線上狀態!唯一的問題是,這是我們目前的要求,有點超過頂部, ...
  • 參考以下博文,我這裡只是筆記一下,原文會更加詳細 c#基礎系列1 深入理解值類型和引用類型 堆棧和托管堆c# 值類型和引用類型 紅色表示——“這啥?”(真實1個問題引出3個問題) CLR支持的兩種類型 引用類型: 引用類型從托管堆上分配,new操作符會返回對象的指針——指向對象數據的記憶體位置的一個引 ...
  • 以前寫過ASP.NET Core 2.x的REST API文章,今年再更新一下到3.0版本。 先決條件 我在B站有一個非常入門的ASP.NET Core 3.0的視頻教程,如果您對ASP.NET Core不瞭解,就可以先看一下裡面的基礎知識和API相關的內容,地址是:https://www.bili ...
  • 如何在IIS中設置功能變數名稱: 1,想好我們想要配置的本地功能變數名稱,我們以www.baidu.com為例。 2,打開系統盤,一般預設的系統盤為C盤,打開:C:\Windows\System32\drivers\etc這路徑,找到文件“hosts”文件。 3,打開文件hosts文件,在最下方回車加入:電腦ip地 ...
一周排行
  • .NET 走向開源,MIT許可協議。 微軟為了推動.NET開源社區的發展,2014年聯合社區成立了.NET基金會。 一年前 .NET 基金會完成第一次全面改選,2014年 .NET基金會的創始成員中有六位創始人,均非微軟公司員工,隨著微軟的收購動作,Miguel 也成了微軟員工,Migel一直在努力 ...
  • 在這篇文章中,我將帶領大家詳細學習ASP.NET Core 中的Main方法。在這篇文章中,我將向大家詳細介紹下麵幾個問題:ASP.NET Core Main方法的重要性為什麼我們在ASP.NET Core中會有一個Main方法?當你運行一個ASP.NET Core應用程式的時候,背後發生了什麼?為... ...
  • IViewLocationExpander API ExpandViewLocations Razor視圖路徑,視圖引擎會搜索該路徑. PopulateValues 每次調用都會填充路由 項目目錄如下所示 創建區域擴展器,其實我並不需要多區域,我目前只需要達到一個區域中有多個文件夾進行存放我的視圖. ...
  • EF Core 數據變更自動審計設計 Intro 有的時候我們需要知道每個數據表的變更記錄以便做一些數據審計,數據恢復以及數據同步等之類的事情, EF 自帶了對象追蹤,使得我們可以很方便的做一些審計工作,每次變更發生了什麼變化都變得很清晰,於是就基於 EF 封裝了一層數據變更自動審計 使用效果 測試 ...
  • 在上一篇文章abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之六(四十二)中我們實現了新增入庫單的功能。結合之前的五篇文章,今天我們來測試一下入庫單新增功能。 ...
  • 這篇文章,我們一起學習ASP.NET Core InProcess Hosting.這篇文章主要討論下麵幾個觀點:CreateDefaultBuilder方法執行什麼任務?什麼是ASP.NET Core InProcess Hosting?怎麼使用InProcess hosting Model來托管... ...
  • 關於 Blazor Server Side 的開篇 , Blazor與 C/S , B/S 有什麼不一樣 , Blazor有什麼優缺點? ...
  • VS2019+MVC+EF6 CodeFirst 連接MySQL 1、準備環境(通過NuGet獲取) EntityFramework MySql.Data.Entity 安裝後確認 2、在MVC Model文件夾下添加一個學生類,後面用它通過[數據遷移]在MySQL中創建一個表 3、創建數據上下文 ...
  • 這篇文章,向大家介紹ASP.NET Core中的Kestrel Web伺服器。這篇文章主要討論下麵兩個重要的事情:什麼是Kestrel 伺服器?怎麼使用.NET Core CLI來運行ASP.NET Core應用程式?什麼是Kestrel伺服器? 我們已經知道ASP.NET Core是一個跨平臺的開... ...
  • 前言 回顧之前的兩篇Swagger做Api介面文檔,我們大體上學會瞭如何在net core3.1的項目基礎上,搭建一套自動生產API介面說明文檔的框架。 本來在Swagger的基礎上,前後端開發人員在開發生產期間,可以藉此進行更加便捷的溝通交流。可是總有些時候,遇到一些難纏的,又不講道理,偏偏覺得將 ...