재우니의 블로그

 여러 개의 C # enum을 한 번에 JavaScript로 변환하는 간단한 솔루션을 설명합니다.


JavaScriptEnum attribute

열거 형을 사용하는 솔루션은 보통 한 열거 형을 사용하지 않습니다. 일반적으로 서버 측 코드에는 많은 enum이 있습니다. 이 중 일부는 클라이언트 측에서 필요하지만 모든 클라이언트 측에서 필요하지는 않습니다. 따라서 자바 스크립트에서 필요한 모든 열거 형을 코드에서 찾을 수있는 방법이 필요합니다. 자바 스크립트에서 사용할 수있는 일부 열거 형을 표시하는 가장 쉬운 방법은 더미 특성을 사용하는 것입니다.



public class JavaScriptEnumAttribute : Attribute
{
}

JavaScript에서 사용할 수 있어야하는 enum을 탐지하기 위해서 Attribute 가  필요합니다.


Enum 을 JavaScript 문자열로 변환하기


다음으로 enum을 JavaScript 객체로 변환하는 방법이 필요합니다. 이전 enums 게시물의 코드에는 리팩토링이 필요합니다. MvcHtmlString이 아닌 일반 문자열로 enum JavaScript가 필요합니다. EnumToString () externsion 메서드의 수정 된 버전이 여기에 있습니다.


public static class HtmlEnumExtensions
{
    public static MvcHtmlString EnumToString<T>(this HtmlHelper helper)
    {
        return new MvcHtmlString(EnumToString<T>());
    }

    private static string EnumToString<T>()
    {
        return EnumToString(typeof(T));
    }

    private static string EnumToString(Type enumType)
    {
        var values = Enum.GetValues(enumType).Cast<int>();
        var enumDictionary = values.ToDictionary(value => Enum.GetName(enumType, value));

        return JsonConvert.SerializeObject(enumDictionary);
    }
}


이제 enum의 JavaScript 표현을 필요로하는 모든 메서드는 형식없이 JavaScript로 enum을 얻을 수 있습니다. 


표시된 enums 을 JavaScript 로 변환하기

한번에 여러 enum을 JavaScript로 변환하는 문제를 해결하려면 새로운 확장 메서드가 필요합니다. 이 메소드는 필요한 모든 enum을 JavaScriptEnum attribute 로 감지하고 주어진 JavaScript로 MvcHtmlString을 리턴합니다.



public static MvcHtmlString JavaScriptEnums(this HtmlHelper helper)
{
    var query = from a in AppDomain.CurrentDomain.GetAssemblies()
                from t in a.GetTypes()
                from r in t.GetCustomAttributes<JavaScriptEnumAttribute>()
                where t.BaseType == typeof(Enum)
                select t;

    var buffer = new StringBuilder(10000);

    foreach (var jsEnum in query)
    {
        buffer.Append("var ");
        buffer.Append(jsEnum.Name);
        buffer.Append(" = ");
        buffer.Append(EnumToString(jsEnum));
        buffer.Append("; \r\n");
    }

    return new MvcHtmlString(buffer.ToString());
}

이 메서드는 JavaScriptEnum attribute 을 가진 enum과 이름이 같은 JavaScript 변수를 선언합니다.


JavaScriptEnums 의 extension method 사용하기

JavaScriptEnums () 확장 메서드를 사용하는 방법을 보여주기 위해 두 개의 열거 형을 사용하여 새 ASP.NET MVC 응용 프로그램을 만듭니다.



[JavaScriptEnum]
public enum PaymentTypeEnum
{
    CreditCard,
    Check,
    Cash
}

[JavaScriptEnum]
public enum CustomerStatusEnum
{
    Regular,
    Gold,
    Platinum
}


이 메소드를 레이아웃 페이지의 헤더에서 호출하겠습니다.


<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <script>
    @Html.JavaScriptEnums()
    </script>
</head>

그리고 결과는 다음과 같습니다.


<script>
var PaymentTypeEnum = { "CreditCard": 0, "Check": 1, "Cash": 2 };
var CustomerStatusEnum = { "Regular": 0, "Gold": 1, "Platinum": 2 };
</script>


위의 코드를 수정하고 enum 형을 JavaScript로 반환하는 action 을 controller 에 만들 수 있다면 가능합니다. 물론 서버에 대한 추가 호출이 한 번 발생합니다.

마무리

열거 형을 가지고 놀고 난 후 코드에서 선택된 C # enum을 한 번에 JavaScript로 변환하는 데 알맞은 솔루션을 제공합니다. enum 클래스 메소드와 enum을 사용하기 위한 약간의 리플렉션을 사용했습니다. 우리가 공유 라이브러리를 고려한다면 enum을 마커 속성으로 표시하는 것이 가장 좋은 생각은 아니지만 꽤 간단한 웹 애플리케이션 경우엔 잘 작동합니다. HtmlHelHumper 확장 메서드는 현재 ASP.NET MVC 스타일을 확장 한 것으로 코드는 이해하기 쉽고 주변 개발자도 쉽게 따라 할 수 있습니다.


출처 : http://gunnarpeipman.com/2017/08/enums-to-javascript/