The ASP.NET team and community continue to devote all their efforts to Blazor in .NET 8, bringing it a lot of new features, especially in terms of server-side rendering (SSR), which solves the slow loading of WASM and the performance of Server to a certain extent. Not ideal and other limitations, but also with the original MVC, Razor Pages framework to complete the unification at the bottom.
AntDesign Blazor, as one of the most popular open source component libraries of Blazor, will naturally continue to follow up. This article mainly introduces the first new feature of .NET 8 applied on AntDesign Blazor – CascadingModelBinder. I use it to implement the Query String property that has not been supported by ReuseTabs since its release in 2021 for two years bound.
ReuseTabs is a component added by AntDesign Blazor in July 2021, and it is currently the only component of Blazor that truly implements routing reuse. It can be used independently in any Blazor project by adding the RouteData cascade value in App.razor (the example in its documentation is used on the official template), and it can actively identify routes and render page components without relying on menu configuration , and keep the state switching of each Tab page from being lost. Unlike the implementation of other component libraries, it can only be used on their designated supporting templates…
Its implementation principle is also very simple. It obtains the component type to be displayed and the attribute value of the page component to be bound through the cascaded RouteData value, and then dynamically renders the component. But because the Query string attribute value binding implementation added in .NET 6 uses an internal static method inside RouteView to parse the QueryString and pass it to the page component, ReuseTabs needs to copy all the code to support it. At that time, I felt that such a design was very limited (later I was too lazy).
Until the update of the article ASP.NET Core in .NET 8 Preview 6 published in the .NET official blog some time ago, a feature was mentioned, cascading the query string value to the Blazor component, which means that the Query is no longer allowed String value binding is limited to page components. I think that the function that ReuseTabs has been missing for two years is hopefully filled.
So there is the content to be introduced today.
In order to find out how the official implementation is implemented, switch the aspnetcore warehouse source code to the .NET 6 Preivew 6 tag, and find the RenderPageWithParameters method in RouteView.cs in the RouteView source code, which is used to render page components.
So I traced the history of this file and found that the PR#47716 that supports server-side static rendering of forms has added CascadingModelBinder, so that the submitted FormData can be obtained from the Http request and bound to the model marked with the SupplyParameterFromForm feature in the component superior.
Next, in PR #48554, SupplyParameterFromQuery can also be passed through CascadingModelBinder, and then delete the code related to the internal class QueryParameterValueSupplier in RouteView mentioned above.
This is right between the eyebrows, I immediately copied this code from RouteView to ReuseTabs, PR https://github.com/ant-design-blazor/ant-design-blazor/pull/3377, perfect!
Final result:
Besides being happy, I thought that even if I copy it, I can’t copy it unclearly, so I investigated how CascadingModelBinder passes cascading values by the way. To put it simply, Blazor created the CascadingModelBinder component and the CascadingModelBindingProvider provider to abstract and unify the cascading value transfer method. I didn’t expect such a big change behind the plain two-sentence introduction in the official blog. For details, please pay attention to my next article, and I will introduce it separately.
微信扫一扫打赏
支付宝扫一扫打赏
