질문은 MVC 3.0을 대상으로했지만 MVC 4.0에서도 문제가 지속되는 것으로 나타났습니다. MVC 5.0에는 기본적으로 htmlAttributes에 대한 과부하가 포함되어 있습니다.
현재 직장에서 MVC 4.0을 사용해야하는데 JQuery 통합을 위해 CSS 클래스를 추가해야했습니다. 단일 확장 방법을 사용 하여이 문제를 해결했습니다 ...
확장 방법 :
using System.Linq;
using System.Web.Mvc;
using System.Web.Routing;
using System.Xml.Linq;
namespace MyTest.Utilities
{
public static class MVCHelperExtensionMethods
{
public static MvcHtmlString AddHtmlAttributes(this MvcHtmlString input, object htmlAttributes)
{
// WE WANT TO INJECT INTO AN EXISTING ELEMENT. IF THE ATTRIBUTE ALREADY EXISTS, ADD TO IT, OTHERWISE
// CREATE THE ATTRIBUTE WITH DATA VALUES.
// USE XML PARSER TO PARSE HTML ELEMENT
var xdoc = XDocument.Parse(input.ToHtmlString());
var rootElement = (from e in xdoc.Elements() select e).FirstOrDefault();
// IF WE CANNOT PARSE THE INPUT USING XDocument THEN RETURN THE ORIGINAL UNMODIFIED.
if (rootElement == null)
{
return input;
}
// USE RouteValueDictionary TO PARSE THE NEW HTML ATTRIBUTES
var routeValueDictionary = new RouteValueDictionary(htmlAttributes);
foreach (var routeValue in routeValueDictionary)
{
var attribute = rootElement.Attribute(routeValue.Key);
if (attribute == null)
{
attribute = new XAttribute(name: routeValue.Key, value: routeValue.Value);
rootElement.Add(attribute);
}
else
{
attribute.Value = string.Format("{0} {1}", attribute.Value, routeValue.Value).Trim();
}
}
var elementString = rootElement.ToString();
var response = new MvcHtmlString(elementString);
return response;
}
}
}
HTML 마크 업 사용법 :
@Html.EditorFor(expression: x => x.MyTestProperty).AddHtmlAttributes(new { @class = "form-control" })
(면도기보기에 확장 메소드의 네임 스페이스를 포함 시키십시오)
설명 :
기존 HTML에 삽입하는 것이 좋습니다. Linq-to-XML using을 사용하여 현재 요소를 구문 분석하기로 선택했습니다 XDocument.Parse(). htmlAttributes를 type으로 전달합니다 object. MVC를 활용RouteValueDictionary 를 하여 전달 된 htmlAttributes를 구문 분석합니다. 이미 존재하는 속성을 병합하거나 아직없는 경우 새 속성을 추가합니다.
다음을 통해 입력을 구문 분석 할 수없는 경우 XDocument.Parse()모든 희망을 버리고 원래 입력 문자열을 반환하여 입력을 .
이제 DisplayFor (통화와 같은 데이터 유형 렌더링)의 이점을 사용할 수 있지만 CSS 클래스 (및 해당 문제에 대한 다른 속성)를 지정할 수 있습니다. data-*또는 ng-*(Angular) 와 같은 속성을 추가하는 데 도움이 될 수 있습니다 .