叠落着全旅行者下拉列表

布拉泽是由Steve Sanderson介绍的实验框架 knockout.js在ASP.NET团队上的名声(以及其他东西)。前提 框架很简单,但潜在的游戏更改为ASP.NET开发人员:它使您可以写入 您的客户端代码在C#中。这意味着这是什么,而不是追逐 在最新的基于JavaScript的HITLINGS - Aurelia,React,Angular等,只有 发现它们依赖于学习整个新的框架,或者 他们不再是一周的味道,你只是使用你的.NET技能 已经必须将您的处理移动到浏览器。

正如我所说,布拉泽尔是实验的,但希望它将成为一个官方的部分 ASP.NET在适当时候提供的。它依赖于一种呼叫的技术 Web组件 所有现代浏览器都提供。你真的不需要知道 关于Web组件使用Blazor的任何事情。

我一直在看印花侠 宣布 它是由ASP.NET团队采用的 并一直在玩 从那时起并关闭样品。我已经用角度达到了一点,反应了, 就像反应一样,布拉泽斯基于建筑块的组件 UI。与反应不同,您不会使用JSX或STRINS构建组件 - 您 使用剃刀,就像在MVC或Razor页面一样。什么可能更简单?

展示目前的工作原理 - 它正在改变所有 time - I 以为我会在实施UI模式中的那个古老的最爱 - 级联下降。如果你想玩,你应该跟随 这里设置说明 让Blazor在您的环境中工作。一旦你做到了, 您应该选择将生成a的blazor(ASP.NET核心托管)选项 解决方案包括3个项目:a <solution_name>.Server 包含Web API控制器的项目;一种 <solution_name>.Client 持有Blazor应用程序和组件文件的项目; A. <solution_name>.Shared 在两个其他项目中使用用于实体的类文件的项目。

The Data

此示例使用作者和书籍来填充下拉目。用户将 最初的作者名单中呈现,而当选择之一, 依赖下拉将填充由过滤的书籍列表 选定的作者。因此,需要两种课程来代表这些实体。他们 are added to the 共享 project:

public class Author
{
    public int AuthorId { get; set; }
    public string Name { get; set; }
    public ICollection<Book> Books { get; set; }
}

public class Book
{
    public int BookId { get; set; }
    public string Title { get; set; }
    public Author Author { get; set; }
}

接下来,我们需要一种生成和曝光合适数据的方法。  This is best 通过添加名为的Web API控制器来实现 BookController. 到了 Controllers 文件夹在 服务器 项目有以下内容 code:

using 海滩.Shared;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace 海滩.Server.Controllers
{
    [Produces("application/json")]
    [Route("api/book")]
    public class BookController. : Controller
    {
        private static readonly List<Author> authors = new List<Author>{
            new Author{
                AuthorId = 1, Name = "Tom Clancy", Books = new List<Book>
                {
                    new Book{BookId = 1, Title = "Sum of all Fears"},
                    new Book{BookId = 2, Title = "Rainbow Six"},
                    new Book{BookId = 3, Title = "Hunt for Red October"}
                }
            },
            new Author{
                AuthorId = 2, Name = "Stephen King", Books = new List<Book>
                {
                    new Book{BookId = 4, Title = "Carrie"},
                    new Book{BookId = 5, Title = "The Stand"},
                    new Book{BookId = 6, Title = "The Black House"},
                    new Book{BookId = 7, Title = "It"}
                }
            },
            new Author{
                AuthorId = 3, Name = "Robert Ludlum", Books = new List<Book>
                {
                    new Book{BookId = 8, Title = "The Bourne Ultimatum"},
                    new Book{BookId = 9, Title = "The Holcroft Covenant"},
                    new Book{BookId = 10, Title = "The Rhineman Exchange"}
                }
            }
        };

        [HttpGet]
        public IEnumerable<Author> Get()
        {
            return authors;
        }
    }
}

数据是硬件的,但它可以轻松来自数据库。

The Blazor Component

用于显示下降的UI将实现为Blazor组件。 这将是在的 客户 项目,看起来非常相似 razor页面应用程序的结构:

布拉泽客户

组件创建为剃刀文件并添加到 页面 文件夹。 工具仍在工作,因此在添加组件时的解决方法 the moment is to 添加剃刀视图。我命名了 Books.chtml.。我会展示完成的 首先为组件的代码,然后在部分中解释它:

@using 海滩.Shared
@page "/books"
@inject HttpClient http

<h1>Books</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (authors == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <select id="authors" onchange="@AuthorSelectionChanged">
        <option></option>
        @foreach (var author in authors)
        {
            <option value="@author.AuthorId">@author.Name</option>
        }
    </select>
}
@if (books != null)
{
    <select id="books">
        <option></option>
        @foreach (var book in books)
        {
            <option value="@book.BookId">@book.Title</option>
        }
    </select>
}


@functions {
    
    Author[] authors;
    Book[] books;

    protected override async Task OnInitAsync()
    {
        authors = await http.GetJsonAsync<Author[]>("/api/book");
    }


    void AuthorSelectionChanged(UIChangeEventArgs e)
    {
        if (int.TryParse(e.Value.ToString(), out int id))
        {
            books = authors.First(a => a.AuthorId == id).Books.ToArray();
        }
        else
        {
            books = null;
        }
    }
}

在解释组件之前,它需要连接到示例 应用。这是通过添加另一个链接来实现的 纳米曼 组件 the 共享 文件夹在 客户 project:

<li class="nav-item px-3">
    <NavLink class="nav-link" href="/books">
        <span class="oi oi-book" aria-hidden="true"></span> Books
    </NavLink>
</li>

At the top of the component, a using directive is added to bring the 共享 项目进入范围,以便可以引用所声明的实体。下一个, a route is defined using an @page directive. The syntax for this is very similar to 剃刀页面. However, the @page directive is required for a Razor Page, whereas it is only needed in a Blazor Component if the component is to take part in routing. The @inject directive is then used to provide an instance of HttpClient from the 依赖注入容器将用于调用Web API控制器。

中间部分很大程度上是普通的HTML,其中一些C#嵌入了剃刀 句法。如果你熟悉剃刀,那么这里没有什么令人生畏的。 如果作者集合不是空,则显示第一个下拉列表, 填充数据。如果书籍集合没有空,则第二个下拉列表 显示,填充了书籍。本节中唯一的新的西装之士的东西 is the  onchange event handler in the first select element. 这是一个Blazor事件处理程序,而不是标准的JavaScript Event属性。这 method that it points to, AuthorSelectionChanged, is declared in the @functions block which is examined next.

The @functions block is a block of C# code. It is where private fields and 放置了方法。它与剃刀页面和ASP.NET Web的方式相同 过去的页面。在此示例中,声明了两个私有字段 - 数组 of Authors and an array of Books. The OnInitAsync() method (and it's synchronous counterpart OnInit() method) are provided by the 海滩Component 类,这个组成部分来自。他们可以在派生中被覆盖 在组件初始化后进行处理的类 - a bit like the old OnInit event handler in Web Forms or the document.ready jQuery的功能。在这个例子中, 使用注入的Web API控制器对Web API控制器进行异步呼叫 HttpClient 实例获取作者的集合。这 resulting reponse is assigned to the authors field, which results in the 作者的下拉列表被填充并使得可见:

落下

Then the event handler for the onclick event on the authors dropdown is defined. The method accepts a UIChangeEventArgs object as a parameter, which 包含有关触发的更改事件的信息。具体来说,它 includes a Value property, which holds the value of the selected option. This is parsed into an int and then used to filter the books according to the 选定的作者。过滤的书籍被分配给书籍下拉 is then displayed:

下拉2.

那么浏览器中的这看起来像什么?这是一个在网络选项卡的PEEK in Chrome:

网络

那里有实际的.NET DLL文件。它们由特殊版本使用 Mono团队开发的网络运行时以使用Web组件 浏览器。此示例中的总下载大小为1.8MB,但是 在Blazor上工作的团队将希望在它之前优化这种事情 曾经达到框架可以在生产中使用的阶段。

概括

布拉泽非常有希望。团队强调它是一个不受支持的实验网络框架,并且不应依赖于生产使用。 有很多工作要做,但它们似乎致力于这样做, 肯定是暂时的。就个人而言,我很乐意看到释放的海角。