Custom ValidationSummary模板Asp.net MVC 3

Question

我正在与Asp.Net MVC3合作开展一个项目

在我拥有的视图中@Html.ValidationSummary(true),通常它产生

<div class="validation-summary-errors">
    <ul>
        <li>Something bad Happened!</li>
    </ul>
</div>

如何将此ValidationSummary扩展到MyValidationSummary并生成如下所示的Html代码模板:

<div class="notification warning"> 
    <span></span> 
    <div class="text"> <p>Something bad Happened!</p> </div> 
</div>

Answer 1

我的方法是使用自定义ValidationSummary.cshtml:

@model ModelStateDictionary

@if(!Model.IsValid)
{
    <div class="validation-summary-errors">
        <ul>
            @foreach (var modelError in 
                     Model.SelectMany(keyValuePair => keyValuePair.Value.Errors))
            {
                <li>@modelError.ErrorMessage</li>
            }
        </ul>
    </div>
}

将此部分视图放在您的共享文件夹中,并从您的代码中引用它:

@Html.Partial("_ValidationSummary", ViewData.ModelState);

这样你就可以完全控制你的html.

Answer 2

此问题详细说明了编写自定义验证摘要的过程.

编辑 这将做你想要的:

public static class LinqExt 
{
    public static string MyValidationSummary(this HtmlHelper helper, string validationMessage="")
    {
        string retVal = "";
        if (helper.ViewData.ModelState.IsValid)
            return "";

        retVal += "<div class='notification-warnings'><span>";
        if (!String.IsNullOrEmpty(validationMessage))
            retVal += helper.Encode(validationMessage);
        retVal += "</span>";
        retVal += "<div class='text'>";
        foreach (var key in helper.ViewData.ModelState.Keys) 
        {
            foreach(var err in helper.ViewData.ModelState[key].Errors)
                retVal += "<p>" + helper.Encode(err.ErrorMessage) + "</p>";
        }
        retVal += "</div></div>";
        return retVal.ToString();
    }
}

代码是自我解释的; 只需枚举模型状态错误并将错误包装在您选择的dom元素中.有一个错误,如果我使用它像:

<%:Html.MyValidationSummary()%>

它将在页面上显示html标签作为文本而不是呈现它.

<%=Html.MyValidationSummary()%>

这很好用.

Answer 3

基于flos的回答,我使它与微软的jQuery Unobtrusive Validation兼容,并添加了Bootstrap的3面板样式.这是新代码:

@model ModelStateDictionary

<div class="@(Html.ViewData.ModelState.IsValid ? "validation-summary-valid" : "validation-summary-errors") panel panel-danger"
     data-valmsg-summary="true">
    <div class="panel-heading">
        Please, correct the following errors:
    </div>
    <div class="panel-body">
        <ul>
            @foreach(var modelError in Model.SelectMany(keyValuePair => keyValuePair.Value.Errors))
            {
                <li>@modelError.ErrorMessage</li>
            }
        </ul>
    </div>
</div>

你可以在这里详细了解它:

使用Bootstrap 3面板创建自定义ASP.NET MVC @ Html.ValidationSummary样式

我还创建了一个示例ASP.NET MVC项目来显示此自定义ValidationSummary.在这里得到它:

https://github.com/leniel/AspNetMvcCustomHtmlValidationSummary