보기를 위한 보조 방법 사용자 정의 (위)

ASP를 작성하고 있습니다.NET MVC 응용 프로그램은 내장된 보기 보조 방법만으로는 높은 생산력을 달성하기 어렵고 MvcFutures에 정의된 보충 라이브러리라도 프로젝트의 구체적인 수요를 충족시키기 어렵다.그 밖에 서로 다른 프로젝트는 서로 다른 특징을 가지기 때문에 많은 경우에 비교적 특수한 보조 방법을 정의하여 개발자가 더욱 빠르고 쉽게 유지보수하기 쉬운 코드를 쓸 수 있도록 해야 한다.이것도 사용자 정의 보기 보조 방법의 가장 주요한 목적이다.이번 글은 바로 이 방면의 예시를 제시하여 이런 문제의 참고로 삼을 수 있다.
준비
클라이언트 HTML을 작성할 때 클라이언트 인증이 가장 일반적인 작업 중 하나입니다.ASP이니까.NET MVC는 jQuery 클래스 라이브러리를 통합했습니다. 그러면 jQuery의Validate 플러그인을 바탕으로 이 기능을 작성해도 괜찮습니다.다음과 같은 양식이 있다고 가정합니다.

<form method="post" action="" id="form">
    <p>
        <span>Name: </span> <!--    -->
        <input type="text" name="user.Name" />
    </p>
    <p>
        <span>Age: </span> <!--   ，15 28      -->
        <input type="text" name="user.Age" />
    </p>
    <p>
        <span>Email:</span> <!--   ，    Email -->
        <input type="text" name="user.Email" />
    </p>
    <input type="submit" value="Submit" />
</form>

JQuery Validate 플러그인을 사용하여 클라이언트 체크를 수행하는 경우 다음 코드를 작성할 수 있습니다.

<script language="javascript" type="text/javascript">
    $("#form").validate({
        "rules": {
            "user.Name": { "required": true },
            "user.Age": {
                "required": true,
                "number": true,
                "range": [15, 28]
            },
            "user.Email": {
                "required": true,
                "email": true
            }
        },
        "messages": {
            "user.Name": { "required": "please provide your name!!!" },
            "user.Email": {
                "required": "email please...",
                "email": "valid email please..."
            }
        }, "onkeyup": false
    });
</script>

상기 스크립트의 역할은 jQuery가 어떤 폼을 검사하고, 폼의 각 요소에 대해 각각 어떤 검사 방식을 취하며, 오류가 발생할 때 어떤 정보를 제시해야 하는지 알려주는 것이다. (상세한 내용은 문서를 볼 수 있다.)여기에는 아마도 주제 밖의 말을 보충해야 할 것이다.사실 jQuery.Validate는 매우 유연해서 각종 방식으로 검사 정보를 제공할 수 있다. 예를 들어 html 요소에 특수 표시를 직접 하는 것이다.그러나 조 씨는 그 방법의 Trick이 의미가 너무 짙고 보조 방법을 작성해 개발에 협조하기 어렵다고 판단해 그런 방식을 소홀히 했다.
이런 결과는 일부 프론트 데스크 개발자들을 기쁘게 할 수도 있지만 조 씨는 적어도 세 가지가 향상되어야 한다고 생각한다.

데이터가 분산되어 유지 보수의 난이도를 높인다.예를 들어 HTML 요소와 검사 규칙이 분리된 경우 검사 규칙

개발자에게 JSON을 작성하는 것은 불편하고 오류가 발생하기 쉽다.

자동 검증에 대한 지원이 부족하여 완전히 손으로 써야 합니다.

우리가 쓴 보조 방법은 주로 앞의 두 가지를 향하고 마지막은 자연스러운 일이라고 할 수 있다.
입구
어떤 방법이든 입구가 필요하다. 이 입구는 어떤 정태류일 수도 있고 심지어 글로벌에서 가장 직접적인'방법'을 직접 정의할 수도 있다.ASP.NET MVC 뷰의 액세스 가능성에 대한 엔트리는 ViewPage에 정의되는 경우가 많습니다.예를 들어 HTML과 관련된 액세스 가능성은 ViewPage에 정의됩니다.Html 등록 정보에서 URL과 관련된 액세스 가능성은 ViewPage에 정의됩니다.Url 속성 아래(ViewUserctrol과 ViewMasterPage도 마찬가지).이러한 입구 구분은 사실상 보조 방법을 분류하고 사용자가 IDE의 도움 아래 필요한 보조 방법을 신속하게 포지셔닝할 수 있도록 한다.간단한 사용자 정의 보조 방법을 작성할 때 우리는 C# 3.0의 확장 방법 특성을 이용하여 방법을 HtmlHelper와 UrlHelper에 정의하여 페이지에서 직접 사용할 수 있다.그러나 일부 특수한 상황, 예를 들어 현재의 상황에 대해 우리는 우리의 보조 방법을 바탕으로 확장할 수 있도록 입구를 다시 정의해야 한다.이를 위해 JQueryHelper 클래스에 다음과 같은 작업을 맡깁니다.

public class JQueryHelper
{
    public JQueryHelper(ViewContext viewContext, ViewPage page)
        : this(viewContext, page, RouteTable.Routes)
    { }

    public JQueryHelper(
        ViewContext viewContext,
        ViewPage page,
        RouteCollection routeCollection)
    { 
        this.ViewContext = viewContext;
        this.Page = page;
        this.RouteCollection = routeCollection;
    }

    public RouteCollection RouteCollection { get; private set; }

    public ViewContext ViewContext { get; private set; }

    public ViewPage Page { get; private set; }
}

JQueryHelper 객체를 생성할 때 현재 컨텍스트를 유지하여 다양한 확장 방법을 자체적으로 선택할 수 있도록 합니다.어떤 구성원을 보류하는지에 대해 이것은 그다지 제한이 없다. 일반적으로 말하면 충분하면 된다. 만약 부족하면 우리는 필요에 따라 보충하면 된다.다음은 웹 페이지가 이 보조 대상에 접근할 수 있도록 하는 것입니다. Html과 Url 같은 기존 입구와 달리, 우리는 속성이 아닌 확장 방법을 사용합니다.이렇게 하면 침입이 전혀 없는 상황에서 비교적 우호적인 문법을 제공할 수 있다는 장점도 확장 방법의 묘미이다.

public static class JQueryExtensions
{
    public static JQueryHelper JQuery(this ViewPage page)
    {
        var key = typeof(JQueryHelper);
        var jquery = page.Items[key] as JQueryHelper;

        if (jquery == null)
        {
            page.Items[key] = jquery = new JQueryHelper(page.ViewContext, page);
        }

        return jquery;
    }
}

ViewPage의 Items 속성은 페이지 수준의 저장 용기로서 키/값으로 임의의 데이터를 저장할 수 있습니다. 이 특성을 이용하여 각 페이지에 유일한 JQueryHelper 대상을 제공합니다.
검사
한 페이지에 여러 개의 검사가 필요한 구역이 있을 수 있기 때문에, 우리는 여러 개의 검사 정보를 저장할 수 있는 메커니즘을 제공해야 한다.따라서 일괄 검사 정보를 저장할 JQueryValidation 클래스를 작성합니다.

public class JQueryValidation
{
    public JQueryValidation(ViewPage page)
    {
        this.Page = page;
    }

    public ViewPage Page { get; private set; }

    ...
}

물론 JQueryHelper라는 입구에서 검사 정보에 접근하는 방식이 필요합니다.여기서, 우리는 문자열을 사용하여 일괄 검사 정보를 표시합니다.또한 일부 간단한 장면에서 쉽게 사용할 수 있도록 기본 리셋을 제공합니다.

public static class JQueryValidationExtensions
{
    public static JQueryValidation Validate(this JQueryHelper jquery)
    {
        return jquery.Validate("(default)");
    }

    public static JQueryValidation Validate(this JQueryHelper jquery, string name)
    {
        var key = typeof(JQueryValidation) + "+" + name;
        var page = jquery.Page;
        var validation = page.Items[key] as JQueryValidation;

        if (validation == null)
        {
            page.Items[key] = validation = new JQueryValidation(page);
        }

        return validation;
    }
}

그렇게 많은 깔개를 깔았는데, 그 다음은 가장 관건적인 보조 방법으로 엮었다.JavaScript 코드를 분석한 후에 우리는 전형적인'기록-총결산'모델로 이 방법을 작성하기로 결정했다.레코드-요약 모드의 원칙은 레코드를 통해 정보를 요약한 후 출력하는 것입니다. 페이지 액세스 방법으로 사용할 때 우리는 어느 곳에서든 정보를 검증하고 적당한 곳에서 요약된 스크립트를 출력할 수 있습니다.우리가 필요로 하는 자바스크립트는 비정상적으로 정돈되어 있기 때문에 이 수요를 실현하는 것은 결코 어렵지 않다.
우선 기록

public class JQueryValidation
{
    private Dictionary<string, Dictionary<string, object>> m_rules =
        new Dictionary<string, Dictionary<string, object>>();

    private Dictionary<string, Dictionary<string, string>> m_messages =
        new Dictionary<string, Dictionary<string, string>>();

    private void AddRuleAndMessage(string name, string rule, object value, string m
    {
        if (!this.m_rules.ContainsKey(name))
            this.m_rules[name] = new Dictionary<string, object>();
        this.m_rules[name][rule] = value;

        if (!String.IsNullOrEmpty(message))
        {
            if (!this.m_messages.ContainsKey(name))
                this.m_messages[name] = new Dictionary<string, string>();
            this.m_messages[name][rule] = message;
        }
    }

    public void Required(string name, string message)
    {
        this.AddRuleAndMessage(name, "required", true, message);
    }

    public void Email(string name, string message)
    {
        this.AddRuleAndMessage(name, "email", true, message);
    }

    public void Number(string name, string message)
    {
        this.AddRuleAndMessage(name, "number", true, message);
    }

    public void Range(string name, int min, int max, string message)
    {
        this.AddRuleAndMessage(name, "range", new int[] { min, max }, message);
    }

    ...
}

우리는 두 사전을 사용하여 각각 규칙에 대한 설명(m rules)과 오류 알림(m messages)을 저장합니다. 정보의 통일으로 인해 우리는 AddRuleAndMessage 방법을 작성하기만 하면 모든 수요를 만족시킬 수 있습니다. 다른 방법은 좋은 인터페이스를 정의한 다음에 간단하게 AddRuleAndMessage에 정보를 의뢰할 뿐입니다.
마지막으로 요약은 JavaScriptSerializer를 사용하여 규모에 대한 설명과 오류 알림을 JSON 문자열로 정렬하고 출력하는 것입니다.

public string ToScripts(string form)
{
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    StringBuilder builder = new StringBuilder();

    builder.Append("$(");
    serializer.Serialize(form, builder);
    builder.Append(").validate(");
    serializer.Serialize(
        new
        {
            rules = this.m_rules,
            messages = this.m_messages,
            onkeyup = false
        }, builder);
    builder.Append(");");

    return builder.ToString();
}

사용
레코드 - 요약, 귀가 없습니다.

<form method="post" action="" id="form">
    <p>
        <span>Name: </span> <!--    -->
        <input type="text" name="user.Name" />
        <% this.JQuery().Validate().Required("user.Name", "please provide your name!!!"); %>
    </p>
    <p>
        <span>Age: </span> <!--   ，15 28      -->
        <input type="text" name="user.Age" />
        <% this.JQuery().Validate().Required("user.Age", null); %>
        <% this.JQuery().Validate().Number("user.Age", null); %>
        <% this.JQuery().Validate().Range("user.Age", 15, 28, null); %>
    </p>
    <p>
        <span>Email:</span> <!--   ，    Email -->
        <input type="text" name="user.Email" />
        <% this.JQuery().Validate().Required("user.Email", "email please..."); %>
        <% this.JQuery().Validate().Email("user.Email", "valid email please..."); %>
    </p>
    <input type="submit" value="Submit" />
</form>

<script language="javascript" type="text/javascript">
    <%= this.JQuery().Validate().ToScripts("#form") %>
</script>

마지막으로 생성된 HTML을 보십시오.

<script language="javascript" type="text/javascript">
    $("#form").validate({ "rules": { "user.Name": { "required": true }, …
</script>

Client Access 메서드를 작성하여 번잡한 Client 스크립트를 Visual Studio에서 제시하여 쉽게 출력할 수 있는 서버 측 보조 메서드로 변경했습니다. 어떠셨습니까, 마음에 드십니까?
사실 조 씨는 아직 만족하지 않지만, 이어진 일은 다음에 다시 계속합시다.
 
주1:뭐?'기록-총결산'이라는 모드를 들어본 적이 없다고요?응, 이것은 정상이야. 왜냐하면 이것은 조 씨가 발명한 모델 중의 하나니까.