.NET Core another killing device! Web Blazor framework turned out!

　　Over the years, Javascript (and its sub-frame) has been in a browser running the DOM (Document Object Model), and scripting knowledge can really grasp the operation client UI. About two years ago, all the while with the introduction of Web Assembly changed -Web Assembly permissible interpretation of the compiled language in the client (relative Web Assembly Read more about understanding wasm Past and present body ), and now all browsers are fully supported it. Microsoft's answer is Blazor founder. C # allows developers to build their entire stack in .NET (including UI) is an exciting proposition. For some time, Blazor been in a preview state, but is now included in the September 23, 2019 the general release version and .NET Core version 3.0 of the next version, of course, you want to taste the taste Blazor, no matter how that should .VisualStudio 2019 and installed with .NET Core 3.0 + SDK. Microsoft has written on how to do this to force a set of instructions, and the document is in Microsoft Docs presentation. You can choose to opt out my official Microsoft blog, but its contrast, my pretty .... its GitHub address: HTTPS: // github.com/AdrienTorris/awesome-blazor

　　Creating Blazor project can be created by the project dotnetCli command, DOTNET new new -i Microsoft.AspNetCore.Blazor.Templates :: 3.1 . 0 -preview1. 19508.20 , we article directly created by Visual Studio, as shown below we choose.

Creating a project is successful, we have to analyze the original file in the project Blazor are what? They are dim?

Dependency, property and wwwroot folders with standard ASP.NET Core application in the folder the same.

The page includes this folder contains applications like web M VC application the same.

The shared folder contains applies to the entire page layout application.

The _ViewImports.cshtml file namespace for introduction * .cshtml other files.

In the Program.cs file used to create the core ASP.NET hosting environment.

The Startup.cs file much explanation.

In _Imports.razor in our global direct import library

If the run the sample application, you get a page as shown below:

Then you will swim in the official example, endless reverie, so to force the frame! I changed how to manage it, use it? Well, we have to start now! Exciting time!

Now we need a razor assembly, attention is now called the component is not normally used * .cshtml, and I will have to write good code to continue my speech, copy the code below.

<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();
    }
}

Let's see what happens above? Our top-down one by one is. @using BlazorDemo.Data; is a component entity I need to use, if you read the above, you'll know _Imports.razor if the reference entity, then all the components will not have much to say. So I added the entity.

@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 is an instruction that tells ASP.NET Razor This is a page and set the default route. In our example, the route is relatively route "/ todo". This parameter accepts absolute and relative paths; the latter is similar to "~ / Path / To / Page ". You can use multiple instruction multiple @page route. Then you can NavMenu.razor add navigation of the page.

<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>

The @injectdirective tells Blazor use dependency injection to inject a class this page. In this example, we are injecting TodoItemService , so that we can read the data from the sample created earlier. The service is defined as follows, it is simply outrageous.

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);
        }
    }

Now that the method has to read and view the data, so we need to define a method of sample data can be loaded. To this end, we need @functions instruction.

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

The real magic is OnInitializedAsync method. This method will be triggered when the page loaded into the browser. In our implementation, all it does is get JSON data and converts it into an example of our newly defined ToDoItemclass. Now we can run the application and view our page! Looks like this:

incredible! We have a working page! Now, we can extend this page, so that we can remove, there is no longer proposed to update, post I explained in detail in the UI I use Blazor in. Now we add a button for triggering events to delete in the table to see how we write?

<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>

Note onclickbound to HTML button 's event. This event is bound to the C # Method RemoveTodo () , as shown below:

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

We tried to re-start the program - and see what happens? Is being given? It is compiled unsuccessful? Are likely to occur?

Blazor is a Web client framework that allows us to use C # client one-page application. Its exterior is very similar to Razor Pages application. This sample project allows us to get ToDo list item from an external data source, add a new item, delete the item. All of these functions take place at the client.

At this point, I can not control this great inner joy .NET Core Framework matched universe of Visual Studio is simply the first among the legendary Lvbu Ma in the Red Rabbit!

The example code in HTTPS: // github.com/zaranetCore/dotNetCoreBlazor in.

.NET Core another killing device! Web Blazor framework turned out!

Guess you like