Question

小问题。如何摆脱每个模型错误的项目符号。有风格属性吗？我没有看到一个人在一起。

Answer 1

验证摘要帮助程序将每条错误消息呈现为ul中的列表项。您始终可以使用自己的css

对其进行自定义

<form asp-action="Index">

    <div asp-validation-summary="All" id="myCustomSummary"></div>

    <!-- your form elements goes here-->

    <button id="btnadd">Save</button>
</form>

这里我给了一个Id属性给div，这样我就可以选择覆盖那个div里面的ul列表项。

要从每个列表项中删除项目符号，您可以在样式表中将list-style-type设置为none

#myCustomSummary ul li {
    list-style-type: none;
}

Answer 2

标签帮助程序的好处是，它们无需处理即可将所有非ASP属性直接传递给呈现的HTML标签。因此，通常，如果您使用的是Bootstrap，则可以简单地将类list-unstyled添加到class属性中；如果您不使用的是Bootstrap，则可以将相关CSS添加到style属性中。不需要自定义ASP属性。

但是，验证摘要Tag Helper的问题在于它将<ul>标签呈现在<div>标签内，因此您的类或样式将应用于<div>不是很有用。我不知道他们决定在看似无用的<div>标签上而不是直接在<ul>标签上创建验证摘要Tag Helper的原因，因为直接在样式和样式上更容易如上文所述进行操作（所有其他标签帮助程序都是这种情况），但是以这种方式完成后，除了在<style>标签或样式表中使用CSS外，我们别无选择。

如果您要针对特定的验证摘要，Shyju的其他答案很好。但是，您很可能希望以相同的方式定位所有验证摘要，在这种情况下，最好使用类而不是ID。

如果您查看源代码，则会注意到验证摘要呈现的HTML类似于以下内容：

<div class="validation-summary-errors">
    <ul>
        <li>The First Name field is required.</li>
        <li>The Last Name field is required.</li>
        <li>The Date Of Birth field is required.</li>
    </ul>
</div>

因此，您可以像这样简单地定位validation-summary-errors类：

.validation-summary-errors ul {
    padding-left: 0;
    list-style: none;
}

此代码是Bootstrap类list-unstyled的副本，该类完全删除了所有列表样式。如果您希望保留填充，请删除第一行。

现在，如果要在特定页面上定位所有验证摘要，则将上述CSS添加到该页面，如果要在网站的所有页面上定位所有验证摘要，则将以上CSS添加到您网站的样式表。

ASP.Net Core MVC asp-validation-summary样式

2 个答案: