.NET Core 2.0登录页：如何用asp-for在View中使用多模型

我明白你在带独立认证的.NET Core 2.0项目里遇到的痛点——登录页要同时放登录、找回密码等多个表单，想用asp-for绑定不同模型却一直卡壳，试了几种方案都没搞定对吧？

其实核心问题在于Razor View默认只能绑定一个主模型，直接用多个独立模型肯定行不通，最靠谱的解决方式是用单一ViewModel包装所有子模型，下面给你一步步的实现方案：

1. 创建包含多子模型的ViewModel #

先定义一个ViewModel，把登录、找回密码等需要的模型都作为它的属性：

public class AccountViewModel
{
    // 登录表单模型
    public LoginModel Login { get; set; }
    // 找回密码表单模型
    public ForgotPasswordModel ForgotPassword { get; set; }

    // 这里可以继续添加其他需要的表单模型，比如注册、验证码等
}

// 示例子模型（根据你项目的实际需求调整）
public class LoginModel
{
    [Required]
    [EmailAddress]
    public string Email { get; set; }

    [Required]
    [DataType(DataType.Password)]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}

public class ForgotPasswordModel
{
    [Required]
    [EmailAddress]
    public string Email { get; set; }
}

2. 控制器传递ViewModel到View #

在你的Account控制器的Login Action里，初始化这个ViewModel并传递给View：

public IActionResult Login()
{
    var viewModel = new AccountViewModel
    {
        // 初始化子模型，避免View里空引用
        Login = new LoginModel(),
        ForgotPassword = new ForgotPasswordModel()
    };
    return View(viewModel);
}

3. View里绑定多表单并使用asp-for #

在Razor View里，针对每个表单，绑定到ViewModel对应的子模型属性，用asp-for的时候要明确指定子模型路径：

@model AccountViewModel

<!-- 登录表单 -->
<form asp-action="Login" method="post">
    <h4>登录</h4>
    <div asp-validation-summary="All" class="text-danger"></div>
    
    <div class="form-group">
        <label asp-for="Login.Email"></label>
        <input asp-for="Login.Email" class="form-control" />
        <span asp-validation-for="Login.Email" class="text-danger"></span>
    </div>
    
    <div class="form-group">
        <label asp-for="Login.Password"></label>
        <input asp-for="Login.Password" class="form-control" />
        <span asp-validation-for="Login.Password" class="text-danger"></span>
    </div>
    
    <div class="form-group">
        <div class="checkbox">
            <label asp-for="Login.RememberMe">
                <input asp-for="Login.RememberMe" />
                @Html.DisplayNameFor(m => m.Login.RememberMe)
            </label>
        </div>
    </div>
    
    <button type="submit" name="action" value="Login" class="btn btn-primary">登录</button>
</form>

<!-- 找回密码表单 -->
<form asp-action="Login" method="post">
    <h4>找回密码</h4>
    <div asp-validation-summary="All" class="text-danger"></div>
    
    <div class="form-group">
        <label asp-for="ForgotPassword.Email"></label>
        <input asp-for="ForgotPassword.Email" class="form-control" />
        <span asp-validation-for="ForgotPassword.Email" class="text-danger"></span>
    </div>
    
    <button type="submit" name="action" value="ForgotPassword" class="btn btn-secondary">发送重置链接</button>
</form>

4. 控制器区分不同表单的提交 #

在Post方法里，通过按钮的name和value来判断是哪个表单提交的，然后处理对应的逻辑：

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Login(AccountViewModel viewModel, string action)
{
    switch(action)
    {
        case "Login":
            if (ModelState.IsValid)
            {
                // 处理登录逻辑，使用viewModel.Login
                var result = await _signInManager.PasswordSignInAsync(
                    viewModel.Login.Email, 
                    viewModel.Login.Password, 
                    viewModel.Login.RememberMe, 
                    lockoutOnFailure: false);
                
                if (result.Succeeded)
                {
                    return RedirectToAction("Index", "Home");
                }
                ModelState.AddModelError(string.Empty, "无效的登录尝试。");
            }
            break;
        
        case "ForgotPassword":
            if (ModelState.IsValid)
            {
                // 处理找回密码逻辑，使用viewModel.ForgotPassword
                var user = await _userManager.FindByEmailAsync(viewModel.ForgotPassword.Email);
                if (user != null && await _userManager.IsEmailConfirmedAsync(user))
                {
                    // 发送重置密码邮件等逻辑
                    return RedirectToAction("ForgotPasswordConfirmation");
                }
                ModelState.AddModelError(string.Empty, "未找到该邮箱对应的用户，或邮箱未验证。");
            }
            break;
    }
    
    // 如果验证失败或处理出错，返回原View并保留输入值
    return View(viewModel);
}

为什么之前的方案可能没生效？ #

• Partial View方案：如果只是单独渲染Partial但没把子模型正确关联到主ViewModel，asp-for会找不到正确的绑定路径；
• 多模型绑定方案：直接在View里用多个@model是不允许的，必须通过ViewModel包装；
• 单ViewModel多表单方案：可能你没正确区分表单提交的逻辑，或者asp-for的路径写错了（比如没加子模型前缀）。

这个方案在.NET Core 2.0里完全适用，只要严格按照ViewModel包装、明确绑定路径、区分提交逻辑这几步来，就能实现登录页多表单的需求啦。

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