.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.無需編譯的靜態資源文件等,使用 標簽引入 引用當前工程內的文件 引用外部項目工程中的文件 2.需要 ...
  • 場景 通過文件選擇對話框選擇文件 複製文件到指定路徑 註: 博客主頁: https://blog.csdn.net/badao_liumang_qizhi 關註公眾號霸道的程式猿獲取編程相關電子書、教程推送與免費下載。 實現 打開選擇文件對話框 OpenFileDialog importOpenFi ...
  • [DllImport("user32.dll", CharSet = CharSet.Auto, CallingConvention = CallingConvention.Winapi)] internal static extern IntPtr GetFocus(); ///獲取 當前擁有焦點 ...
  • 場景 C#中File類的常用讀取與寫入文件方法的使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99693983 註: 博客主頁:https://blog.csdn.net/badao_liumang_qizhi關註公眾號霸 ...
  • 一個基於Net Core3.0的WPF框架Hello World實例 [toc] 1.創建WPF解決方案 1.1 創建Net Core版本的WPF工程 1.2 指定項目名稱,路徑,解決方案名稱 2. 依賴庫和4個程式文件介紹 2.1 框架依賴庫 依賴Microsoft.NETCore.App跟Mic ...
一周排行
  • static void Main(string[] args) { string url = "https://go.microsoft.com/fwlink/?linkid=2108895&amp;clcid=0x409"; DownloadBigFile(new Uri(url), "ssms.... ...
  • 1. 使用ASP.NET Core 3.x 構建 RESTful API - 1.準備工作 什麼是REST 什麼是REST REST一詞最早是在2000年,由Roy Fielding在他的博士論文《Architectural Styles and the Design of Network-base ...
  • wpf 兩個自定義控制項 一個是IP控制項,一個滑動條。先看下效果圖 IPControl 1、實際工作中有時需要設置IP信息,就想著做一個ip控制項。效果沒有window自帶的好,需要通過tab切換。但也能滿足使用。廢話不多說直接上代碼 IPControl.xaml IPControl.xaml.cs 2 ...
  • 近期和幾位做嵌入式開發的朋友閑聊過程中,一位朋友抱怨到:這C#太難用了,我想在N個窗體(或者是N個用戶組件之間)傳遞值都搞不定,非得要定義一個全局變數來存儲,然後用定時器來刷新值,太Low了。我急切的回答道:這很簡單,不就是委托的事嘛。那你來一個示例啊:朋友道。此為這篇博客的起因,所以此篇博客對於有 ...
  • 在面對對象編程中,類的三大特性分別為封裝,繼承,多態。其中多態的具體實現,依賴於三個方法,也就是虛方法,抽象類和介面。 多態的具體作用是什麼呢?或者說多態的存在有什麼意義呢?多態的存在有效的降低了程式的耦合度,在使用的時候,不僅可以表現大家都有的共性,還能在必要的時候突出一些特殊的的個性。 那麼如何 ...
  • [toc] 前言 在之前已經提到過,公用類庫Util已經開源,目的一是為了簡化開發的工作量,畢竟有些常規的功能類庫重覆率還是挺高的,二是為了一起探討學習軟體開發,用的人越多問題也就會越多,解決的問題越多功能也就越完善, 倉庫地址: "April.Util_github" , "April.Util_ ...
  • 【ASP.NET Core學習】在ASP.NET Core 種使用Entity Framework Core介紹,包括如何添加Entity Framwork Core,創建模型和遷移到資料庫,查詢數據,保存數據,使用事務,處理併發衝突 ...
  • 環境:MacOS 10.13 MAMAP Prophp 7.0.33 + xdebugVisual Studio Code前言我所理解的 POP Chain:利用魔術方法並巧妙構造特殊屬性調用一系列函數或類方法以執行某種敏感操作的調用堆棧反序列化常用魔法函數前言我所理解的 POP Chain:利用魔 ...
  • 當創建隊列jobs、監聽器或訂閱伺服器以推送到隊列中時,您可能會開始認為,一旦分派,隊列工作器決定如何處理您的邏輯就完全由您自己決定了。 嗯……並不是說你不能從作業內部與隊列工作器交互,但是通常情況下,哪怕你做了,也是沒必要的。 這個神奇的騷操作的出現是因為“InteractsWithQueue”這 ...
  • 在說正題之前先解釋一下交換機模式是個籠統的稱呼,它不是一個單獨的模式(包括了訂閱模式,路由模式和主題模式),交換機模式是一個比較常用的模式,主要是為了實現數據的同步。 首先,說一下訂閱模式,就和字面上的意思差不多主要就是一個生產者,多個消費者,同一個消息被多個消費者獲取,先看一下官網的圖示 整體執行 ...
x