页面与表单双模型场景下如何使用ValidationMessageFor？

这个双模型场景下的验证消息问题我太熟悉了，很多开发者刚接触分层模型的时候都会踩这个坑。别担心，给你几个靠谱的解决方案，从规范到灵活处理都有：

最根本的解决方式是做一个复合ViewModel，把页面渲染需要的模型和表单提交的模型都包裹进去。这样视图就能通过同一个模型访问到所有需要的属性，ValidationMessageFor也能正常工作。

举个例子：

// 页面基础模型（用于加载页面内容）
public class PageViewModel
{
    public string PageTitle { get; set; }
    public string PageDescription { get; set; }
}

// 表单提交模型（带验证特性）
public class FormSubmitViewModel
{
    [Required(ErrorMessage = "用户名不能为空")]
    [StringLength(20, ErrorMessage = "用户名长度不能超过20位")]
    public string Username { get; set; }

    [Required(ErrorMessage = "密码不能为空")]
    [MinLength(6, ErrorMessage = "密码长度不能少于6位")]
    public string Password { get; set; }
}

// 复合ViewModel，整合上面两个模型
public class PageWithFormViewModel
{
    public PageViewModel PageData { get; set; }
    public FormSubmitViewModel FormData { get; set; }
}

然后在视图里这样用：

@model PageWithFormViewModel

<!-- 页面内容部分，用PageData -->
<h1>@Model.PageData.PageTitle</h1>
<p>@Model.PageData.PageDescription</p>

<!-- 表单部分，用FormData -->
<form asp-action="SubmitForm">
    <div class="form-group">
        <label asp-for="FormData.Username"></label>
        <input asp-for="FormData.Username" class="form-control" />
        @Html.ValidationMessageFor(m => m.FormData.Username, "", new { @class = "text-danger" })
    </div>
    <div class="form-group">
        <label asp-for="FormData.Password"></label>
        <input asp-for="FormData.Password" class="form-control" />
        @Html.ValidationMessageFor(m => m.FormData.Password, "", new { @class = "text-danger" })
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

控制器里接收的时候直接用复合模型，或者单独接收表单模型（只要name属性对应上就行），验证不通过时返回带复合模型的视图即可。

如果不想创建新的复合ViewModel，也可以把表单模型通过ViewData或ViewBag传递到视图里，然后手动指定验证消息的目标字段。

注意要确保input的name属性和表单提交的参数名一致，同时给ValidationMessageFor指定正确的字段标识：

@model PageViewModel

<!-- 页面内容 -->
<h1>@Model.PageTitle</h1>

@{
    // 从ViewData取出表单模型
    var formModel = ViewData["FormModel"] as FormSubmitViewModel ?? new FormSubmitViewModel();
}

<form asp-action="SubmitForm">
    <div class="form-group">
        <label>用户名</label>
        <input type="text" name="Username" id="Username" value="@formModel.Username" class="form-control" />
        <!-- 用表达式指向formModel的属性，同时指定data-valmsg-for匹配input的name -->
        @Html.ValidationMessageFor(_ => formModel.Username, "", new { @class = "text-danger", data_valmsg_for = "Username" })
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="password" name="Password" id="Password" class="form-control" />
        @Html.ValidationMessageFor(_ => formModel.Password, "", new { @class = "text-danger", data_valmsg_for = "Password" })
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

控制器里的逻辑大概是这样：

[HttpGet]
public IActionResult Index()
{
    var pageModel = GetPageData(); // 获取页面基础数据
    ViewData["FormModel"] = new FormSubmitViewModel(); // 初始化表单模型
    return View(pageModel);
}

[HttpPost]
public IActionResult SubmitForm(FormSubmitViewModel formModel)
{
    if (!ModelState.IsValid)
    {
        var pageModel = GetPageData();
        ViewData["FormModel"] = formModel; // 把验证失败的表单模型传回去
        return View("Index", pageModel);
    }
    // 处理提交逻辑
    return RedirectToAction("Success");
}

如果上面两种方式都不适合，还可以直接手动写验证消息的HTML元素，利用ASP.NET MVC的验证机制（jQuery Validation）来绑定错误信息。

只需要确保span的data-valmsg-for属性和input的name属性一致：

@model PageViewModel

<!-- 页面内容 -->
<h1>@Model.PageTitle</h1>

<form asp-action="SubmitForm">
    <div class="form-group">
        <label>用户名</label>
        <input type="text" name="Username" id="Username" class="form-control" />
        <span class="text-danger field-validation-valid" data-valmsg-for="Username" data-valmsg-replace="true"></span>
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="password" name="Password" id="Password" class="form-control" />
        <span class="text-danger field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

这种方式不需要依赖ViewModel的属性，只要服务器端验证失败时把错误添加到ModelState里，客户端的验证框架就会自动把错误信息渲染到对应的span里。

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