吐槽一下最近开发blazor SPA应用遇到的坑

跳动de指尖 2021-02-23 04:59:49

我用的是 Ant Design of Blazor

首先，我觉得blazor最大的问题就是断点偶尔失效的问题，这点很烦，不能debug，只能从堆栈信息里面找到底哪里出错了。

.net standar API好少，NuGet上基于standar的库能用的也不多。

还有导航，在当前页导航到当前页是不会触发OnInitializedAsync，相当于js的pushState() 但是没有任何配套功能



[Inject] 

private NavigationManager Navigation { get; set; }



private asycn Task QueryAsycn()

{

    

	/* 如果我当前页是 /Demo

	 * 那么我想筛选数据，导航到 /Demo?name=123,地址会变，但是不会OnInitializedAsync

	 * 不知道是我的想法没跟上还是本该这样子

	*/

	Navigation.NavigateTo("/Demo?name=123");

	//如果导航到其他页面倒是符合预期，像这样

	Navigation.NavigateTo("/Welcome?name=123");

	

	//所以目前我处理的方式是 navigateTo 后，继续查询数据更新UI

	Source = await LoadDataAsync();

}

RenderFragment 用代码的方式构建好麻烦，我开发的方式是
Welcome.razor
Welcome.razor.cs



//file Welcome.razor.cs

public partial class Webcome{}

就想着以后好维护，层次看的清晰，更纯粹干净，但是不得已还是在razor上添加了代码



//在razor文件上构建RenderFragment很简单 ，var rf = @<tag></tag>

private string NewTag { get; set; }



    private RenderFragment DropdownRender(RenderFragment originNode)

    {

        RenderFragment customDropdownRender =

            @<Template>

                <div>

                    @originNode

                    <Divider Style="margin: 4px 0"></Divider>

                    <div style="display: flex; flex-wrap: nowrap; padding: 8px">

                        <Input Style="flex: auto" @bind-Value="NewTag"/>

                        <a style="flex: none; padding: 8px; display: block; cursor: pointer" @onclick="AddItem">

                            <Icon Type="plus" Theme="outline"></Icon>

                            添加标签

                        </a>

                    </div>

                </div>

            </Template>;



        return customDropdownRender;

    }



    private void AddItem(MouseEventArgs args)

    {

        if (!string.IsNullOrWhiteSpace(NewTag))

        {

            _tags.AddItem(NewTag);

            NewTag = string.Empty;

        }

    }



//但是在cs文件里面构建很麻烦，RenderFragment是一颗结构树，就简单一个图标都没那么便捷

var icon = builder =>

                {

                    builder.OpenComponent<Icon>(0);

                    builder.AddAttribute(0,"Type","exclamation-circle");

                    builder.AddAttribute(1,"Theme","outline");

                    builder.CloseComponent();

                },

就我上面的例子，就为了在下拉框新增一个值，把我坑惨了，花了我半天时间，就为了实现这么一个功能而已

然后就报错

因为什么？因为 NewTag最开始我定义的是字段，不是属性
private string _newTag = string.Empty;
花半天时间浪费在这儿了。

还有一个路由问题，因为我要管理一些文件，所以路由参数值里面必然会有（. dot 点）这个符号，然后404了。
嗯，想了一下，肯定是当作静态文件访问给处理了，没问题。
然后我去MSDN找文档看有什么解决办法
刚好也有。

引用

Routing with URLs that contain dots
For hosted Blazor WebAssembly and Blazor Server apps, the server-side default route template assumes that if the last segment of a request URL contains a dot (.) that a file is requested. For example, the URL https://localhost.com:5001/example/some.thing is interpreted by the router as a request for a file named some.thing. Without additional configuration, an app returns a 404 - Not Found response if some.thing was meant to route to a component with an @page directive and some.thing is a route parameter value. To use a route with one or more parameters that contain a dot, the app must configure the route with a custom template.

Consider the following Example component that can receive a route parameter from the last segment of the URL.
@page "/example/{param?}"



<p>

    Param: @Param

</p>



@code {

    [Parameter]

    public string Param { get; set; }

}