请选择 进入手机版 | 继续访问电脑版

马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#问题入口 ASP.NET问题入口

【C#问题提交】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接毕业设计】 面试-葵花宝典下载

官方一群:

官方二群:

查看: 488|回复: 5

.NET Core 又一杀器! Web Blazor框架横空出世!

  [复制链接]
  • TA的每日心情
    开心
    前天 21:32
  • 签到天数: 1610 天

    [LV.Master]伴坛终老

    4251

    主题

    6177

    帖子

    11万

    积分

    管理员

    IBC编程社区-原道楠

    Rank: 9Rank: 9Rank: 9

    积分
    111382

    推广达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2019-11-8 09:58:49 | 显示全部楼层 |阅读模式

    马上加入IBC,查看更多教程

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x

      

    095908t0b90uwxwqru5xum.png

      多年来,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来创建,如下图所示我们选择。

    095909qv38a8vff5aw8fls.png
    创建项目乐成,我们来分析一下Blazor中的项目初始文件都是些什么?都有啥用?
    095909iz6a226fq8ifg8l9.png

    • 依赖项,属性和wwwroot文件夹与标准ASP.NET Core应用步伐文件夹雷同。
    • 该网页文件夹包罗包罗这个应用步伐,就像网页MVC应用步伐一样。
    • 该共享文件夹包罗实用于整个应用步伐的结构页。
    • 该_ViewImports.cshtml文件用于导入定名空间为别的* .cshtml文件。
    • 在Program.cs的文件用于创建ASP.NET核心托管情况。
    • 该Startup.cs文件 不多表明。
    • 在_Imports.razor中我们直接全局引入库

    假如运行示例应用步伐,则会得到一个如下所示的页面:

    095910pfyhxctf4xt3nf9o.png

    随后你会在畅游在官方示例中,无尽遐想,这么给力的框架!我改怎样去驾御它,利用它?好的,我们如今就开始!激动的时间!

    如今我们须要一个razor组件,注意如今是叫做组件,不是通常利用的*.cshtml了,将我已编写好的代码来继承我的演讲,复制下面的代码。

    1. <h3>Todo</h3>
    2. @page "/todo"
    3. @inject TodoItemService todoitemservice
    4. <table class="table">
    5. <thead>
    6. <tr>
    7. <th>Date</th>
    8. <th>Description</th>
    9. </tr>
    10. </thead>
    11. <tbody>
    12. @foreach (var todoitem in todos)
    13. {
    14. <tr>
    15. <td>@todoitem.IsDone</td>
    16. <td>@todoitem.Title</td>
    17. </tr>
    18. }
    19. </tbody>
    20. </table>
    21. <input placeholder="Something todo" @bind="newTodo" />
    22. <button @onclick="AddTodo">Add todo</button>
    23. @code {
    24. private IList<TodoItem> todos = new List<TodoItem>();
    25. private string newTodo;
    26. private void AddTodo()
    27. {
    28. if (!string.IsNullOrWhiteSpace(newTodo))
    29. {
    30. todos.Add(new TodoItem { Title = newTodo,id=Guid.NewGuid().ToString() });
    31. newTodo = string.Empty;
    32. }
    33. }
    34. }
    35. @functions{
    36. protected override async Task OnInitializedAsync()
    37. {
    38. todos = await todoitemservice.GetTodoItems();
    39. }
    40. }
    复制代码

    让我们看看上面发生了什么?我们从上到下一个一个来说。 @using BlazorDemo.Data; 是我的组件须要利用的实体,假如你细致阅读上文,您会知道在 _Imports.razor 中假如引用了该实体,那么全部组件将无需多言。以是我在此中添加了该实体。

    1. @using System.Net.Http
    2. @using Microsoft.AspNetCore.Authorization
    3. @using Microsoft.AspNetCore.Components.Authorization
    4. @using Microsoft.AspNetCore.Components.Forms
    5. @using Microsoft.AspNetCore.Components.Routing
    6. @using Microsoft.AspNetCore.Components.Web
    7. @using Microsoft.JSInterop
    8. @using BlazorDemo
    9. @using BlazorDemo.Shared
    10. @using BlazorDemo.Data;
    复制代码

    @page 是一个指令,它告诉ASP.NET这是一个Razor页面并设置默认路由。在我们的例子中,蹊径是相对蹊径“ / todo”。此参数担当相对和绝对路径;后者类似于“/ Path / To / Page”。您可以@page为多个路由利用多个指令。随后您可以在 NavMenu.razor 中添加该页面的导航。

    1. <li class="nav-item px-3">
    2. <NavLink class="nav-link" href="todo">
    3. class="oi oi-list-rich" aria-hidden="true"> Todo
    4. </NavLink>
    5. </li>
    复制代码

    @inject指令告诉Blazor利用依赖注入将一个类注入此页面。在本例中,我们正在注入 TodoItemService ,以便我们可以从之前创建的样本数据中读取。其该服务的界说如下,它简单的离谱。

    1. public class TodoItemService
    2. {
    3. public Task<List<TodoItem>> GetTodoItems()
    4. {
    5. List<TodoItem> list = new List<TodoItem>();
    6. list.Add(new TodoItem() {
    7. IsDone = false, Title = "zaranet",id = Guid.NewGuid().ToString()
    8. });
    9. return Task.FromResult(list);
    10. }
    11. }
    复制代码

    由于如今有了读取和查看数据的方法,因此我们须要界说一种可以加载样本数据的方法。为此,我们须要 @functions 指令。

    1. @functions{
    2. protected override async Task OnInitializedAsync()
    3. {
    4. todos = await todoitemservice.GetTodoItems();
    5. }
    6. }
    复制代码

    真正的把戏就是 OnInitializedAsync 方法。将页面加载到欣赏器时将触发此方法。在我们的实现中,它所做的就是获取JSON示例数据并将其转换为我们新界说的ToDoItem类。如今我们可以运行该应用步伐,并查看我们的页面!看起来像如许:

    095910owbuyg5mdmu50o5h.gif

    难以置信!我们有一个工作页面!如今,我们可以扩展此页面,以便我们可以删除,这里就不再提出更新,后期我在详细阐明我在Blazor中利用的UI。如今我们在表格中添加一列按钮 用于触发删除的变乱,看看我们该怎样编写?

    1. <table class="table">
    2. <thead>
    3. <tr>
    4. <th>Date</th>
    5. <th>Description</th>
    6. <th>Work</th>
    7. </tr>
    8. </thead>
    9. <tbody>
    10. @foreach (var todoitem in todos)
    11. {
    12. <tr>
    13. <td>@todoitem.IsDone</td>
    14. <td>@todoitem.Title</td>
    15. <td><button @onclick="(() => RemoveTodo(todoitem.id))"><i class="oi oi-trash"></i></button></td>
    16. </tr>
    17. }
    18. </tbody>
    19. </table>
    复制代码

    请注意onclick绑定到HTML按钮的变乱。此变乱绑定到C#方法 RemoveTodo() ,如下所示:

    1. @functions{
    2. private void RemoveTodo(string id)
    3. {
    4. todos.Remove(todos.First(x => x.id == id));
    5. }
    6. }
    复制代码

    我们重新试着启动步伐~看看会发生什么?是报错?是编译不乐成?都有大概会发生?

    095910qbcckmzz6kkim6dd.gif

    Blazor是一个客户端Web框架,使我们可以大概在客户端单页应用步伐中利用C#。它的表面与Razor Pages应用步伐非常相似。这个示例项目使我们可以大概从外部数据源获取ToDo列表项,添加新项,删除项。全部这些功能都发生在客户端。

    此时,我无法控制心田的高兴 .NET Core如许精良的框架再配上宇宙第一的Visual Studio简直是传说中的人中吕布马中赤兔!

    该示例代码在 https://github.com/zaranetCore/dotNetCoreBlazor中.

    C#论坛 www.ibcibc.com IBC编程社区
    C#
    C#论坛
    IBC编程社区
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则