You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

ASP.NET Core登录按钮点击无响应排查及员工CRUD项目实现指南

ASP.NET Core登录按钮点击无响应的解决方法

常见排查方向

  • 前端验证/JS错误:打开浏览器开发者工具(F12),检查控制台是否存在JS报错,比如登录表单提交事件被阻止、jQuery等依赖未加载、表单验证逻辑异常。
  • 表单提交配置问题:确认登录表单的methodpostasp-action指向正确的登录Action(默认是Account/LoginIdentity/Account/Login),未被前端代码(如preventDefault())拦截提交行为。
  • Identity配置缺失:检查Program.cs中是否正确配置ASP.NET Core Identity服务:
    builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
        .AddEntityFrameworkStores<ApplicationDbContext>();
    
    且中间件顺序正确:
    app.UseAuthentication();
    app.UseAuthorization();
    
  • 数据库连接问题:核对appsettings.json中的连接字符串是否正确,数据库服务是否正常运行,Identity相关表(AspNetUsers、AspNetRoles等)是否已生成。
  • 权限/路由拦截:确认登录Action未被额外的[Authorize]特性标记,避免未登录用户无法访问登录接口。
  • 浏览器缓存/Cookie问题:清除浏览器缓存和Cookie,尝试用隐身模式重新登录。

带角色权限的员工CRUD项目分步实现(辅助排查权限/配置问题)

项目基础信息

  • 技术栈:ASP.NET Core MVC + Entity Framework Core + ASP.NET Core Identity + SQL Server
  • 角色权限:管理员(完整CRUD权限)| 人力资源(仅查看权限)

步骤1:创建项目并安装NuGet包

创建项目(Visual Studio中)

  • 文件 → 新建 → 项目
  • 选择ASP.NET Core Web App(Model-View-Controller)
  • 项目名称:EmployeeCRUD
  • 身份验证类型:选择单个用户账户
  • 创建项目

安装NuGet包(程序包管理器控制台)

Install-Package Microsoft.EntityFrameworkCore.SqlServer
Install-Package Microsoft.EntityFrameworkCore.Tools

步骤2:配置数据库连接字符串

appsettings.json中添加连接字符串:

"ConnectionStrings": {
  "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=EmployeeDB;Trusted_Connection=True;"
}

步骤3:创建Employee模型

创建Models/Employee.cs文件:

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Department { get; set; }
    public string Email { get; set; }
    public decimal Salary { get; set; }
}

步骤4:更新DbContext

Data/ApplicationDbContext.cs中添加Employee实体集:

public class ApplicationDbContext : IdentityDbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
        : base(options) { }

    public DbSet<Employee> Employees { get; set; }
}

步骤5:初始化角色(Admin & HR)

Program.csbuilder.Build()之后、app.Run()之前添加角色初始化代码:

using (var scope = app.Services.CreateScope())
{
    var roleManager = scope.ServiceProvider.GetRequiredService<RoleManager<IdentityRole>>();
    string[] roles = { "Admin", "HR" };
    foreach (var role in roles)
    {
        if (!await roleManager.RoleExistsAsync(role))
            await roleManager.CreateAsync(new IdentityRole(role));
    }
}

步骤6:执行数据库迁移

在程序包管理器控制台中执行命令:

Add-Migration InitialCreate
Update-Database

步骤7:创建Employee控制器

创建Controllers/EmployeeController.cs,添加权限控制:

[Authorize]
public class EmployeeController : Controller
{
    private readonly ApplicationDbContext _db;
    public EmployeeController(ApplicationDbContext db) => _db = db;

    // HR和管理员均可访问
    public async Task<IActionResult> Index()
        => View(await _db.Employees.ToListAsync());

    // 仅管理员可访问
    [Authorize(Roles = "Admin")]
    public IActionResult Create() => View();

    [HttpPost, Authorize(Roles = "Admin")]
    public async Task<IActionResult> Create(Employee emp)
    {
        _db.Employees.Add(emp);
        await _db.SaveChangesAsync();
        return RedirectToAction("Index");
    }

    [Authorize(Roles = "Admin")]
    public async Task<IActionResult> Edit(int id)
        => View(await _db.Employees.FindAsync(id));

    [HttpPost, Authorize(Roles = "Admin")]
    public async Task<IActionResult> Edit(Employee emp)
    {
        _db.Employees.Update(emp);
        await _db.SaveChangesAsync();
        return RedirectToAction("Index");
    }

    [Authorize(Roles = "Admin")]
    public async Task<IActionResult> Delete(int id)
    {
        var emp = await _db.Employees.FindAsync(id);
        _db.Employees.Remove(emp);
        await _db.SaveChangesAsync();
        return RedirectToAction("Index");
    }
}

步骤8:创建视图

Views/Employee/文件夹下创建以下视图:

Index.cshtml(区分角色显示操作按钮)

@model IEnumerable<Employee>
<h2>员工列表</h2>
@if (User.IsInRole("Admin"))
{
    <a asp-action="Create" class="btn btn-primary">添加员工</a>
}
<table class="table">
    <tr><th>姓名</th><th>部门</th><th>邮箱</th><th>薪资</th><th>操作</th></tr>
    @foreach (var e in Model)
    {
        <tr>
            <td>@e.Name</td><td>@e.Department</td>
            <td>@e.Email</td><td>@e.Salary</td>
            @if (User.IsInRole("Admin"))
            {
                <td>
                    <a asp-action="Edit" asp-route-id="@e.Id">编辑</a> |
                    <a asp-action="Delete" asp-route-id="@e.Id"
                       onclick="return confirm('确定要删除吗?')">删除</a>
                </td>
            }
        </tr>
    }
</table>

Create.cshtml和Edit.cshtml

创建包含姓名、部门、邮箱、薪资字段的基础表单(使用asp-for绑定模型属性)。


步骤9:为用户分配角色

用户注册后,可通过以下方式分配角色:

  • 手动修改数据库:先从AspNetUsers获取用户ID,从AspNetRoles获取角色ID,执行SQL语句:
    INSERT INTO AspNetUserRoles VALUES ('userId', 'roleId')
    
  • 扩展注册功能,添加角色选择表单;或创建管理员页面批量分配角色。

步骤10:测试权限

  • 运行应用程序
  • 使用管理员账户登录:可查看并使用添加/编辑/删除所有操作按钮
  • 使用HR账户登录:仅能查看员工列表,无操作按钮

内容的提问来源于stack exchange,提问作者Sourav Bhatia

火山引擎 最新活动