如何在ASP.NET MVC中合并Login与Email为单个输入框？

嘿，我来帮你搞定这个需求！你想要的一个输入框同时接收登录名或邮箱的功能完全可以实现，但你当前尝试的@Html.LabelFor(m => m.User.Login +" or "+ m.User.Email)这种写法是行不通的——因为LabelFor、TextBoxFor这类HtmlHelper方法需要的是指向模型属性的表达式树，而不是拼接的字符串。下面是具体的实现步骤：

1. 调整你的ViewModel #

首先，在你的用户模型（或者专门的登录ViewModel）中添加一个新的属性，用来绑定这个二合一的输入框。我们可以给它加上Display特性来设置标签文本，同时添加必要的验证：

public class LoginViewModel
{
    [Display(Name = "Login or Email")]
    [Required(ErrorMessage = "Please enter your login name or email")]
    public string LoginOrEmail { get; set; }

    [Required(ErrorMessage = "Please enter your password")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}

2. 更新前端表单代码 #

现在你可以直接在视图中使用这个新属性来生成标签、输入框和验证信息，代码会更简洁规范：

@model LoginViewModel

using (Html.BeginForm("Login", "Account", FormMethod.Post)) {
    <div>
        @Html.LabelFor(m => m.LoginOrEmail)
        @Html.TextBoxFor(m => m.LoginOrEmail)
        @Html.ValidationMessageFor(m => m.LoginOrEmail)
    </div>
    <div>
        @Html.LabelFor(m => m.Password)
        @Html.PasswordFor(m => m.Password) <!-- 这里用PasswordFor更合适，会生成type="password"的输入框 -->
        @Html.ValidationMessageFor(m => m.Password)
    </div>
    <input type="submit" value="Sign in" />
    <br />
    @Html.ActionLink("Sign Up", "SignUp")
}

3. 后端处理登录逻辑 #

在你的登录Action中，拿到LoginOrEmail的值后，需要判断用户输入的是登录名还是邮箱，然后去数据库中查询对应的用户。举个简单的例子：

[HttpPost]
public ActionResult Login(LoginViewModel model)
{
    if (!ModelState.IsValid)
    {
        return View(model);
    }

    // 判断输入是否为邮箱格式
    var isEmail = Regex.IsMatch(model.LoginOrEmail, @"^[^@\s]+@[^@\s]+\.[^@\s]+$");
    User user = null;

    if (isEmail)
    {
        user = db.Users.FirstOrDefault(u => u.Email == model.LoginOrEmail);
    }
    else
    {
        user = db.Users.FirstOrDefault(u => u.Login == model.LoginOrEmail);
    }

    // 后续的密码验证、登录逻辑...
    if (user != null && VerifyPassword(user.PasswordHash, model.Password))
    {
        // 登录成功，跳转到主页
        return RedirectToAction("Index", "Home");
    }
    else
    {
        ModelState.AddModelError("", "Invalid login credentials");
        return View(model);
    }
}

额外提示 #

• 如果你不想新增ViewModel属性，也可以直接手动写HTML标签（比如<label>Login or Email</label>和<input name="LoginOrEmail" />），但这种方式不符合MVC的强类型视图规范，也没法直接使用HtmlHelper的验证功能，所以更推荐新增ViewModel属性的方式。
• 可以给LoginOrEmail添加自定义验证属性，在服务器端验证输入的内容是否对应某个用户的登录名或邮箱，这样能提前给用户反馈错误信息。

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