Question

有没有办法将所有@ Html.ValidationMessageFor块添加到MVC父_layout.cshtml页面的页脚中的div容器？下面的代码显示了底部div中的验证消息，但我想使用jQuery在_Layout.cshtml DIV的页脚中显示它们。

@model Proj.ViewModels.ApplicationControllerViewModel
@Html.ValidationSummary(true)

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "Details" }))
{
    <div id="divApplication">
        <div class="editor-label">
            @Html.LabelFor(model => model.Applicaiton.Name, new { @class = "formLabel" })
            @Html.HiddenFor(model => model.Applicaiton.ID, new { @class = "Application-ID" }) 
            @Html.TextBoxFor(model => model.Applicaiton.Name, new { @class = "Application-Name" })
        </div>
        <br />
        <div class="editor-label">
            @Html.LabelFor(model => model.ControllerList, new { @class = "formLabel" })
            @Html.DropDownList("ControllerList", Model.ControllerList, new { @class = "Application-ControllerList"})
        </div>
        <br />
        <div class="editor-label">
            @Html.LabelFor(model => model.Applicaiton.Abbreviation, new { @class = "formLabel" }) 
            @Html.TextBoxFor(model => model.Applicaiton.Abbreviation, new { @class = "Application-Abbreviation" })
        </div>
        <br />
        <div class="editor-label">
            @Html.LabelFor(model => model.Applicaiton.Description, new { @class = "formLabel" }) 
            @Html.TextAreaFor(model => model.Applicaiton.Description, new { @class = "Application-Description", rows = 10, cols = 60 })
        </div>
        <br />
        <div class="editor-label">
            @Html.Label("Deployed Date", new { @class = "formLabel" })
            @Html.TextBoxFor(model => model.Applicaiton.DeployedOn, "{0:MM/dd/yyyy}", new { @class = "Application-DeployedOn" })
        </div>
        <div>
            @Html.ValidationMessageFor(model => model.Applicaiton.Name)
            @Html.ValidationMessageFor(model => model.Applicaiton.Abbreviation)
            @Html.ValidationMessageFor(model => model.Applicaiton.Description)
            @Html.ValidationMessageFor(model => model.Applicaiton.DeployedOn)
        </div>
    </div>
}

Answer 1

我会使用内置功能通过@RenderSection中的_Layout.cshtml执行此操作：

_Layout.cshtml（例如简化）

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<div id="content">
   @RenderBody()
</div>
<div>
   @RenderSection("ValidationMessages", false)
</div>

</body>
</html>

查看

@model Proj.ViewModels.ApplicationControllerViewModel @Html.ValidationSummary(true) @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "Details" })) { <div id="divApplication"> <div class="editor-label"> @Html.LabelFor(model => model.Applicaiton.Name, new { @class = "formLabel" }) @Html.HiddenFor(model => model.Applicaiton.ID, new { @class = "Application-ID" }) @Html.TextBoxFor(model => model.Applicaiton.Name, new { @class = "Application-Name" }) </div> <br /> <div class="editor-label"> @Html.LabelFor(model => model.ControllerList, new { @class = "formLabel" }) @Html.DropDownList("ControllerList", Model.ControllerList, new { @class = "Application-ControllerList"}) </div> <br /> <div class="editor-label"> @Html.LabelFor(model => model.Applicaiton.Abbreviation, new { @class = "formLabel" }) @Html.TextBoxFor(model => model.Applicaiton.Abbreviation, new { @class = "Application-Abbreviation" }) </div> <br /> <div class="editor-label"> @Html.LabelFor(model => model.Applicaiton.Description, new { @class = "formLabel" }) @Html.TextAreaFor(model => model.Applicaiton.Description, new { @class = "Application-Description", rows = 10, cols = 60 }) </div> <br /> <div class="editor-label"> @Html.Label("Deployed Date", new { @class = "formLabel" }) @Html.TextBoxFor(model => model.Applicaiton.DeployedOn, "{0:MM/dd/yyyy}", new { @class = "Application-DeployedOn" }) </div> </div> } @section ValidationMessages { @Html.ValidationMessageFor(model => model.Applicaiton.Name) @Html.ValidationMessageFor(model => model.Applicaiton.Abbreviation) @Html.ValidationMessageFor(model => model.Applicaiton.Description) @Html.ValidationMessageFor(model => model.Applicaiton.DeployedOn) }

Answer 2

即使我仍然对你的html外观和这些局部视图的看法感到困惑，也会对此采取行动。在页面加载视图时使用 .html（）方法。例如，如果您在上面列出的视图中，请将 id 添加到验证div中

<div id="ValidationDiv">
        @Html.ValidationMessageFor(model => model.Applicaiton.Name)
        @Html.ValidationMessageFor(model => model.Applicaiton.Abbreviation)
        @Html.ValidationMessageFor(model => model.Applicaiton.Description)
        @Html.ValidationMessageFor(model => model.Applicaiton.DeployedOn)
 </div>

您希望在包含输入的视图的所有验证div上放置相同的 id 。然后在页脚区域的_Layout视图中设置一个ID为

的空div

<div id="ValidationHolder">

</div>

然后使用输入只是一个Javascript函数来bak到我们的视图，该函数将html从 ValidationDiv 复制到 ValidationHolder

$(document).ready(function() {
    var partialViewDivHtml = $('#ValidationDiv').html();
    var layoutDiv = $($'#ValidationHolder');
    layoutDiv.html(partialVIewDivHtml);
})

添加MVC ValidationMessageFor以分隔Div标签

2 个答案: