How can I change LabelFor to display an asterisk in required fields?

Question

I want to create an extension method for HtmlHelper , which allows me to create a LabelFor object, and after it an asterisk if this is a required field. How can i do this?

 public class Foo { [Required] public string Name { get; set; } } Html.LabelFor(o => o.Name) // Name* 

Answer 1

Here is a blog post that describes how to do this.

To give you a small example, modified from the site above (note - I have not compiled / tested this):

 namespace HelpRequest.Controllers.Helpers { public static class LabelExtensions { public static MvcHtmlString Label(this HtmlHelper html, string expression, string id = "", bool generatedId = false) { return LabelHelper(html, ModelMetadata.FromStringExpression(expression, html.ViewData), expression, id, generatedId); } [SuppressMessage("Microsoft.Design", "CA1006:DoNotNestGenericTypesInMemberSignatures", Justification = "This is an appropriate nesting of generic types")] public static MvcHtmlString LabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, string id = "", bool generatedId = false) { return LabelHelper(html, ModelMetadata.FromLambdaExpression(expression, html.ViewData), ExpressionHelper.GetExpressionText(expression), id, generatedId); } internal static MvcHtmlString LabelHelper(HtmlHelper html, ModelMetadata metadata, string htmlFieldName, string id, bool generatedId) { string labelText = metadata.DisplayName ?? metadata.PropertyName ?? htmlFieldName.Split('.').Last(); if (String.IsNullOrEmpty(labelText)) { return MvcHtmlString.Empty; } var sb = new StringBuilder(); sb.Append(labelText); if (metadata.IsRequired) sb.Append("*"); var tag = new TagBuilder("label"); if (!string.IsNullOrWhiteSpace(id)) { tag.Attributes.Add("id", id); } else if (generatedId) { tag.Attributes.Add("id", html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName) + "_Label"); } tag.Attributes.Add("for", html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName)); tag.SetInnerText(sb.ToString()); return MvcHtmlString.Create(tag.ToString(TagRenderMode.Normal)); } } } 

Answer 2

You can add an asterisk to the required field exclusively through CSS.

First create a CSS class for it:

 .required:after { content: "*"; font-weight: bold; color: red; } 

This will add a red asterisk to any element with the "required" class.

Then, in your opinion, just add a new class to your shortcut:

  @Html.LabelFor(m => m.Name, new { @class="required" }) 

Better still could be an HTML custom helper that recognizes whether a field has a [Required] attribute and, if so, adds the required CSS class.

Answer 3

I did this because my required fields must be dynamic (defined in the configuration file)

Add at the end of your view:

  <script type="text/javascript"> $('input[type=text]').each(function () { var req = $(this).attr('data-val-required'); if (undefined != req) { var label = $('label[for="' + $(this).attr('id') + '"]'); var text = label.text(); if (text.length > 0) { label.append('<span style="color:red"> *</span>'); } } }); </script> 

Answer 4

Here is my solution based on the Adam Tuliper answer , but modified to work with Bootstrap , and the use of custom attributes is allowed.

 using System; using System.Linq; using System.Web.Mvc; using System.Linq.Expressions; using System.ComponentModel; public static class RequiredLabel { public static MvcHtmlString RequiredLabelFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, object htmlAttributes) { var metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData); string htmlFieldName = ExpressionHelper.GetExpressionText(expression); string labelText = metaData.DisplayName ?? metaData.PropertyName ?? htmlFieldName.Split('.').Last(); if (metaData.IsRequired) labelText += "<span class=\"required\">*</span>"; if (String.IsNullOrEmpty(labelText)) return MvcHtmlString.Empty; var label = new TagBuilder("label"); label.Attributes.Add("for", helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName)); foreach (PropertyDescriptor prop in TypeDescriptor.GetProperties(htmlAttributes)) { label.MergeAttribute(prop.Name.Replace('_', '-'), prop.GetValue(htmlAttributes).ToString(), true); } label.InnerHtml = labelText; return MvcHtmlString.Create(label.ToString()); } } 

Then I call it from my view as follows:

 @Html.RequiredLabelFor(model => model.Category, new { @class = "control-label col-md-3" }) 

PS Make sure you remember to include your namespace in your view.

Answer 5

see this post here - should contain most of what you need http://blogs.planetcloud.co.uk/mygreatdiscovery/post/Creating-tooltips-using-data-annotations-in-ASPNET-MVC.aspx

 public static MvcHtmlString RequiredLabelFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression) { var metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData); string htmlFieldName = ExpressionHelper.GetExpressionText(expression); string labelText = metaData.DisplayName ?? metaData.PropertyName ?? htmlFieldName.Split('.').Last(); if (metaData.IsRequired) labelText += "<span class=\"required-field\">*</span>"; if (String.IsNullOrEmpty(labelText)) return MvcHtmlString.Empty; var label = new TagBuilder("label"); label.Attributes.Add("for", helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName)); label.InnerHtml = labelText; return MvcHtmlString.Create(label.ToString()); } 

Answer 6

Use the helper to add a style class to the label.

 public static MvcHtmlString RequiredLabelFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object htmlAttributes) { var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData); var resolvedLabelText = metadata.DisplayName ?? metadata.PropertyName; if (!metadata.IsRequired) { return html.LabelFor(expression, resolvedLabelText, htmlAttributes); } var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes); if (attributes == null) { return html.LabelFor(expression, resolvedLabelText, htmlAttributes); } const string requiredClass = "required-label"; if (attributes.ContainsKey("class")) { var classList = attributes["class"].ToString().Split(' ').ToList(); classList.Add(requiredClass); attributes["class"] = string.Join(" ", classList); } else { attributes.Add("class", requiredClass); } return html.LabelFor(expression, resolvedLabelText, attributes); } 

Then you can create a class style:

 .required-label::after { content : "*" } 

Answer 7

I copied this along with some other posts:

This works for me, since labelfor is followed by an input plus a range (input for label and check range)

 input[data-val-required]+span:before { content: "*"; font-weight: bold; color: red; position:relative; top:-34px; left:-12px; font-size:14pt; } 

Answer 8

Based on the above answer by Renato Saito along with the comments, as well as adding $ (document) .ready and checking to make sure that we do not add more than one asterisk (I get this on some of my fields for some reason), have this:

 // Add asterisks to required fields $(document).ready(function() { $("[data-val-required]").each(function () { var label = $('label[for="' + $(this).attr("id") + '"]'); var asterisksHtml = '<span style="color:red">&nbsp;*</span>'; if (label.text().length > 0 && label.html().indexOf(asterisksHtml) === -1) { label.append(asterisksHtml); } }); }); 

Answer 9

Add the symbol of the decorated symbol to the symbol after the required field (determined by the data annotation [Required]) using an auxiliary extension that preserves internalization / translation labels and html attributes

1. Create the "Helpers" folder and add a new "Helper.cs" controller

 using System; using System.ComponentModel; using System.Linq; using System.Linq.Expressions; using System.Web.Mvc; namespace WIPRO.Helpers { public static class Helpers { public static MvcHtmlString LabelForRequired<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, string translatedlabelText, object htmlAttributes) { var metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData); string htmlFieldName = ExpressionHelper.GetExpressionText(expression); string labelText = metaData.DisplayName ?? metaData.PropertyName ?? htmlFieldName.Split('.').Last(); if (metaData.IsRequired) { labelText = translatedlabelText + "<span class=\"required\" style=\"color:orange;\"> <span style=\"font-size: 0.4em; vertical-align: super;\" class=\"glyphicon glyphicon-asterisk\" data-unicode=\"270f\"></span></span>"; } else { labelText = translatedlabelText; } if (String.IsNullOrEmpty(labelText)) return MvcHtmlString.Empty; var label = new TagBuilder("label"); label.Attributes.Add("for", helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName)); foreach (PropertyDescriptor prop in TypeDescriptor.GetProperties(htmlAttributes)) { label.MergeAttribute(prop.Name.Replace('_', '-'), prop.GetValue(htmlAttributes).ToString(), true); } label.InnerHtml = labelText; return MvcHtmlString.Create(label.ToString()); } } } 

2. In your opinion

 @using WIPRO.Helpers @Html.LabelForRequired(model => model.Test,"Translated text", htmlAttributes: new { @class = "control-label col-md-2" }) 

instead

  @Html.LabelFor(model => model.Test,"Translated text", htmlAttributes: new { @class = "control-label col-md-2" }) 

Hope this helps; -)

Answer 10

Although this does not require changing LabelFor, I think the simplest thing is that it requires only one line in your ViewModel:

 public class FooViewModel { [Required(ErrorMessage = "Name is required")] [Display(Name ="Name*")] public string Name { get; set; } } Html.LabelFor(o => o.Name) 

Answer 11

Best work for me in MVC with multiple field types

 $('input[type=text], input[type=password], input[type=email], input[type=tel], select').each(function () { var req = $(this).attr('data-val-required'); if (undefined != req) { var label = $('label[for="' + $(this).attr('name') + '"]'); var text = label.text(); if (text.length > 0) { label.append('<span style="color:red"> *</span>'); } } });