Ant Design Blazor component library's routing reuse multi-tab function

Recently, there has been a growing demand for implementing a multi-tab component in the Ant Design Blazor component library. So, I used the weekend to implement the `ReuseTabs` component based on the `Tabs` component in combination with the built-in routing component of Blazor.

Recently, there has been a growing demand for implementing a multi-tab component in the Ant Design Blazor component library. So, I used the weekend to implement ReuseTabs component based on Tabs component in combination with the built-in routing component of Blazor.

Preface

Blazor is the latest front-end framework for .NET. It can build front-end applications based on WebAssembly or SignalR (WebSocket). Blazor based on the WebAssembly hosting model can even run offline. In addition, the .NET class library can be shared, which can reduce the amount of code by 1/3 compared to the previous JS-based front-end and back-end separation model. Now, .NET developers can also use the technologies and experience they are familiar with to develop front-end applications. The communication costs between developers with different technology stacks are also greatly reduced, thus once again liberating productivity.

So, Blazor is another productivity technology for .NET developers!

By using the open source UI component library of the Blazor community ecosystem, commonly used components are encapsulated, and users no longer need to write JS and CSS, which has won praise from .NET developers in the community. At present, a large number of enterprise-level applications built based on Blazor have been deployed and launched, and are gradually being recognized by enterprises.

text

What is routing multiplexing multiple tabs

The route reuse in the title of this article is a concept in Angular's RouteReuseStrategy , which is often referred to as "multi-tab pages" in the Chinese community. Its main function is to maintain the state of the page when switching pages, and the currently displayed page state can be restored by switching pages at will. It is usually used in more complex backend management systems. After filtering the form, the user can enter the record details page, and then return to the list page, still maintaining the original search conditions, number of pages, etc.; or when filling out a form, it is necessary to go to another page to view the correct information. When returning to the form, the content that has been filled in will not be lost.

Due to the natural advantage of being able to reuse C# code, Blazor is often used to build background management systems, so the use of tabs has become a common demand. However, the official Blazor team did not provide us with such a component directly, so we need partners in the community to implement it.

However, looking at several open source component libraries in the community, they all only implement the general Tabs tab component and can only be used as a switching panel. To implement the "multi-tab" function, it is either not supported, or you have to directly or indirectly rely on your own menu components and layout components, and then rely on the page file path, splice the page component type, and finally use reflection to create the page component...

Although they do implement the multi-tab function, the implementation is not very elegant. The coupling degree is very high, and it can only be used in the component library's own framework layout, and cannot be used separately. In addition, the performance of reflection is not good, and the pages must be placed according to the agreement, which imposes various restrictions on users.

Of course, there is a more recognized solution circulating in the community, which is the BlazorDemoMultiPagesTab project. It provides a prototype that implements routing multi-tabs by combining Blazor's built-in routing components. But the problem is that it is just a demo. It only implements the principle. The code is messy. The author has not organized it or packaged it into components. If you want to use it in your own project, you will definitely pull out your hair.

ReuseTabs component in Ant Design Blazor

Recently, there has been a growing demand for implementing a multi-tab component in the Ant Design Blazor component library. So, I used the weekend time to implement ReuseTabs component based on the Tabs component based on the ideas provided in BlazorDemoMultiPagesTab and combined with the Blazor built-in routing component.

The ReuseTabs component contains only two subcomponents, ReuseTabsRouteView and ReuseTabs . ReuseTabsRouteView inherits from the built-in RouteView component and is responsible for taking over the life cycle of the page component so that the page component can maintain its state or be destroyed; ReuseTabs is responsible for the display and interaction of the tabs. In addition, there is no dependency on other components such as menus and layouts, so it can be used directly in any Blazor application and can also be used well with other component libraries.

Main features

• Just modify two codes to apply
• Support static or dynamic setting of tag names
• Synchronize with the route, support various redirect methods such as <a> tag, NavigationManger , etc.

The following introduces the basic usage, taking the dotnet new template project as an example.

How to use

First, install the AntDesign package and service registration as described in the Ant Design Blazor documentation.

Then, modify the App.razor file in the project and replace RouteView with ReuseTabsRouteView .

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
- <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+ <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    ...
</Router>

Modify the MainLayout.razor file in the project,

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
- <div class="top-row px-4">
- <a href="http://blazor.net" rel="external nofollow" target="_blank" class="ml-md-auto">About</a>
- </div>
- <div class="content px-4">
- @Body
- </div>
+ <ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" / >
    </div>
</div>

Two ways to customize tag names

If it is plain text, you can use ReuseTabsPageTitle attribute in the page component.

@page "/counter"
+ @attribute [ReuseTabsPageTitle("Counter")]

If you need to use the template to get dynamic tab names, such as adding another component, or getting the title from the page content, you need to implement IReuseTabsPage interface:

@page "/"
+ @implements IReuseTabsPage

<h1>Hello, world!</h1>

@code{
+ public RenderFragment GetPageTitle() =>
+ @<div>
+ <Icon Type="home"/> Home
+ </div>
+ ;
}

Note: The ReuseTabs component is currently in the daily build package of version 0.9.0. Before it is officially released, you need to refer to the method described in the document to install it.

Subsequent functions

Currently, this component only implements basic functions, and some functions are in the subsequent plans:

• Right-click menu
• Code mode closed
• Caching strategy
• Routing guards and permission control

postscript

The Blazor community has been calling for multiple tabs for more than a year, and it has finally been realized in the past few days. The communities at home and abroad are jubilant and feel a great sense of accomplishment.

For the details of the implementation, interested students can check the source code of Ant Design Blazor, which is only a few files. Of course, if there are many students interested, I can also write a detailed article to introduce it.

In fact, I hope that more enthusiasts in the community can stand up, share their experiences, and contribute to open source projects, so that the community can develop healthily.
Ant Design Blazor has been developed for more than a year, but to be honest, compared with the authors of other component library projects, my own time investment and contribution are not that much. In addition to contributing code, a large part of my energy is spent on community operations.
Promoting the project, turning passers-by into users, and then turning users into contributors, allowing more people to each spend a small amount of energy to achieve the effect of everyone contributing, is the long-term strategy for keeping open source projects active for a long time.

Finally, we are very grateful to our users and contributors for their support! Each of their issues, cases and PRs is an affirmation of us and a driving force for us to persevere!

Reference Links

https://github.com/BlazorPlus/BlazorDemoMultiPagesTab

https://github.com/ant-design-blazor/demo-reuse-tabs

https://antblazor.com/docs/nightly-build

This is the end of this article about the routing reuse of multiple tabs in the Ant Design Blazor component library. For more relevant Ant Design Blazor component library content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!