Как я могу изменить LabelFor для отображения звездочки на обязательных полях?
Я хочу создать метод расширения для HtmlHelper
, который позволяет мне создать объект LabelFor
, а после него - звездочку, если это обязательное поле. Как я могу это сделать?
public class Foo
{
[Required]
public string Name { get; set; }
}
Html.LabelFor(o => o.Name) // Name*
Ответы
Ответ 1
Вот сообщение в блоге, в котором описывается, как это сделать.
Чтобы дать вам небольшой пример, измененный с сайта выше (примечание - я не компилировал/не тестировал это):
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));
}
}
}
Ответ 2
Вы можете добавить звездочку в обязательное поле исключительно через CSS.
Сначала создайте для него класс CSS:
.required:after
{
content: "*";
font-weight: bold;
color: red;
}
Это добавит красную звездочку к любому элементу с классом "required".
Затем, по вашему мнению, просто добавьте новый класс к вашему ярлыку:
@Html.LabelFor(m => m.Name, new { @class="required" })
Еще лучше может быть пользовательский помощник HTML, который распознает, имеет ли поле атрибут [Required], и, если да, добавляет класс CSS required
.
Ответ 3
Я сделал это, потому что мои обязательные поля должны быть динамическими (определенными в файле конфигурации)
Добавить в конце вашего представления:
<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>
Ответ 4
Вот мое решение на основе Adam Tuliper answer, но изменено для работы с Bootstrap, а также разрешено использование настраиваемых атрибутов.
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());
}
}
Затем я называю это из своего представления следующим образом:
@Html.RequiredLabelFor(model => model.Category, new { @class = "control-label col-md-3" })
P.S. Убедитесь, что вы не забыли указать свое пространство имен в своем представлении.
Ответ 5
см. этот пост здесь - должен содержать большую часть того, что вам нужно
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());
}
Ответ 6
Используйте помощник, чтобы добавить класс стиля к метке
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);
}
Затем вы можете создать стиль класса:
.required-label::after { content : "*" }
Ответ 7
Я скопировал это вместе с некоторыми другими сообщениями:
Это работает для меня, так как за labelfor следует вход плюс диапазон (вход для метки и диапазон проверки)
input[data-val-required]+span:before {
content: "*";
font-weight: bold;
color: red;
position:relative;
top:-34px;
left:-12px;
font-size:14pt;
}
Ответ 8
Исходя из приведенного выше ответа Ренато Сайто вместе с комментариями, а также добавления $(document).ready и проверки, чтобы убедиться, что мы не добавляем больше чем одну звездочку (я получаю это на некоторых из моих поля почему-то), у меня есть это:
// 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"> *</span>';
if (label.text().length > 0 && label.html().indexOf(asterisksHtml) === -1) {
label.append(asterisksHtml);
}
});
});
Ответ 9
Добавьте символ украшенного символа символика после обязательного поля (определяется аннотацией данных [Требуется]), используя вспомогательное расширение, сохраняющее метки интернализации/трансляции и атрибуты html
1. Создайте папку "Помощники" и добавьте новый контроллер "Helper.cs"
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. На ваш взгляд
@using WIPRO.Helpers
@Html.LabelForRequired(model => model.Test,"Translated text", htmlAttributes: new { @class = "control-label col-md-2" })
вместо
@Html.LabelFor(model => model.Test,"Translated text", htmlAttributes: new { @class = "control-label col-md-2" })
Надеюсь, что это поможет; -)
Ответ 10
Хотя для этого не требуется изменять LabelFor, я думаю, что самое простое, для чего требуется только одна строка в вашей ViewModel:
public class FooViewModel
{
[Required(ErrorMessage = "Name is required")]
[Display(Name ="Name*")]
public string Name { get; set; }
}
Html.LabelFor(o => o.Name)
Ответ 11
Лучше всего работать для меня в MVC с несколькими типами полей
$('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>');
}
}
});