반응형
필수 필드에 별표를 표시하도록 LabelFor를 수정하려면 어떻게해야합니까?
필수 필드 인 경우 뒤에 별표를 표시하는 속성 HtmlHelper을 만들 수 있는 확장 메서드를 만들고 싶습니다 LabelFor. 어떻게 할 수 있습니까?
public class Foo
{
[Required]
public string Name { get; set; }
}
Html.LabelFor(o => o.Name) // Name*
다음은 이를 수행하는 방법을 설명하는 블로그 게시물 입니다.
위의 사이트에서 수정 된 작은 예를 제공하려면 (참고-컴파일 / 테스트하지 않았습니다) :
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));
}
}
}
순전히 CSS를 통해 필수 필드에 별표를 추가 할 수 있습니다.
먼저 CSS 클래스를 만듭니다.
.required:after
{
content: "*";
font-weight: bold;
color: red;
}
그러면 "필수"클래스가있는 모든 요소에 빨간색 별표가 추가됩니다.
그런 다음보기에서 레이블에 새 클래스를 추가하기 만하면됩니다.
@Html.LabelFor(m => m.Name, new { @class="required" })
필드에 [필수] 속성이 있는지 식별하고있는 경우 requiredCSS 클래스를 추가하는 사용자 정의 HTML 도우미가 더 좋습니다 .
내 필수 필드가 동적이어야하기 때문에 그렇게했습니다 (구성 파일에 정의 됨).
보기 끝에 추가하십시오.
<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>
다음은 Adam Tuliper의 답변을 기반으로 하지만 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" })
추신 : 뷰에 네임 스페이스를 포함하는 것을 잊지 마십시오.
여기에서이 게시물을 참조하십시오-필요한 대부분의 내용을 포함해야합니다. 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());
}
도우미를 사용하여 레이블에 스타일 클래스 추가
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 : "*" }
나는 다른 게시물에서 이것을 함께 섞었습니다.
labelfor 뒤에 입력과 범위 (라벨의 입력 및 유효성 검사 범위)가 뒤 따르기 때문에 나를 위해 작동합니다.
input[data-val-required]+span:before {
content: "*";
font-weight: bold;
color: red;
position:relative;
top:-34px;
left:-12px;
font-size:14pt;
}
주석과 함께 Renato Saito의 위 답변을 기반으로 $ (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);
}
});
});
내부화 / 번역 레이블 및 HTML 속성을 모두 보존하는 도우미 확장을 사용하여 필수 필드 (데이터 주석 [필수]를 통해 정의 됨) 뒤에 데코 레이팅 된 글 리피 콘 아이콘 추가
1. "Helpers"폴더를 만들고 새 컨트롤러 "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" })
도움이 되었기를 바랍니다 ;-)
이것은 LabelFor를 수정할 필요가 없지만 ViewModel에서 한 줄만 필요한 것으로 생각할 수있는 가장 간단한 방법입니다.
public class FooViewModel
{
[Required(ErrorMessage = "Name is required")]
[Display(Name ="Name*")]
public string Name { get; set; }
}
Html.LabelFor(o => o.Name)
Best working 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>');
}
}
});반응형
'Programing' 카테고리의 다른 글
| org.hibernate.hql.internal.ast.QuerySyntaxException : 테이블이 매핑되지 않음 (0) | 2020.11.17 |
|---|---|
| putty를 사용하여 sql.gz 파일을 데이터베이스로 가져오고 삽입하십시오. (0) | 2020.11.16 |
| OKHTTP에서 바이너리 파일 다운로드 (0) | 2020.11.16 |
| Angular 4.3-HttpClient 설정 매개 변수 (0) | 2020.11.16 |
| ActiveRecord 날짜 필드에서 연도, 일 또는 월로 찾기 (0) | 2020.11.16 |