ASP.NET核心TagHelper添加CSS类
ASP.NET核心TagHelper添加CSS类
提问于 2018-06-07 03:37:07
我需要为必填字段自动显示一个星号，所以我设法在网上找到了一些这样做的代码。我添加了一个名为"required-label“的CSS类，也将其变为红色。但是，它只将CSS类应用于星号，而不是标签。你知道如何将CSS类应用于这两个类吗？以下是所需的完整代码片段。
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Threading.Tasks;
namespace App.TagHelpers
{
[HtmlTargetElement("label", Attributes = ForAttributeName)]
public class LabelRequiredTagHelper : LabelTagHelper
{
private const string ForAttributeName = "asp-for";
public LabelRequiredTagHelper(IHtmlGenerator generator) : base(generator)
{
}
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
await base.ProcessAsync(context, output);
if (For.Metadata.IsRequired)
{
var sup = new TagBuilder("sup");
sup.InnerHtml.Append("*");
sup.AddCssClass("required-label");
output.Content.AppendHtml(sup);
}
}
}
}
将代码示例归功于Manoj Kulkarni。
回答 1
Stack Overflow用户
发布于 2018-06-07 06:06:13
OP中的标记助手可以工作，但我认为您需要做的不是添加一个sup元素来包含星号，而是向label元素本身添加一个css类，并使用CSS来相应地设置标签的样式。
对tag-helper做了一些小调整
[HtmlTargetElement("label", Attributes = ForAttributeName)]
public class LabelRequiredTagHelper : LabelTagHelper
{
private const string ForAttributeName = "asp-for";
private const string RequiredCssClass = "required";
public LabelRequiredTagHelper(IHtmlGenerator generator) : base(generator)
{
}
public override async Task ProcessAsync(TagHelperContext context,
TagHelperOutput output)
{
await base.ProcessAsync(context, output);
if (For.Metadata.IsRequired)
{
output.Attributes.AddCssClass(RequiredCssClass);
}
}
}AddCssClass扩展
public static class TagHelperAttributeListExtensions
{
public static void AddCssClass(this TagHelperAttributeList attributeList,
string cssClass)
{
var existingCssClassValue = attributeList
.FirstOrDefault(x => x.Name == "class")?.Value.ToString();
// If the class attribute doesn't exist, or the class attribute
// value is empty, just add the CSS class
if (String.IsNullOrEmpty(existingCssClassValue))
{
attributeList.SetAttribute("class", cssClass);
}
// Here I use Regular Expression to check if the existing css class
// value has the css class already. If yes, you don't need to add
// that css class again. Otherwise you just add the css class along
// with the existing value.
// \b indicates a word boundary, as you only want to check if
// the css class exists as a whole word.
else if (!Regex.IsMatch(existingCssClassValue, $@"\b{ cssClass }\b",
RegexOptions.IgnoreCase))
{
attributeList.SetAttribute("class", $"{ cssClass } { existingCssClassValue }");
}
}
}视图模型
包含所需属性的样例视图模型，使用[Required]进行注释。默认情况下，布尔值也是必需的。
public class LoginViewModel
{
[Required]
public string Username { get; set; }
[Required]
[DataType(DataType.Password)]
public string Password { get; set; }
[Display(Name = "Remember my login?")]
public bool RememberMe { get; set; }
public string ReturnUrl { get; set; }
}视图
例如，我有一个采用LoginViewModel的登录页面。
@model LoginViewModel
@{
ViewData["Title"] = "Login";
}
<form asp-area="" asp-controller="account" asp-action="login">
<input type="hidden" asp-for="ReturnUrl" />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Email"></label>
<input type="email" class="form-control" asp-for="Email" />
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input type="password" class="form-control" asp-for="Password" />
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" asp-for="RememberMe" />
<label asp-for="RememberMe" class="custom-control-label"></label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>值得一提的是，checkbox RememberMe的标签。在视图中，我添加了额外的css类custom-control-label，而标签帮助器仍然设法添加了所需的css类required。
生成的HTML
风格(在SASS中)
你可以看出我正在使用Bootstrap css框架，并且已经有了复选框标签的样式，所以我想排除那些样式(用custom-control-label css class表示)。
label.required:not(.custom-control-label)::after {
content: "*";
padding-left: .3rem;
color: theme-color('danger'); /* color: #dc3545; */
}结果
如果您希望所需的标签也是红色的，您可以这样设置它的样式：
label.required:not(.custom-control-label) {
color: theme-color('danger'); /* color: #dc3545; */
&::after {
content: "*";
padding-left: .3rem;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50728261
复制相关文章
相似问题