Blazor Server自定义原告自动完成组件功能异常排查求助

问题现象 #

输入内容时始终显示‘No Results’，看不到匹配的原告列表；点击‘No Results’文字没有任何反应，无法弹出新增原告的模态框。

原代码 #

@page "/plaintiff-autocomplete"
@using System.Collections.Generic

<div class="autocomplete">
    <input type="text" @bind-value="plaintiffInput" @bind-value:event="oninput" placeholder="Type plaintiff name..." />
    <div class="autocomplete-items">
        @if (suggestions.Count > 0)
        {
            @foreach (var suggestion in suggestions)
            {
                <div @onclick="(() => SelectSuggestion(suggestion))">@suggestion</div>
            }
        }
        else
        {
            <div @onclick="ShowModal">No Results</div>
        }
    </div>
</div>

@if (showModal)
{
    <div class="modal">
        <div class="modal-content">
            <span class="close" @onclick="CloseModal">&times;</span>
            <h2>Add Plaintiff</h2>
            <form @onsubmit="AddPlaintiff">
                <label for="plaintiffName">Plaintiff Name:</label>
                <input type="text" id="plaintiffName" @bind-value="newPlaintiff" required />
                <button type="submit">Add</button>
            </form>
        </div>
    </div>
}

@code {
    private string plaintiffInput = "";
    private List<string> plaintiffs = new List<string> { "John Doe", "Jane Smith", "David Johnson", "Emily Brown" };
    private List<string> suggestions = new List<string>();
    private bool showModal = false;
    private string newPlaintiff = "";

    private void SelectSuggestion(string suggestion)
    {
        plaintiffInput = suggestion;
        suggestions.Clear();
    }

    private void ShowModal()
    {
        showModal = true;
    }

    private void CloseModal()
    {
        showModal = false;
    }

    private void AddPlaintiff()
    {
        if (!string.IsNullOrWhiteSpace(newPlaintiff))
        {
            plaintiffs.Add(newPlaintiff);
            plaintiffInput = newPlaintiff;
            showModal = false;
            newPlaintiff = "";
        }
    }

    private void UpdateSuggestions()
    {
        suggestions = plaintiffs.Where(p => p.ToLower().Contains(plaintiffInput.ToLower())).ToList();
    }
}

问题原因及修复 #

1. 无匹配结果显示：UpdateSuggestions方法从未被调用，输入框内容变化时不会更新建议列表。给输入框添加@bind-value:after="UpdateSuggestions"，让每次输入完成后自动触发建议更新。
2. 点击"No Results"无响应：表单提交会触发页面刷新，导致模态框状态丢失；同时组件可能未及时渲染。修改表单提交逻辑阻止默认行为，在状态变更后调用StateHasChanged()强制UI刷新。

修复后代码 #

@page "/plaintiff-autocomplete"
@using System.Collections.Generic

<div class="autocomplete">
    <input type="text" 
           @bind-value="plaintiffInput" 
           @bind-value:event="oninput" 
           @bind-value:after="UpdateSuggestions"
           placeholder="Type plaintiff name..." />
    <div class="autocomplete-items">
        @if (suggestions.Count > 0)
        {
            @foreach (var suggestion in suggestions)
            {
                <div @onclick="(() => SelectSuggestion(suggestion))">@suggestion</div>
            }
        }
        else
        {
            <div @onclick="ShowModal">No Results - Click to add new plaintiff</div>
        }
    </div>
</div>

@if (showModal)
{
    <div class="modal">
        <div class="modal-content">
            <span class="close" @onclick="CloseModal">&times;</span>
            <h2>Add Plaintiff</h2>
            <form @onsubmit="(e) => { e.PreventDefault(); AddPlaintiff(); }">
                <label for="plaintiffName">Plaintiff Name:</label>
                <input type="text" id="plaintiffName" @bind-value="newPlaintiff" required />
                <button type="submit">Add</button>
            </form>
        </div>
    </div>
}

@code {
    private string plaintiffInput = "";
    private List<string> plaintiffs = new List<string> { "John Doe", "Jane Smith", "David Johnson", "Emily Brown" };
    private List<string> suggestions = new List<string>();
    private bool showModal = false;
    private string newPlaintiff = "";

    private void SelectSuggestion(string suggestion)
    {
        plaintiffInput = suggestion;
        suggestions.Clear();
        StateHasChanged();
    }

    private void ShowModal()
    {
        showModal = true;
        StateHasChanged();
    }

    private void CloseModal()
    {
        showModal = false;
        StateHasChanged();
    }

    private void AddPlaintiff()
    {
        if (!string.IsNullOrWhiteSpace(newPlaintiff))
        {
            plaintiffs.Add(newPlaintiff);
            plaintiffInput = newPlaintiff;
            showModal = false;
            newPlaintiff = "";
            UpdateSuggestions();
            StateHasChanged();
        }
    }

    private void UpdateSuggestions()
    {
        suggestions = plaintiffs.Where(p => p.ToLower().Contains(plaintiffInput.ToLower())).ToList();
    }
}

问题现象 #

修改后的组件自动完成功能正常，但点击“Add New Plaintiff”按钮时，新增原告的模态框没有弹出。

原代码 #

<div class="autocomplete">
    <input class="form-control" list="autocompleteitems" placeholder="Select from the list or add a new Plaintiff" />
    <datalist id="autocompleteitems">
        @foreach (var suggestion in plaintiffs)
        {
            <option value="@suggestion" />
        }
    </datalist>
</div>
<button class="btn btn-primary" @onclick="ShowModal">Add New Plaintiff</button>
@if (showModal)
{
    <div class="modal show">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Plaintiff</h5>
                    <button class="btn-close" @onclick="CloseModal">&times;</button>
                </div>
                <div class="modal-body">
                    <form @onsubmit="AddPlaintiff">
                        <label for="plaintiffName">Plaintiff Name:</label>
                        <input type="text" id="plaintiffName" @bind-value="newPlaintiff" required />
                        <button class="btn btn-primary" type="submit">Add</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
}

@code {
    private string plaintiffInput = "";
    private List<string> plaintiffs = new List<string> { "John Doe", "Jane Smith", "David Johnson", "Emily Brown" };
    private List<string> suggestions = new List<string>();
    private bool showModal = false;
    private string newPlaintiff = "";

    private void SelectSuggestion(string suggestion)
    {
        plaintiffInput = suggestion;
        suggestions.Clear();
    }

    private void ShowModal()
    {
        showModal = true;
    }

    private void CloseModal()
    {
        showModal = false;
    }

    private void AddPlaintiff()
    {
        if (!string.IsNullOrWhiteSpace(newPlaintiff))
        {
            plaintiffs.Add(newPlaintiff);
            plaintiffInput = newPlaintiff;
            showModal = false;
            newPlaintiff = "";
        }
    }

    private Task OnAfter()
    {
        suggestions = plaintiffs.Where(p => p.ToLower().Contains(plaintiffInput.ToLower())).ToList();
        return Task.CompletedTask;
    }
}

问题原因及修复 #

1. 模态框无法弹出：
   • 若使用Bootstrap的modal类但未引入Bootstrap样式，模态框会被默认隐藏。要么引入Bootstrap样式，要么添加内联样式确保模态框能正常显示。
   • 按钮点击后组件可能未及时渲染，在ShowModal方法中调用StateHasChanged()强制刷新UI。
   • 表单提交会触发页面刷新，导致模态框状态丢失，需要阻止表单默认提交行为。
2. 额外问题：输入框未绑定plaintiffInput，导致选择建议后输入框内容无法同步。

修复后代码 #

<div class="autocomplete">
    <input class="form-control" 
           list="autocompleteitems" 
           @bind-value="plaintiffInput"
           placeholder="Select from the list or add a new Plaintiff" />
    <datalist id="autocompleteitems">
        @foreach (var suggestion in plaintiffs)
        {
            <option value="@suggestion" />
        }
    </datalist>
</div>
<button class="btn btn-primary" @onclick="ShowModal">Add New Plaintiff</button>

@if (showModal)
{
    <!-- 自定义模态框基础样式，确保能正常显示 -->
    <div style="position: fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center;">
        <div style="background:white; padding:2rem; border-radius:8px; width:400px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
                <h5>Add Plaintiff</h5>
                <button style="background:none; border:none; font-size:1.5rem; cursor:pointer;" @onclick="CloseModal">&times;</button>
            </div>
            <div>
                <form @onsubmit="(e) => { e.PreventDefault(); AddPlaintiff(); }">
                    <label for="plaintiffName">Plaintiff Name:</label>
                    <input type="text" id="plaintiffName" @bind-value="newPlaintiff" required style="width:100%; padding:0.5rem; margin:0.5rem 0;" />
                    <button class="btn btn-primary" type="submit" style="padding:0.5rem 1rem;">Add</button>
                </form>
            </div>
        </div>
    </div>
}

@code {
    private string plaintiffInput = "";
    private List<string> plaintiffs = new List<string> { "John Doe", "Jane Smith", "David Johnson", "Emily Brown" };
    private bool showModal = false;
    private string newPlaintiff = "";

    private void ShowModal()
    {
        showModal = true;
        StateHasChanged(); // 强制组件刷新，确保模态框显示
    }

    private void CloseModal()
    {
        showModal = false;
        StateHasChanged();
    }

    private void AddPlaintiff()
    {
        if (!string.IsNullOrWhiteSpace(newPlaintiff))
        {
            plaintiffs.Add(newPlaintiff);
            plaintiffInput = newPlaintiff;
            showModal = false;
            newPlaintiff = "";
            StateHasChanged();
        }
    }
}

内容的提问来源于stack exchange，提问作者nebula79283