[ASP.NET] 코드를 통해 이해해보자 (aspx, aspx.cs, cs relation)

Login.aspx

<%@ Page Title="로그인" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Account_Login" Async="true" %>

<%@ Register Src="~/Account/OpenAuthProviders.ascx" TagPrefix="uc" TagName="OpenAuthProviders" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <h2><%: Title %>.</h2>

    <div class="row">
        <div class="col-md-8">
            <section id="loginForm">
                <div class="form-horizontal">
                    <h4>로컬 계정을 사용하여 로그인합니다.</h4>
                    <hr />
                    <asp:PlaceHolder runat="server" ID="ErrorMessage" Visible="false">
                        <p class="text-danger">
                            <asp:Literal runat="server" ID="FailureText" />
                        </p>
                    </asp:PlaceHolder>
                    <div class="form-group">
                        <asp:Label runat="server" AssociatedControlID="UserName" CssClass="col-md-2 control-label">사용자 이름</asp:Label>
                        <div class="col-md-10">
                            <asp:TextBox runat="server" ID="UserName" CssClass="form-control" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
                                CssClass="text-danger" ErrorMessage="사용자 이름 필드는 필수입니다." />
                        </div>
                    </div>
                    <div class="form-group">
                        <asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">암호</asp:Label>
                        <div class="col-md-10">
                            <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="Password" CssClass="text-danger" ErrorMessage="암호 필드는 필수입니다." />
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <div class="checkbox">
                                <asp:CheckBox runat="server" ID="RememberMe" />
                                <asp:Label runat="server" AssociatedControlID="RememberMe">사용자 이름 및 암호 저장</asp:Label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <asp:Button runat="server" OnClick="LogIn" Text="로그인" CssClass="btn btn-default" />
                        </div>
                    </div>
                </div>
                <p>
                    <asp:HyperLink runat="server" ID="RegisterHyperLink" ViewStateMode="Disabled">등록</asp:HyperLink>
                    로컬 계정이 없는 경우.
                </p>
            </section>
        </div>

        <div class="col-md-4">
            <section id="socialLoginForm">
                <uc:openauthproviders runat="server" id="OpenAuthLogin" />
            </section>
        </div>
    </div>
</asp:Content>

 

aspx 는 View 라고 생각하면 쉽다.

Spring 에서 thymeleaf 를 사용하여 Controller 에서 View 로 값을 넘겨주는 것처럼, ASP.NET 은 aspx, asp 가 서로 상호작용한다.

 

<%@ Page Title="로그인" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Account_Login" Async="true" %>

 

String MasterPageFile

The virtual path of the master page.

마스터 페이지는 웹사이트에서 공통적으로 사용되는 상단, 좌측,탐색 경로, 하단 영역 등을 정의 하고, 이러한 공통 영역들이 위치할 레이아웃을 지정한다.

MasterPageFile 은 마스터 페이지의 상대 경로를 나타낸다.

 

Boolean AutoEventWireup 

true if events for ASP.NET pages are automatically connected to event-handling functions; otherwise, false. The default is true.

aspx 를 asp 와 연결할 것인지(spring 으로 치면 autowired 느낌) 여부를 결정한다.

true 로 설정 시 aspx.cs 파일의 Page_Load 함수가 자동으로 실행된다.

protected void Page_Load(object sender, EventArgs e)
        {
            RegisterHyperLink.NavigateUrl = "Register";
            OpenAuthLogin.ReturnUrl = Request.QueryString["ReturnUrl"];
            var returnUrl = HttpUtility.UrlEncode(Request.QueryString["ReturnUrl"]);
            if (!String.IsNullOrEmpty(returnUrl))
            {
                RegisterHyperLink.NavigateUrl += "?ReturnUrl=" + returnUrl;
            }
        }

 

String CodeFile

연결할 asp 코드파일명을 명시해준다.

 

String Inherits

asp 의 어떤 클래스를 상속 받을지 명시해준다.

 

Boolean Async

비동기 처리 여부를 명시해준다.

 

<%@ Register Src="~/Account/OpenAuthProviders.ascx" TagPrefix="uc" TagName="OpenAuthProviders" %>

@Register

웹 페이지, 사용자 정의 컨트롤, 마스터 페이지 등의 ASP.NET 응용 프로그램에서 간단한 방법으로 사용자 지정 컨트롤을 참조할 수 있도록 태그 접두사와 사용자 지정 컨트롤을 연결

 

사용을 원하는 부분을 import 한다고 생각하면 편할 것 같다.

 

Src

import 할 파일의 절대 경로

 

TagPrefix

사용을 위한 접두사

 

TagName

해당 파일을 사용할 때 이름 ( import ~ as A )

 

사용 예시

<uc:openauthproviders runat="server" id="OpenAuthLogin" />

 

 

Body

html 의 태그 중 여럿은 aspx 형식에 맞추어 변환해야한다.

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

거창하게 작성되어 있지만, html 로 생각해보면 body 태그를 사용한 것과 같다.

runat

어디서 실행되는지 여부 : client, server

asp:Content

html 에서 사용하는 태그들 중 대부분은 aspx 형식에 맞추어 변환해주어야 한다.

html 에선 body 태그로 끝났겠지만, 용도에 따라 클래스를 검색하여 맞춰 사용해야 한다.

 

<asp:Label runat="server" AssociatedControlID="Password" CssClass="col-md-2 control-label">암호</asp:Label>

Label 태그를 사용한 것을 확인할 수 있다.

AssociatedControlID는 Server에서 해당 태그를 사용할 변수명

CssClass는 class 와 역할이 같다. 단지 asp 내에서 쓰기 때문에 CssClass 로 사용해야 한다.

ASP.Net CssClass is an abstract wrapper around the css "class" specifier.Essentially, for most intents and purposes, they are the same thing. When you set the CssClass property to some string like "someclass", the html that the WebControl will render will be class = "someclass".

 

                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <asp:Button runat="server" OnClick="LogIn" Text="로그인" CssClass="btn btn-default" />
                        </div>
                    </div>

Onclick=Login 에서 Login.aspx.cs의 Login function 으로 이동한다.

protected void LogIn(object sender, EventArgs e)
        {
            if (IsValid)
            {
                // Validate the user password
                var manager = new UserManager();
                ApplicationUser user = manager.Find(UserName.Text, Password.Text);
                if (user != null)
                {
                    IdentityHelper.SignIn(manager, user, RememberMe.Checked);
                    IdentityHelper.RedirectToReturnUrl(Request.QueryString["ReturnUrl"], Response);
                }
                else
                {
                    FailureText.Text = "Invalid username or password.";
                    ErrorMessage.Visible = true;
                }
            }
        }

aspx.cs 는 aspx 와 직접적으로 상호작용하고,

cs 는 aspx.cs 에서 사용하는 클래스, 함수들의 로직을 담당하는 그런 느낌.. 으로 이해하고 있다.