如何在Razor Page中根据用户选择隐藏div元素：联动显示州字段

方法1：ASP.NET MVC服务器端回发实现 #

这是传统Razor视图的最简单方案，通过表单回发让服务器判断国家选择，动态控制州字段的显示，完全不用写JS。

修改你的表单代码，给国家下拉框添加onchange事件触发表单提交，然后用Razor条件判断包裹州字段：

<div class="form-group col-sm-4 mt-4">
    <label asp-for="Form.Country" class="control-label"></label>
    <select asp-for="Form.Country" class="form-control" onchange="this.form.submit()">
        <option disabled selected>Choose your Country</option>
        <option>Canada</option>
        <option>United States</option>
        <option>Mexico</option>
    </select>
    <span asp-validation-for="Form.Country" class="text-danger"></span>
</div>

@if (Model.Form.Country == "United States")
{
<div class="form-group col-sm-4 mt-4">
    <label asp-for="Form.State" class="control-label"></label>
    <select asp-for="Form.State" asp-items="Model.States" class="form-select">
        <option disabled selected>Choose your State</option>
    </select>
    <span asp-validation-for="Form.State" class="text-danger"></span>
</div>
}

<div class="form-group col-sm-4 mt-4">
    <label asp-for="Form.City" class="control-label"></label>
    <input asp-for="Form.City" class="form-control" />
    <span asp-validation-for="Form.City" class="text-danger"></span>
</div>

说明：用户选择国家后，页面会轻微刷新，服务器根据提交的Country值决定是否渲染州字段，完全依赖服务器端逻辑，无需任何自定义JS。

方法2：CSS结合服务器端状态控制 #

本质和方法1类似，只是用CSS的display属性控制显示/隐藏，同样依赖表单回发：

<div class="form-group col-sm-4 mt-4">
    <label asp-for="Form.Country" class="control-label"></label>
    <select asp-for="Form.Country" class="form-control" onchange="this.form.submit()">
        <option disabled selected>Choose your Country</option>
        <option>Canada</option>
        <option>United States</option>
        <option>Mexico</option>
    </select>
    <span asp-validation-for="Form.Country" class="text-danger"></span>
</div>

<div class="form-group col-sm-4 mt-4" style="@(Model.Form.Country == "United States" ? "display:block;" : "display:none;")">
    <label asp-for="Form.State" class="control-label"></label>
    <select asp-for="Form.State" asp-items="Model.States" class="form-select">
        <option disabled selected>Choose your State</option>
    </select>
    <span asp-validation-for="Form.State" class="text-danger"></span>
</div>

<div class="form-group col-sm-4 mt-4">
    <label asp-for="Form.City" class="control-label"></label>
    <input asp-for="Form.City" class="form-control" />
    <span asp-validation-for="Form.City" class="text-danger"></span>
</div>

说明：州字段始终会被渲染到页面，只是通过CSS控制显示状态，适合需要保留DOM元素但隐藏的场景，同样依赖表单回发刷新状态。

方法3：Blazor组件实现（无JS交互式体验） #

如果你的项目是Blazor（Server或WebAssembly），可以用Blazor的双向绑定实现无JS的实时交互，不会有页面刷新：

创建一个LocationForm.razor组件：

<div class="form-group col-sm-4 mt-4">
    <label asp-for="SelectedCountry" class="control-label"></label>
    <select @bind="SelectedCountry" class="form-control">
        <option disabled selected>Choose your Country</option>
        <option>Canada</option>
        <option>United States</option>
        <option>Mexico</option>
    </select>
</div>

@if (SelectedCountry == "United States")
{
<div class="form-group col-sm-4 mt-4">
    <label asp-for="SelectedState" class="control-label"></label>
    <select @bind="SelectedState" asp-items="States" class="form-select">
        <option disabled selected>Choose your State</option>
    </select>
</div>
}

<div class="form-group col-sm-4 mt-4">
    <label asp-for="City" class="control-label"></label>
    <input @bind="City" class="form-control" />
</div>

@code {
    [Parameter] public string SelectedCountry { get; set; }
    [Parameter] public string SelectedState { get; set; }
    [Parameter] public string City { get; set; }
    [Parameter] public IEnumerable<SelectListItem> States { get; set; } = Enumerable.Empty<SelectListItem>();
}

然后在你的Razor页面（或Blazor页面）中引用该组件：

<LocationForm SelectedCountry="@Model.Form.Country" 
              SelectedState="@Model.Form.State" 
              City="@Model.Form.City"
              States="@Model.States" />

说明：Blazor会自动处理UI更新，用户选择国家后州字段会实时显示/隐藏，全程无需编写任何JavaScript，也没有页面刷新。

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