将MVC ValidationMessageFor添加到单独的Div标签

debugcn 发表于 Dev

编码

有没有一种方法可以将所有@ 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>
}

代码

尽管我仍然对您的html外观和这些局部视图感到困惑，但还是会对此加以破解。在视图页面加载时使用.html（）方法。例如，如果您在上面列出的视图中，则向您的验证div中添加一个id为

<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函数，复制从HTML ValidationDiv到ValidationHolder

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。