如何在Razor文件中用公共字符串类创建动态下拉框？遇空引用错误

核心问题分析 #

1. 空引用错误：Area是组件的[Parameter]参数，默认值为null。如果父组件未传递该参数，或者组件渲染时参数还未初始化，直接访问Area.Square就会触发Object reference not set to an instance of an object异常。
2. 遍历逻辑错误：Square是单个字符串属性，不是集合/数组类型。用foreach遍历字符串会逐个输出字符，完全不符合下拉框选项的需求。

解决方案 #

1. 避免空引用：给参数加初始化或空判断

有两种方式处理：

• 方式一：在代码里初始化参数
  修改AreaLanding.razor.cs的Area参数，设置默认值：

namespace Something.Namespace.Area
{
    public partial class AreaLanding
    {
        private string SearchQuery = "";
        public List<AreaDocumentSearch> returnData = new List<AreaDocumentSearch>();

        // 给参数设置默认实例，避免null
        [Parameter]
        public AreaDocumentSearch Area { get; set; } = new AreaDocumentSearch { Id = "", Square = "" };
    }
}

• 方式二：在Razor模板里做空判断
  在下拉框代码外层添加@if(Area != null)，确保只有Area不为null时才渲染：

<div class="col">
    <div class="m-3">
        <label for="single-choice" class="form-label">Service Area</label>
        @if (Area != null)
        {
            <select class="form-control" data-trigger name="single-choice"
                    id="single-choice" placeholder="Service Area Search">
                <!-- 这里根据需求修改选项逻辑 -->
            </select>
        }
        else
        {
            <p>加载中...</p>
        }
    </div>
</div>

2. 修正下拉框选项逻辑

根据你的需求选择对应逻辑：

• 需求A：绑定单个Square值作为选项
  如果Area.Square是单个需要显示的选项，直接渲染即可：

<option value="@Area.Square">@(Area.Square ?? "未设置")</option>

用?? "未设置"处理Square为空的情况，避免显示空白选项。

• 需求B：显示多个Square选项（从returnData集合中获取）
  如果需要展示所有returnData里的Square值作为下拉选项，遍历returnData集合：

@foreach (var doc in returnData)
{
    <option value="@doc.Square">@(doc.Square ?? "空值")</option>
}

完整修改后的Razor示例 #

<div class="col">
    <div class="m-3">
        <label for="single-choice" class="form-label">Service Area</label>
        @if (Area != null)
        {
            <select class="form-control" data-trigger name="single-choice"
                    id="single-choice" placeholder="Service Area Search">
                <!-- 示例：显示returnData中的所有Square选项 -->
                @foreach (var doc in returnData)
                {
                    <option value="@doc.Square">@(doc.Square ?? "未定义")</option>
                }
                <!-- 如果需要默认选中Area的Square值，添加selected判断 -->
                @*<option value="@Area.Square" selected>@Area.Square</option>*@
            </select>
        }
        else
        {
            <p>加载中...</p>
        }
    </div>
</div>

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