[asp.net-mvc] ASP.NET MVC 3 Razor-EditorFor에 클래스 추가

나는 똑같은 좌절 문제를 겪었고 모든 DateTime 값에 적용되는 EditorTemplate을 만들고 싶지 않았습니다 ( jQuery UI 드롭 다운 캘린더가 아닌 시간을 표시하려는 UI에 시간이 있음 ). 내 연구에서 내가 겪은 근본적인 문제는 다음과 같습니다.

• 표준 TextBoxFor 도우미를 사용하면 눈에 잘 띄지 않는 jQuery UI 캘린더를 렌더링하기 위해 “날짜 선택 도구”의 사용자 정의 클래스를 적용 할 수 있었지만 TextBoxFor는 시간없이 DateTime의 형식을 지정하지 않아 달력 렌더링에 실패했습니다.
• 표준 EditorFor 는 DateTime을 형식화 된 문자열로 표시합니다 (와 같은 적절한 속성으로 장식되어 [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]있지만 사용자 정의 “날짜 선택기”클래스를 적용 할 수는 없습니다.

따라서 다음과 같은 이점이있는 사용자 지정 HtmlHelper 클래스를 만들었습니다.

• 이 메소드는 DateTime을 jQuery 달력에 필요한 ShortDateString으로 자동 변환합니다 (시간이 있으면 jQuery가 실패 함).
• 기본적으로 도우미는 jQuery 캘린더를 표시하기 위해 필요한 htmlAttributes를 적용하지만 필요한 경우 재정의 할 수 있습니다.
• 날짜가 null 인 경우 ASP.NET MVC는 날짜를 1/1/0001의 값으로 설정합니다.

이 방법은 빈 문자열로 바꿉니다.

public static MvcHtmlString CalenderTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
    var mvcHtmlString = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, expression, htmlAttributes ?? new { @class = "text-box single-line date-picker" });
    var xDoc = XDocument.Parse(mvcHtmlString.ToHtmlString());
    var xElement = xDoc.Element("input");
    if (xElement != null)
    {
        var valueAttribute = xElement.Attribute("value");
        if (valueAttribute != null)
        {
            valueAttribute.Value = DateTime.Parse(valueAttribute.Value).ToShortDateString();
            if (valueAttribute.Value == "1/1/0001")
                valueAttribute.Value = string.Empty;
        }
    }
    return new MvcHtmlString(xDoc.ToString());
}

그리고 date-picker클래스 데코레이션을 사용하여 달력을 렌더링하는 객체를 찾는 JQuery 구문을 알고 싶은 사람들은 다음과 같습니다.

$(document).ready(function () {
    $('.date-picker').datepicker({ inline: true, maxDate: 0, changeMonth: true, changeYear: true });
    $('.date-picker').datepicker('option', 'showAnim', 'slideDown');
});

답변

@Html.EditorFor(x => x.Created, new { cssClass = "date" })

<div>
    @Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>