AspNetCore 5.x Razor项目实现Bootstrap5.1员工搜索模态框需求

一、Razor页面布局（主页面） #

在现有模态框页面基础上补充以下结构：

@page
@model IndexModel
@{
    ViewData["Title"] = "员工搜索";
}

<div class="container mt-4">
    <!-- 主表单：展示选中的员工编号 -->
    <form>
        <div class="mb-3">
            <label for="empnoInput" class="form-label">员工编号</label>
            <div class="input-group">
                <input type="text" class="form-control" id="empnoInput" readonly>
                <button type="button" class="btn btn-primary" id="searchEmpBtn">查询员工</button>
            </div>
            <!-- 隐藏域存储选中的公司信息 -->
            <input type="hidden" id="selectedCompany" />
        </div>
    </form>

    <!-- 员工搜索模态框 -->
    <div class="modal fade" id="empSearchModal" tabindex="-1" aria-labelledby="empSearchModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="empSearchModalLabel">员工搜索</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 搜索条件表单 -->
                    <form id="empSearchForm">
                        <div class="row g-3 mb-3">
                            <div class="col-md-4">
                                <label for="company" class="form-label">公司</label>
                                <input type="text" class="form-control" id="company" name="company">
                            </div>
                            <div class="col-md-4">
                                <label for="empName" class="form-label">员工姓名</label>
                                <input type="text" class="form-control" id="empName" name="empName">
                            </div>
                            <div class="col-md-4">
                                <label for="costCenter" class="form-label">成本中心</label>
                                <input type="text" class="form-control" id="costCenter" name="costCenter">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary mb-3">搜索</button>
                    </form>

                    <!-- 搜索结果容器 -->
                    <div id="empResultContainer" class="d-none">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>公司</th>
                                    <th>员工编号</th>
                                    <th>员工姓名</th>
                                    <th>成本中心</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="empResultTableBody"></tbody>
                        </table>
                    </div>

                    <!-- 加载状态指示器 -->
                    <div id="loadingSpinner" class="d-none text-center">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>

二、JavaScript逻辑（页面底部添加） #

实现模态框控制、异步搜索、结果渲染及数据回填：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 初始化Bootstrap模态框实例
    const empSearchModal = new bootstrap.Modal(document.getElementById('empSearchModal'));
    
    // 获取页面核心元素
    const searchBtn = document.getElementById('searchEmpBtn');
    const searchForm = document.getElementById('empSearchForm');
    const resultContainer = document.getElementById('empResultContainer');
    const resultTableBody = document.getElementById('empResultTableBody');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const empnoInput = document.getElementById('empnoInput');
    const selectedCompany = document.getElementById('selectedCompany');

    // 点击查询按钮打开模态框
    searchBtn.addEventListener('click', () => empSearchModal.show());

    // 处理搜索表单提交
    searchForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        // 显示加载状态，清空旧结果
        loadingSpinner.classList.remove('d-none');
        resultContainer.classList.add('d-none');
        resultTableBody.innerHTML = '';

        // 收集搜索参数
        const formData = new FormData(searchForm);
        const queryParams = new URLSearchParams(formData);

        try {
            // 异步请求后端搜索接口
            const response = await fetch(`/Employee/Search?${queryParams}`);
            if (!response.ok) throw new Error('搜索请求失败');
            
            const employees = await response.json();

            // 渲染搜索结果
            if (employees.length > 0) {
                employees.forEach(emp => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${emp.company}</td>
                        <td>${emp.empno}</td>
                        <td>${emp.empName}</td>
                        <td>${emp.costCenter}</td>
                        <td>
                            <button class="btn btn-sm btn-success select-btn" 
                                    data-company="${emp.company}" 
                                    data-empno="${emp.empno}">
                                选择
                            </button>
                        </td>
                    `;
                    resultTableBody.appendChild(row);
                });

                // 绑定选择按钮事件
                document.querySelectorAll('.select-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        // 获取选中的公司和员工编号
                        const company = this.dataset.company;
                        const empno = this.dataset.empno;
                        
                        // 回填到主表单
                        empnoInput.value = empno;
                        selectedCompany.value = company;
                        
                        // 关闭模态框
                        empSearchModal.hide();
                    });
                });

                resultContainer.classList.remove('d-none');
            } else {
                resultTableBody.innerHTML = '<tr><td colspan="5" class="text-center">未找到匹配的员工</td></tr>';
                resultContainer.classList.remove('d-none');
            }
        } catch (err) {
            resultTableBody.innerHTML = `<tr><td colspan="5" class="text-center text-danger">${err.message}</td></tr>`;
            resultContainer.classList.remove('d-none');
        } finally {
            loadingSpinner.classList.add('d-none');
        }
    });
</script>

三、后端Razor Page接口（处理搜索请求） #

创建Pages/Employee/Search.cshtml.cs文件，实现异步查询并返回JSON结果：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace YourProjectNamespace.Pages.Employee
{
    public class SearchModel : PageModel
    {
        // 注入你的数据库上下文（替换成实际上下文类）
        // private readonly AppDbContext _dbContext;

        // public SearchModel(AppDbContext dbContext)
        // {
        //     _dbContext = dbContext;
        // }

        // 员工数据传输对象
        public class EmployeeDto
        {
            public string Company { get; set; }
            public string Empno { get; set; }
            public string EmpName { get; set; }
            public string CostCenter { get; set; }
        }

        // 处理GET请求，接收搜索参数
        public async Task<IActionResult> OnGetAsync(string company, string empName, string costCenter)
        {
            // 替换为实际的数据库查询逻辑
            // var employees = await _dbContext.Employees
            //     .Where(e => 
            //         (string.IsNullOrEmpty(company) || e.Company.Contains(company)) &&
            //         (string.IsNullOrEmpty(empName) || e.EmpName.Contains(empName)) &&
            //         (string.IsNullOrEmpty(costCenter) || e.CostCenter.Contains(costCenter))
            //     )
            //     .Select(e => new EmployeeDto
            //     {
            //         Company = e.Company,
            //         Empno = e.Empno,
            //         EmpName = e.EmpName,
            //         CostCenter = e.CostCenter
            //     })
            //     .ToListAsync();

            // 测试数据，实际使用时删除
            var employees = new List<EmployeeDto>
            {
                new EmployeeDto { Company = "A公司", Empno = "EMP001", EmpName = "张三", CostCenter = "CC001" },
                new EmployeeDto { Company = "B公司", Empno = "EMP002", EmpName = "李四", CostCenter = "CC002" }
            };

            return new JsonResult(employees);
        }
    }
}

关键说明 #

1. 模态框状态控制：搜索过程中仅显示加载指示器，模态框始终保持打开，仅点击「选择」或「关闭」按钮时关闭。
2. 异步请求：使用原生fetch替代ScriptManager实现无刷新数据交互，适配ASP.NET Core Razor项目的前端规范。
3. 数据回填：选择员工后，将公司信息存入隐藏域、员工编号填入主输入框，满足业务数据返回需求。
4. 异常处理：捕获请求异常并在表格中展示错误信息，优化用户体验。

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