68

我正在使用 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>
4

7 回答 7

144

我的方法是使用自定义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>
}

将此部分视图放在您的 Shared 文件夹中，并从您的代码中引用它：

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

这样您就可以完全控制您的 html。

于 2011-12-16T12:43:43.017 回答
49

这个问题详细介绍了编写自定义验证摘要的过程。

编辑 这将做你想要的：

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()%>

这工作正常。

于 2011-05-02T13:46:45.790 回答
26

基于flos 的回答，我使其与 Microsoft 的 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

于 2013-08-29T23:15:34.737 回答
2

只是在这里发布我的答案，因为它对我很有效；）

我使用了一个简单的扩展方法，它接受一个MvcHtmlString并将其解码回 HTML：

    public static MvcHtmlString ToMvcHtmlString(this MvcHtmlString htmlString)
    {
        if (htmlString != null)
        {
            return new MvcHtmlString(HttpUtility.HtmlDecode(htmlString.ToString()));
        }
        return null;
    }

为了解决这个问题，我将验证摘要助手添加到我的 chstml 中，如下所示：

@Html.ValidationSummary(true).ToMvcHtmlString()

这意味着，我可以将自定义 HTML 添加到我的验证摘要中：

ModelState.AddModelError("", "<p>This message can have html in it</p>");

我什至可以将自定义 HTML 添加到我的字段验证消息中：

ModelState.AddModelError("MyField", "<p>This message can have html in it</p>");

并让我的字段验证消息与 HTML 一起使用：

@Html.ValidationMessageFor(model => model.MyField).ToMvcHtmlString();
于 2014-03-12T12:51:46.440 回答
1

添加相关样式：

.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

于 2015-06-16T06:36:09.470 回答
1

我只需要为服务器端验证做一些类似的事情（例如检查文件内容），并最终完全篡夺了@Html.ValidationSummary 并进行了相当不错的小工作。

我们有一个扩展 Controller 的 BaseController 类，并且在内部我们出于多种目的重写 OnActionExecuting 方法。我们在 ViewBag 中为我们的错误消息创建一个新列表，并确保在任何操作运行之前对其进行初始化。然后我们可以添加要显示的错误，并显示在屏幕上。

出于这个问题的目的，它看起来像这样。

public class BaseController : Controller
{
    protected override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (ViewBag.ErrorsList == null)
        {
            ViewBag.ErrorsList = new List<string>();
        }
    }
}

然后在我们的 _Layout.cshtml 中在您的 @RenderBody() 上方添加以下内容

@if(ViewBag.ErrorsList.Count > 0)
{
    <div class="container margin-top-10 alert alert-danger">
        <h3><i class="glyphicon glyphicon-warning-sign"></i></h3><br/>
        @foreach (string error in @ViewBag.ErrorsList)
        {
            @error <br/>
        }
    </div>
    @RenderBody()
}

现在，每当发生我们想要显示为验证错误消息的服务器端错误时，我们只需将其添加到我们的 ViewBag.ErrorsList

ViewBag.ErrorsList.Add("Something bad happened...");

瞧，一个用于服务器端验证错误消息的自定义容器，其中包含您想要的任何样式，错误以与 ValidationSummary 相同的方式传递。

于 2015-11-05T11:48:48.897 回答
0

我只想展示顶级信息，没有别的。我们已经在下面的字段旁边进行了验证。处理@Leniel-Macaferi 的解决方案，这就是我为使其与 jQuery 验证一起工作所做的工作：（添加 style="display: none;"）

<div class="@(Html.ViewData.ModelState.IsValid ? "validation-summary-valid" : "validation-summary-errors")"
     data-valmsg-summary="true">
    <div>
        There are still some fields not filled in before we can submit this. Please correct.
    </div>
    <div style="display: none;">
        <ul>
            @foreach (var modelError in Model.SelectMany(keyValuePair => keyValuePair.Value.Errors))
            {
                <li>@modelError.ErrorMessage</li>
            }
        </ul>
    </div>
</div>
于 2014-05-29T10:49:32.310 回答