c# - Blazor（服务器）中的奇怪行为（html 元素消失），可能是 blazor.server.js

问题描述

在我正在处理的 Blazor（服务器）应用程序中看到一些奇怪的行为。对这项技术很陌生，而且一开始就不太擅长 Web 开发，但我坐在这里。

问题是，由于某种原因，并且没有调试我故意触发的代码，据我所知，Blazor 正在我的页面上删除/添加 HTML 元素，而无需回调服务器 C# 代码。它只对 3 个 html 选择元素中的 1 个执行此操作，这些元素在页面上的编码完全相同。这个特定的选择元素似乎在触发我在 C# 中的过滤逻辑，但对于我的生活，我无法弄清楚它是如何做到的。即使是这样，它所做的事情也不完全正确，因为它与我的 C# 逻辑有关。

正在删除的是在下面显示的@foreach 中呈现的跨度/按钮，但仅在单击“状态代码”选择元素中的某些内容时。它仅发生在第一次在 @foreach 中呈现内容的第一次过滤之后。之后，更改“状态代码”选择开始改变 HTML 客户端，但仅针对那个选择元素。不是其他两个。请注意，我目前在 C# 中注释掉了 ApplyFilter，它仅在单击“搜索”按钮时触发。其他 2 个选择元素的行为与预期完全相同，即在我物理单击“搜索”按钮之前，@foreach 不会发生任何事情。

我已经在浏览器开发工具中为该@foreach 块更改子树设置了一个断点，我所描述的是该事件中发生的情况以及被击中的断点。第一个和第三个选择元素永远不会导致子树发生变化，第二个会。子树更改中断指示 blazor.server.js 正在调用“removeChildElement”。

我目前没有 javascript 客户端，除了 blazor 可能在做什么。所以这是纯粹的 Blazor 服务器端，HTML/C# 带有一些 Razor-ish 脚本来呈现页面。

提前感谢任何关于如何进一步调试的想法，或者找出我在这里做错了什么......这可能是我编写这个应用程序的方式。

    <ul class="nav flex-column">
    <li class="nav-item px-3">   
        <select class="form-control" @onchange="OnChangeFilterSite">
            <option value="all" selected>Select Site :</option>
            @foreach (string item in RtuServiceData.Sites) {
                if (filterSite != null && filterSite == @item) {
                    <option selected value="@item">@item</option>
                }
                else {
                    <option value="@item">@item</option>    
                }
            }                
        </select>
    </li>
    <li class="nav-item px-3">
        <select class="form-control" @onchange="OnChangeFilterStatusCode">
            <option value="all" selected>RTU Status :</option>
            @foreach (AcceptedStatus item in RtuServiceData.StatusCodes) {
                if (filterStatusCode != null && filterStatusCode == item.Code) {
                    <option selected value="@item.Code">@item.Description</option>
                }
                else {
                    <option value="@item.Code">@item.Description</option>
                }
            }
        </select>
    </li>
    <li class="nav-item px-3">
        <select class="form-control" @onchange="OnChangeFilterMatchingOption">
            <option value="all" selected>Matching Option :</option>
            @foreach (string item in RtuServiceData.MatchingOptions) {
                if (filterMatchingOption != null && filterMatchingOption == @item) {
                    <option selected value="@item">@item</option>
                }
                else {
                    <option value="@item">@item</option>    
                }
            }
        </select>
    </li>
    <li class="nav-item px-3">
        <label class="text-white"><b>Filter :</b></label>
        <input type="text" class="form-control" @onchange="OnChangeFilterName"/>
        <br>
        <button class="btn btn-dark" @onclick="@(e => _ApplyFilter())">Search</button>
        <br><br>       
    </li>
    <li class="nav-item px-3">
        <div style="height: 300px; overflow: auto; padding-right: 15px">
            @foreach (RtuComposite item in RtuServiceData.RTUs_Filtered) {
                <span class="btn btn-block @item.ACCEPTED_STATUS_BUTTON_CLASS" @onclick="@(e => _SetRtu(@item.Proposed.ID))">@item.Proposed.RTU</span>
            }
        </div>
    </li>
</ul>

这是处理各种@onchange 事件的C# 代码。

private string filterSite;
public void OnChangeFilterSite(ChangeEventArgs e)
{
    filterSite = e.Value.ToString();
    //_ApplyFilter();
}

private string filterStatusCode;
public void OnChangeFilterStatusCode(ChangeEventArgs e)
{
    filterStatusCode = e.Value.ToString();
    //_ApplyFilter();
}        

private string filterMatchingOption;
public void OnChangeFilterMatchingOption(ChangeEventArgs e)
{
    filterMatchingOption = e.Value.ToString();
    //_ApplyFilter();
}    

private string filterName;
public void OnChangeFilterName(ChangeEventArgs e)
{
    filterName = e.Value.ToString();
    //_ApplyFilter();
}

标签： c#htmlblazor

c# - Blazor（服务器）中的奇怪行为（html 元素消失），可能是 blazor.server.js

问题描述

解决方案

推荐阅读