如何让ASP.NET Core 7.0 Razor Pages全局显示ComboBox并处理交互？

因为_Layout.cshtml是全局布局页，直接在里面写表单会面临数据绑定、请求处理分离的问题，推荐用ViewComponent来封装这个ComboBox组件，它能独立处理数据加载和逻辑，完美适配全局复用场景。

步骤1：创建ViewComponent封装ComboBox #

ViewComponent是Razor Pages中用于复用UI组件的最佳方式，支持独立的数据源和逻辑。

1.1 编写ViewComponent类 #

在项目中创建Views/Shared/Components/GlobalComboBox目录，添加GlobalComboBoxViewComponent.cs类：

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

namespace YourAppName.Views.Shared.Components.GlobalComboBox
{
    public class GlobalComboBoxViewComponent : ViewComponent
    {
        // 注入数据源服务，比如你的数据库上下文
        private readonly AppDbContext _dbContext;

        public GlobalComboBoxViewComponent(AppDbContext dbContext)
        {
            _dbContext = dbContext;
        }

        public async Task<IViewComponentResult> InvokeAsync()
        {
            // 加载ComboBox选项数据，这里示例从数据库读取
            var options = await _dbContext.CategoryOptions.ToListAsync();
            
            // 从Session读取上次选中的ID，保持选中状态（可选）
            var selectedId = HttpContext.Session.GetInt32("SelectedOptionId");
            ViewData["SelectedOptionId"] = selectedId;
            
            return View(options);
        }
    }
}

1.2 编写组件视图 #

在同一目录下添加Default.cshtml视图，负责渲染ComboBox和表单：

<form asp-page="/GlobalComboBoxSubmit" method="post" class="d-flex align-items-center gap-2">
    <select name="SelectedOptionId" class="form-select form-select-sm">
        <option value="">请选择选项</option>
        @foreach (var option in Model)
        {
            <option value="@option.Id" 
                    @(ViewData["SelectedOptionId"]?.ToString() == option.Id.ToString() ? "selected" : "")>
                @option.Name
            </option>
        }
    </select>
    <button type="submit" class="btn btn-sm btn-primary">确认</button>
</form>

步骤2：在_Layout.cshtml中引用组件 #

打开Views/Shared/_Layout.cshtml，在需要显示ComboBox的位置（比如导航栏内）添加：

@await Component.InvokeAsync("GlobalComboBox")

步骤3：创建提交处理页面 #

专门创建一个页面来处理ComboBox的提交请求，避免和其他页面逻辑冲突。

3.1 编写PageModel #

在Pages目录下添加GlobalComboBoxSubmit.cshtml.cs：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace YourAppName.Pages
{
    public class GlobalComboBoxSubmitModel : PageModel
    {
        public IActionResult OnPost(int? SelectedOptionId)
        {
            // 处理提交逻辑：比如保存选中值到Session、触发业务操作等
            if (SelectedOptionId.HasValue)
            {
                HttpContext.Session.SetInt32("SelectedOptionId", SelectedOptionId.Value);
            }
            else
            {
                HttpContext.Session.Remove("SelectedOptionId");
            }

            // 重定向回提交前的页面
            var refererUrl = Request.Headers["Referer"].ToString();
            return Redirect(string.IsNullOrEmpty(refererUrl) ? "/" : refererUrl);
        }
    }
}

3.2 编写页面视图 #

GlobalComboBoxSubmit.cshtml可以为空，只需要基础结构：

@page
@model YourAppName.Pages.GlobalComboBoxSubmitModel

步骤4：配置Session（可选） #

如果需要保持选中状态，要在Program.cs中配置Session支持：

// 注册Session服务
builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromHours(2);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});

// 在管道中启用Session（放在UseRouting之后）
app.UseSession();

关键注意点 #

• 组件的数据源可以是任何服务，不限于数据库，只需在ViewComponent的构造函数中注入即可。
• 提交处理页面的路由要和表单的asp-page属性一致，避免404错误。
• 如果不需要持久化选中状态，可以去掉Session相关代码，直接处理提交逻辑后重定向。

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