如何用C# Partials实现模态框式的地区选择功能

核心思路 #

• Partial视图仅负责提供模态框的HTML结构，显示/隐藏逻辑由前端JS+后端条件渲染控制
• 用Session存储用户已选地区，未选择时强制弹出模态框，禁止跳过
• 地区选择后，所有数据查询依赖Session中的地区标识实现同步

步骤1：创建地区选择Partial视图 #

创建_RegionSelectorPartial.cshtml，以Bootstrap模态框为例（自定义CSS也可实现）：

<div class="modal fade" id="regionModal" tabindex="-1" aria-labelledby="regionModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="regionModalLabel">请选择所在地区</h5>
            </div>
            <div class="modal-body">
                <form asp-action="SetRegion" method="post">
                    <div class="mb-3">
                        <label for="regionId" class="form-label">地区</label>
                        <select class="form-select" id="regionId" name="regionId" required>
                            <option value="">请选择</option>
                            <option value="1">华东地区</option>
                            <option value="2">华北地区</option>
                            <option value="3">华南地区</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">确认选择</button>
                </form>
            </div>
        </div>
    </div>
</div>

步骤2：主视图条件渲染Partial #

在布局页（如_Layout.cshtml）或首页视图中，判断Session是否存在地区标识，不存在则渲染Partial：

@if (HttpContext.Session.GetString("SelectedRegionId") == null)
{
    <partial name="_RegionSelectorPartial" />
}

<!-- 应用内容容器 -->
<div id="app-content">
    @RenderBody()
</div>

步骤3：前端自动弹出模态框 #

在布局页底部添加JS，页面加载时自动触发模态框显示：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const modalElement = document.getElementById('regionModal');
        if (modalElement) {
            const regionModal = new bootstrap.Modal(modalElement);
            regionModal.show();
        }
    });
</script>

若不用Bootstrap，可自定义模态框样式：给模态框容器添加display: block，同时添加全屏遮罩层阻止用户操作应用内容

步骤4：后端处理地区选择 #

在Controller中添加SetRegion方法，存储地区到Session并重定向：

[HttpPost]
public IActionResult SetRegion(int regionId)
{
    // 验证地区ID合法性
    if (regionId <= 0)
    {
        ModelState.AddModelError("", "请选择有效的地区");
        return RedirectToAction("Index");
    }

    // 将地区ID存入Session
    HttpContext.Session.SetString("SelectedRegionId", regionId.ToString());
    // 可选：若为登录用户，可将地区标识存入Claims实现持久化
    // var claimsIdentity = User.Identity as ClaimsIdentity;
    // claimsIdentity?.AddClaim(new Claim("RegionId", regionId.ToString()));

    return RedirectToAction("Index");
}

步骤5：数据同步实现 #

后续所有数据查询操作，从Session获取地区ID过滤对应数据：

public IActionResult Index()
{
    var regionId = HttpContext.Session.GetString("SelectedRegionId");
    if (string.IsNullOrEmpty(regionId))
    {
        return View(); // 此时会自动渲染模态框
    }

    // 根据地区ID查询对应数据
    var regionData = _dbContext.BusinessData.Where(d => d.RegionId == int.Parse(regionId)).ToList();
    return View(regionData);
}

额外优化点 #

• 封装地区校验逻辑为ActionFilter，在所有需要地区的Action前自动校验，未选择则跳转至选择流程
• 若需持久化用户选择，可将地区标识存入Cookie，下次访问自动读取
• 自定义模态框时，确保遮罩层层级高于应用内容，彻底禁止未选择地区时的操作

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