CSS 显示 ValidationSummary MVC3 为 “alert-error” Bootstrap

在本文中，我们将介绍如何使用CSS将MVC3的ValidationSummary显示为Bootstrap中的”alert-error”样式。ValidationSummary是ASP.NET MVC3中的一个功能，用于显示表单验证错误消息的概要。

阅读更多：CSS 教程

什么是ValidationSummary？

ValidationSummary是一个显示表单验证错误消息的HTML助手方法。在ASP.NET MVC3中，我们可以使用它来汇总表单中的验证错误，并将它们显示为列表或摘要。

引入Bootstrap

首先，我们需要在MVC3项目中引入Bootstrap库。可以通过下载Bootstrap的CSS和JavaScript文件，并将它们放置在项目的相应文件夹中。或者，我们可以使用CDN引用Bootstrap。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js"></script>

给ValidationSummary应用”alert-error”样式

接下来，我们需要应用”alert-error”样式给ValidationSummary。我们可以使用自定义的CSS类或直接使用Bootstrap提供的样式。

首先，我们需要修改ValidationSummary的HTML生成。在View文件中，我们可以使用以下代码来生成ValidationSummary：

@Html.ValidationSummary(false, null, new { @class = "alert alert-error" })

这里，我们将ValidationSummary的第一个参数设置为false，以显示所有的验证错误，而不是只显示第一个错误。第二个参数设置为null以使用默认错误消息。第三个参数使用了”alert”和”alert-error”样式类，这将使ValidationSummary显示为Bootstrap中的错误警告框。

自定义ValidationSummary样式

如果不想使用Bootstrap中提供的样式，我们可以编写自定义的CSS样式来美化ValidationSummary。

首先，我们需要在项目的CSS文件中定义一个新的样式类，例如：

.validation-summary {
  background-color: red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}

接下来，我们需要将这个样式类应用给ValidationSummary。修改View文件中的代码如下：

@Html.ValidationSummary(false, null, new { @class = "validation-summary" })

这样，ValidationSummary将使用我们自定义的样式。

使用CSS选择器定制ValidationSummary样式

我们还可以使用CSS选择器来针对特定的ValidationSummary应用样式的修改。

例如，如果我们只想给特定的ValidationSummary添加背景颜色，我们可以使用以下CSS代码：

#custom-validation-summary {
  background-color: red;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}

然后，在View文件中，我们可以给ValidationSummary添加一个id属性，并应用这个样式类：

@Html.ValidationSummary(false, null, new { id = "custom-validation-summary" })

这样，只有具有指定id的ValidationSummary才会应用这个样式。

示例

下面是一个完整的示例，演示了如何使用CSS将MVC3的ValidationSummary显示为Bootstrap中的”alert-error”样式。

首先，我们需要在View文件中添加表单及其验证控件：

@using (Html.BeginForm())
{
    @Html.ValidationSummary(false, null, new { @class = "alert alert-error" })

    <div class="form-group">
        @Html.LabelFor(m => m.Name)
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Name)
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Email)
        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Email)
    </div>

    <button type="submit" class="btn btn-primary">提交</button>
}

然后，我们在CSS文件中定义一个新的类来自定义ValidationSummary的样式：

.validation-summary {
    background-color: red;
    color: white;
    padding: 10px;
    margin-bottom: 10px;
}

最后，在布局文件或需要应用样式的视图中添加Bootstrap的引用：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js"></script>

通过以上步骤，我们就成功地将MVC3的ValidationSummary显示为Bootstrap中的”alert-error”样式。

总结

本文介绍了如何使用CSS将MVC3的ValidationSummary显示为Bootstrap中的”alert-error”样式。通过引入Bootstrap库，并应用自定义的CSS样式或Bootstrap提供的样式，我们可以轻松地美化ValidationSummary并提供更好的用户体验。希望本文对您在使用CSS美化ValidationSummary时有所帮助！