* 여기서는 "ASP.NET의 유효성 검사 컨트롤"인 [FrmRegularExpressionValidator.aspx] 와 "HTML레벨"의 [FrmRegularExpressionValidator.htm]의 예제로 각각 비교해보았다.

 

 

==> [FrmRegularExpressionValidator.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmRegularExpressionValidator.aspx.cs"

    Inherits="FrmRegularExpressionValidator" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        정규식(정규표현식) 검사?<br />

        이메일 :

        <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

        <asp:RegularExpressionValidator ID="valEmail" runat="server" ControlToValidate="txtEmail"

            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ErrorMessage="이메일을 정확히"></asp:RegularExpressionValidator>

        <br />

        <br />

        <asp:ImageButton ID="btnOK" runat="server" AlternateText="확인" />

    </div>

    </form>

</body>

</html>

 

 

 

<!-- 정규식에 대해 더 공부하고 싶으면 regexlib.com 에 들어가서 공부해라 -->

 

 


 
 

 


-------------------------------------------------------------------------------------

 


[실행결과]

--> 아래그림에서 '텍스트박스'에 "정규식"에 어긋나게 텍스트(aaaaaaaaa)를 입력한 후 아래에 있는 "확인"버튼을 누르면 "RegularExpressionValidator"컨트롤에 빨간 글씨로 '에러메시지' 가 출력된다.



 


-------------------------------------------------------------------------------------

 


==> [FrmRegularExpressionValidator.htm] 소스 및 디자인

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        function CheckEmail() {

            if (check_mail(document.getElementById("txtEmail"))) {

                alert("OK");

            }

            else {

                alert("듀글래?");

            }

        }

        //[5] 메일주소 검사

        function check_mail(cg) {

            /// <summary>

            /// 맞으면 true

            /// </summary>

            EmailEx1 = /[^@]+@[A-Za-z0-9_\-]+\.[A-Za-z]+/;

            EmailEx2 = /[^@]+@[A-Za-z0-9_\-]+\.[A-Za-z0-9_\-]+\.[A-Za-z]+/;

            EmailEx3 = /[^@]+@[A-Za-z0-9_\-]+\.[A-Za-z0-9_\-]+\.[A-Za-z0-9_\-]+\.[A-Za-z]+/;

            if (EmailEx1.test(cg.value)) return true;

            if (EmailEx2.test(cg.value)) return true;

            if (EmailEx3.test(cg.value)) return true;

            return false;

        }       

    </script>

</head>

<body>

이메일 : <input type="text" id="txtEmail" /><br />

<input type="button" value="체크" onclick="CheckEmail()" />

</body>

</html>

 

 


 

 

-------------------------------------------------------------------------------------

 


[실행결과]

--> '텍스트박스'에 "정규식"의 형식에 맞게 '텍스트'를 입력(b@b.com)하고 "체크"버튼을 누르면 아래그림과 같이 메시지박스가 출력된다.





--> '텍스트박스'에 "정규식"의 형식에 어긋나게 '텍스트'를 입력(bbbbbb)하고 "체크"버튼을 누르면 아래그림과 같이 메시지박스가 출력된다.

 

 

 

Posted by holland14
:




* "CompareValidator"컨트롤은 "암호확인"할 때 주로 쓰는 유효성 검사 컨트롤이다. 여기서는 "ASP.NET의 유효성 검사 컨트롤"인 [FrmCompareValidator.aspx] 와 "HTML레벨"의 [FrmCompareValidator.htm]의 예제로 각각 비교해보았다.





==> [FrmCompareValidator.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmCompareValidator.aspx.cs" Inherits="FrmCompareValidator" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

   

   

        비교<br />

        <br />

        암호 :

        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>

        <asp:CompareValidator ID="valPassword" runat="server"

            ControlToValidate="txtPassword"

            ControlToCompare="txtPasswordConfirm"

            Type="String"

            ErrorMessage="암호를 확인하세요."></asp:CompareValidator>

        <br />

        암호확인 ;

        <asp:TextBox ID="txtPasswordConfirm" runat="server"></asp:TextBox>

        <br />

        <br />

        <asp:LinkButton ID="btnLogin" runat="server">로그인</asp:LinkButton>

   

   

   

    </div>

    </form>

</body>

</html>

 

 


 

 


-------------------------------------------------------------------------------------

 


[실행결과]

--> 아래그림에서 첫번째 텍스트박스에 텍스트('12345')를 입력하고 아래의 텍스트박스에 포커스를 옮기는 순간 아래그림과같이 "CompareValidator"컨트롤에 빨간글씨로 텍스트가 출력된다.





--> 아래그림은 두 개의 텍스트박스에 모두 똑같은 텍스트('12345')를 입력한 후 '로그인'버튼을 눌렀을 때의 화면이다.




--> 아래그림에서 두 개의 텍스트박스에 다른 텍스트를 입력한 후 '로그인'버튼을 누르면 "CompareValidator"컨트롤에 빨간글씨로 텍스트가 출력된다.

 



-------------------------------------------------------------------------------------

 


==> [FrmCompareValidator.htm] 소스 및 디자인

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        function Ok() {

            if (document.getElementById("txtPassword").value !=

                document.getElementById("txtPasswordConfirm")) {

                alert("암호를 틀립니다.");

                document.getElementById("txtPassword").select(); // 선택

            }

            else {

                alert("유효성 검사 통과");

            }

        }

    </script>

</head>

<body>

 

비교<br />

 

암호 : <input type="text" id="txtPassword" name="txtPassword" /><br />

암호확인 : <input type="text" id="txtPasswordConfirm" name="txtPasswordConfirm" /><br />

 

<input type="button" value="확인" onclick="Ok();" />

 

</body>

</html>

 

 




 

 

-------------------------------------------------------------------------------------

 


[실행결과]

--> 아래그림에서 두 개의 텍스트박스에 다른 텍스트를 입력한 후 '확인'버튼을 누르면 아래그림과 같이 "메시지박스"가 출력된다.


 

 

 

Posted by holland14
:


* 여기서는 "ASP.NET의 유효성 검사 컨트롤"인 [FrmRangeValidator.aspx] 와 "HTML레벨"의 [FrmRangeValidator.htm]의 예제로 각각 비교해보았다.

 

 

==> [FrmRangeValidator.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmRangeValidator.aspx.cs" Inherits="FrmRangeValidator" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

       

        범위<br />

        <br />

        나이 :

        <asp:TextBox ID="txtAge" runat="server"></asp:TextBox>

        (1~150)

        <asp:RangeValidator ID="valAge" runat="server"

            ControlToValidate="txtAge"

            MinimumValue="1"

            MaximumValue="150"

            Type="Integer"

            ErrorMessage="나이는 1~150까지 입력하시오."></asp:RangeValidator>

        <br />

        <br />

        <asp:Button ID="btnLogin" runat="server" Text="로그인" />

   

    </div>

    </form>

</body>

</html>

 

 


 


 


-------------------------------------------------------------------------------------

 


[실행결과]

--> "범위(1~150)"밖의 값을 텍스트박스에 입력하고 '로그인'버튼을 누르면 아래 그림과 같이 "RangeValidator"컨트롤에 빨간글씨로 텍스트가 출력된다.





--> "범위(1~150)"내의 값을 텍스트박스에 입력하고 '로그인'버튼을 누른 후 결과화면.
 

 


-------------------------------------------------------------------------------------

 


==> [FrmRangeValidator.htm] 소스 및 디자인

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script>

        function CheckLogin() {

            var varAge = parseInt(document.getElementById("txtAge").value); // 값을 받아서 정수형

            if (varAge < 1 || varAge > 150) {

                alert("나이는 1~150까지 입력하시오.");

                document.getElementById("txtAge").focus(); // 포커스

                return false; // 멈춤

            }

            else {

                alert("하하 맞았음");

                return true; // 진행

            }

        }

    </script>

</head>

<body>

 

<form id="frmLogin" action="" method="post" onsubmit=" return CheckLogin(); "> <!-- onsubmit=" return CheckLogin(); " return 'false'이면 멈추고, return 'true'이면 진행해라 라는 뜻이다. -->

나이 : <input type="text" id="txtAge" name="txtAge" />(1~150)<br />

<input type="submit" value="체크" />

</form>

 

</body>

</html>

 

 

 



 

 

-------------------------------------------------------------------------------------

 


[실행결과]

--> "범위(1~150)"밖의 값을 텍스트박스에 입력하고 '체크'버튼을 누르면 아래 그림과 같이 "메시지박스"가 출력된다.





--> "범위(1~150)"내의 값을 텍스트박스에 입력하고 '체크'버튼을 누른 후 결과화면.







 

 

 

 

Posted by holland14
:


* 여기서는 "ASP.NET의 유효성 검사 컨트롤"인 [FrmRequiredFieldValidator.aspx] 와 "HTML레벨"의 [FrmRequiredFieldValidator.htm]의 예제로 각각 비교해보았다.





==> [FrmRequiredFieldValidator.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmRequiredFieldValidator.aspx.cs" Inherits="FrmRequiredFieldValidator" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

        입력 확인 유효성 검사 컨트롤<br />

        <br />

        아이디 :

        <asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>

        [<asp:RequiredFieldValidator ID="valUserID" runat="server"

            ControlToValidate="txtUserID" ValidationGroup="Login" Display="Dynamic" 

            ErrorMessage="아이디를 입력하시오."></asp:RequiredFieldValidator>

        ]<br />

        암호 :

        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>

        [<asp:RequiredFieldValidator ID="valPassword" runat="server"

            ControlToValidate="txtPassword" ValidationGroup="Login" Display="Static"

            ErrorMessage="암호를 입력하시오."></asp:RequiredFieldValidator>

        ]<br />

        <br />

        <asp:Button ID="btnLogin" runat="server" Text="로그인" ValidationGroup="Login" />

   

        <asp:Button ID="Button1" runat="server" Text="Button" />

   

    </div>

    </form>

</body>

</html>

 

 



 


 

-------------------------------------------------------------------------------------

 


[실행결과]

--> '아이디', '암호'텍스트박스에 텍스트를 입력하지 않고 "로그인"버튼을 눌렀을 경우





--> '아이디'텍스트박스에만 텍스트를 입력하고 "로그인"버튼을 눌렀을 경우




--> "로그인"버튼 옆에있는 "Button"버튼을 눌렀을 경우.(-> 아무런 반응이 일어나지 않는다.)(여기서는 [FrmRequiredFieldValidator.aspx] 소스코드 중 '아이디', '암호'텍스트박스와 "로그인"버튼의 코드에 모두 ValidationGroup="Login"으로 입력하여, "로그인"버튼을 눌렀을 때만 "RequiredFieldValidator"컨트롤이 실행되게 하였다.)



-------------------------------------------------------------------------------------




==> [FrmRequiredFieldValidator.htm] 소스 및 디자인

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        function CheckLogin() {

            var userId = document.getElementById("txtUserID");

            if (userId.value == "") {

                alert("아이디를 입력하시오.");

                userId.focus();

                userId.select();

            }

            else {

                // 전송관련코드

            }

        }

    </script>

</head>

<body>

 

<form>

아이디 : <input type="text" name="txtUserID" id="txtUserID" /><br />

<input type="button" value="로그인" onclick="CheckLogin()" />

</form>

 

</body>

</html>

 

 

 





 

-------------------------------------------------------------------------------------

 


[실행결과]

--> '아이디'텍스트박스에 아무런 텍스트도 입력하지 않고 '로그인'버튼을 누르면 아래그림과 같이 "메시지박스"가 출력된다.





--> '아이디'텍스트박스에 텍스트를 입력하고 '로그인'버튼을 클릭하면 아래그림과같이 아무런 반응이 없다.( [FrmRequiredFieldValidator.htm] 소스코드에서 "else문"의 "전송관련코드"('아이디'를 텍스트박스에 입력하고 '로그인'버튼을 눌렀을 경우에 일어날 동작에 대한 코드)를 작성하지 않았기 때문에 아무런 반응이 일어나지 않는 것이다.)

 

 

 

 

'.NET프로그래밍 > ASP.NET 3.5 SP1' 카테고리의 다른 글

FrmCompareValidator (비교)  (0) 2009.10.13
FrmRangeValidator (범위)  (0) 2009.10.13
"기본형 게시판" 만들기 - WebBasic  (0) 2009.10.09
FrmFileUpload  (0) 2009.10.08
FrmHtml  (0) 2009.10.08
Posted by holland14
:

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.


* 'Visual Studio'의 '솔루션 탐색기'에서 프로젝트 경로인 "C:\...\WebStandardControl\"에 마우스 우클릭하여 "새 폴더"를 생성(추가)하고, 폴더이름은 "files"라고 지정한다("files"폴더에 '파일'을 "업로드"하기 위하여 "files"폴더를 생성한 것이다.). 그런 다음에 아래와 같이 코드를 작성한다.




==> [FrmFileUpload.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmFileUpload.aspx.cs" Inherits="FrmFileUpload" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

        <asp:FileUpload ID="ctlFileUpload" runat="server" />

        <asp:Button ID="btnUpload" runat="server" Text="파일 업로드"

            onclick="btnUpload_Click" />

        <br />

        <asp:Label ID="lblDisplay" runat="server" Text=""></asp:Label>

   

    </div>

    </form>

</body>

</html>

 

 


 

 

-------------------------------------------------------------------------------------

 


==> [FrmFileUpload.aspx.cs] 소스

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

public partial class FrmFileUpload : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

 

 

    protected void btnUpload_Click(object sender, EventArgs e)

    {

        // 파일이 첨부되었는지 확인

        if (ctlFileUpload.HasFile)

        {

            // 업로드 : 같은경로의 files라는 폴더에 넘겨져온 파일명(폴더명X)으로 저장

            ctlFileUpload.SaveAs(

                Server.MapPath(".") + "\\files\\" + ctlFileUpload.FileName);

           

            // 다운로드 링크 만들기

            string down =

                String.Format("<a href='{0}{2}'>{1}</a>"

                , "./files/"

                , Server.UrlPathEncode(ctlFileUpload.FileName)

                , ctlFileUpload.FileName);

            lblDisplay.Text = "업로드되었습니다.<hr />" + down + "<hr />"

                + "파일사이즈 : " + ctlFileUpload.PostedFile.ContentLength.ToString();

        }

        else

        {

            lblDisplay.ForeColor = System.Drawing.Color.Red;

            lblDisplay.Text = "파일을 첨부하세요.";

        }

    }

}

 

 

-------------------------------------------------------------------------------------

 


[실행결과]

--> 실행 후 첫 화면. 아래그림의 웹페이지에서 "업로드"할 파일을 찾아보기위해서 "찾아보기..."버튼을 마우스로 클릭하면...





--> 아래그림과 같이 "업로드할 파일 선택"창이 뜨고, 창에서 업로드할 파일을 선택하여 '열기'버튼을 마우스로 클릭하면...




--> 아래그림처럼 웹 페이지의 "텍스트박스"에 '선택한 파일의 경로'가 '텍스트'로 출력된다. 그 다음 "파일 업로드"버튼을 마우스로 클릭하면...




--> 아래그림에서처럼 '텍스트박스'아래의 "레이블"에 '업로드실행결과'와 '업로드한 파일이름'과 '업로드한 파일의 사이즈'가 출력된다.(참고로, 업로드를 실행한 파일(여기서는 "37.png"파일이다.)은 위에서 미리 만들어놓은 "files"폴더에 업로드된다.)
 



 

 


 

Posted by holland14
:


* 이전에 "FrmAdRotator (광고 컨트롤)"에서 "C:\...\WebStandardControl\"에 마우스 우클릭하여 "새 폴더"추가로 생성했었던 "images"폴더에 "btn_home.gif"이라는 '집그림의 이미지파일'을 추가하여 저장한다.( 이것은 [FrmHtml.aspx] 소스코드 중 "이미지"코드부분과 '하이퍼링크'가 걸려있는 "이미지맵"코드부분에서 사용할 '이미지파일'로 쓰기위해서이다.) 그런 다음에 아래와 같이 코드를 작성한다.




==> [FrmHtml.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmHtml.aspx.cs" Inherits="FrmHtml" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>HTML 대체 컨트롤</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

        하이퍼링크 : <a href="http://www.dotnetkorea.com/" title="닷코로이동" target="_blank">닷넷코리아</a>

        <asp:HyperLink ID="lnkDotNetKorea" runat="server"

            NavigateUrl="http://www.dotnetkorea.com/"

            Target="_blank"

            Tooltip="닷넷코리아로이동">

            닷넷코리아

        </asp:HyperLink><br />

        <br />

       

        이미지 :

        <img src="./images/btn_home.gif" alt="홈으로..." title="홈으로..." />

        <asp:Image ID="imgHome" runat="server" ImageUrl="./images/btn_home.gif" ToolTip="홈으로..."

            AlternateText="홈으로..." /><br />

        <br />

       

        이미지맵 :

        <img src="./images/btn_home.gif" border="0" usemap="#GoHome"/>

        <map name="GoHome">

            <area shape="circle" coords="16, 16 ,5" href="http://www.dotnetkorea.com/"

                alt="닷넷코리아" target="_blank" />

            <area shape="rect" coords="0,0,5,5" href="http://www.taeyo.net/" alt="태오닷넷" />

        </map>

       

        <asp:ImageMap ID="mapHome" runat="server" ImageUrl="./images/btn_home.gif">

            <asp:RectangleHotSpot AlternateText="태오닷넷" Bottom="5" HotSpotMode="Navigate"

                NavigateUrl="http://taeyo.net" Right="5" Target="_blank" />

            <asp:CircleHotSpot AlternateText="닷넷코리아" HotSpotMode="Navigate"

                NavigateUrl="http://www.dotnetkorea.com/"

                Radius="5" Target="_blank" X="16" Y="16" />

        </asp:ImageMap><br />

        <br />

       

        <br />   

        테이블 :

        <br />

        <!-- HTML코드(태그) : 정적이다. -->       

        <table border="1">

            <tr>

                <td>

                    11열테이블

                </td>

            </tr>

        </table>

       

       

       

        <br />

        <!-- ASP.NET코드(서버컨트롤) : 동적이다. -->

        <asp:Table ID="tblTable" runat="server" GridLines="Both">

            <asp:TableRow ID="TableRow1" runat="server">

                <asp:TableCell ID="TableCell1" runat="server" BackColor="Lime">11</asp:TableCell>

                <asp:TableCell ID="TableCell2" runat="server" BackColor="Yellow">12</asp:TableCell>

            </asp:TableRow>

            <asp:TableRow ID="TableRow2" runat="server">

                <asp:TableCell ID="TableCell3" runat="server" BackColor="Blue">21</asp:TableCell>

                <asp:TableCell ID="TableCell4" runat="server" BackColor="Red">22</asp:TableCell>

            </asp:TableRow>

        </asp:Table>

       

       

       

        <br /><br /><br />

        목록:

        <!-- HTML코드(태그) : 정적이다. -->

        <ul>

            <li>C#</li>

            <li>ASP.NET</li>       

        </ul>

       

       

               

        <!-- ASP.NET코드(서버컨트롤) : 동적이다. -->

        <asp:BulletedList ID="bulFavorite" runat="server" BulletStyle="UpperRoman">

            <asp:ListItem>C#</asp:ListItem>

            <asp:ListItem>ASP.NET</asp:ListItem>

        </asp:BulletedList>

    </div>

    </form>

</body>

</html>


 

 




 

-------------------------------------------------------------------------------------

 


==> [FrmHtml.aspx.cs] 소스

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

public partial class FrmHtml : System.Web.UI.Page

{
    // 페이지 로드시에 '동적'으로 '목록(List)'에 '데이터(ListItem)'를 추가

    protected void Page_Load(object sender, EventArgs e)

    {

        bulFavorite.Items.Add(new ListItem("Silverlight", "Ria"));

    }

}

 

 

-------------------------------------------------------------------------------------

 


[실행결과]

--> 위에 있는 [FrmHtml.aspx] 소스코드는 "HTML태그"를 대체할 수 있는 "ASP.NET 웹표준컨트롤"을 비교해본 예제이다. [FrmHtml.aspx] 소스코드에서 "하이퍼링크"/ "이미지"/"이미지맵"/"테이블"/"목록(List)"에서 각각의 예제소스코드를 "HTML태그"와 "ASP.NET 웹표준컨트롤"로 하나씩 작성하여 각각 비교해보았다. 실행해보면 아래그림과 같이 웹 페이지에 각각의 부문에서 한쌍씩 출력되는데, 웹 페이지의 결과를 살펴보면 "ASP.NET 웹표준컨트롤"을 사용해서도 "HTML태그"를 대체할 수 있거나, 이에 더하여 "동적인 기능"도 추가할 수 있다. 이것은 "동적인 ASP.NET 웹표준컨트롤(서버컨트롤)"이 "정적인 HTML태그"에 비해 갖는 장점이다.(아래그림을 살펴보면 "하이퍼링크"/"이미지"/"이미지맵"에서의 기능은 "ASP.NET 웹표준컨트롤"을 사용하여 "HTML태그"를 사용한 것과 동일하게 출력하였으며, "테이블"에서는 아래쪽의 4가지색으로 칠해진 테이블은 "ASP.NET 웹표준컨트롤"을 사용하여 "동적"으로 웹 페이지에 출력해 본 것이다. 그리고 웹 페이지 맨아래부분의 "목록"은 [FrmHtml.aspx] 소스코드에서 "ASP.NET 웹표준컨트롤"소스를 보면 목록<List>에 입력된 "ListItem"은 2개('C#'과 'ASP.NET')이다. 하지만 웹 페이지에 '목록'이 출력될 때는 "ListItem"이 3개로(->동적으로) 늘어난 것을 볼 수 있다('C#'과 'ASP.NET'에 더하여 "Silverlight"가 추가되었다.). 이것도 [FrmHtml.aspx] 소스코드에서의 "ASP.NET 웹표준컨트롤(서버컨트롤)"사용과 함께 [FrmHtml.aspx.cs] 소스코드에서 "C#코드를 작성"하여, 실행 후 웹 페이지에서 '페이지 로드시'에 '동적'으로 '목록(List)'에 '데이터(ListItem)'가 추가되도록 "동적인 기능을 구현"한 것이다.)

 

 

* 참고사항 - 클라이언트(Client)의 방문이 많은(가령 클라이언트가 10만이상 규모의 큰 웹 사이트) 웹사이트는 "ASP.NET 웹표준컨트롤"로 "HTML태그"를 대체할 수 있더라도 성능(속도)에서 차이가 나므로(("ASP.NET 웹표준컨트롤"보다 비교적 가벼운)"HTML태그"가 더 빠르다.) 가급적 "HTML태그"로 코드를 작성하는 방법을 추천한다.








 

'.NET프로그래밍 > ASP.NET 3.5 SP1' 카테고리의 다른 글

"기본형 게시판" 만들기 - WebBasic  (0) 2009.10.09
FrmFileUpload  (0) 2009.10.08
FrmPlaceHolder (자리표시자)  (0) 2009.10.08
FrmPanel  (0) 2009.10.08
FrmXml (XML 컨트롤)  (0) 2009.10.08
Posted by holland14
:


==> [FrmPlaceHolder.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmPlaceHolder.aspx.cs" Inherits="FrmPlaceHolder" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>자리표시자</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

        텍스트/HTML이 들어올자리 :

        <asp:Literal ID="Literal1" runat="server"></asp:Literal>

       

        <hr />

       

        서버컨트롤이 들어올자리 :    

        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

       

        <br />

        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

       

        <hr />

        <asp:Button ID="btnGetText" runat="server"

            Text="동적버튼의 텍스트를 읽어오자." onclick="btnGetText_Click" />

       

    </div>

    </form>

</body>

</html>

 

 


 

 

-------------------------------------------------------------------------------------

 


==> [FrmPlaceHolder.aspx.cs] 소스

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

public partial class FrmPlaceHolder : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        this.Literal1.Text = "안녕<br />방가<br />";

 

        // 동적으로 컨트롤 생성

        Button btn = new Button();

 

        // 버튼의 주요 속성 지정

        btn.ID = "btnClick";

        btn.Text = "클릭하세요.";

 

        // 이벤트 처리기 구현

        btn.Click +=

            //new EventHandler(btn_Click);

            delegate(object obj, EventArgs args)

            {

                this.Label1.Text = "무명메서드로 출력";

            };

 

        // PlaceHolder에 추가

        this.PlaceHolder1.Controls.Add(btn);

 

        Label lbl = new Label();

        lbl.ID = "lblDisplay";

        lbl.Text = "동적으로 만들어진 레이블";

        this.PlaceHolder1.Controls.Add(lbl);

    }

 

    //void btn_Click(object sender, EventArgs e)

    //{

    //    this.Label1.Text = "버튼이 클릭되었습니다.";

    //}   

 

    protected void btnGetText_Click(object sender, EventArgs e)

    {

        // PlaceHolder 'btnClick'개체를 찾아서 '버튼'형태로 변환 후 'Text'속성 요청

        Label1.Text = ((Button)this.PlaceHolder1.FindControl("btnClick")).Text;

        ((Label)this.PlaceHolder1.FindControl("lblDisplay")).Text = DateTime.Now.ToShortTimeString();

    }

}

  

 

-------------------------------------------------------------------------------------

 


[실행결과]

--> 실행 후 첫 화면. 아래그림의 웹 페이지에서 '클릭하세요'버튼을 마우스로 클릭하면...





--> 바로 아랫줄의 "레이블"에 텍스트("무명메서드로 출력")가 출력된다. 그 다음에 아래그림의 "동적버튼의 텍스트를 읽어오자"버튼을 마우스로 클릭하면...




--> 위의그림에서 "동적으로 만들어진 레이블"이라고 텍스트가 쓰여져 있던 "PlaceHolder 컨트롤"의 위치에 현재시간이 출력됨과 동시에, 바로위의그림에서 "무명메서드로 출력"이라고 텍스트가 출력되었던 "레이블"도 '클릭하세요.'버튼의 텍스트인 "클릭하세요."라고 텍스트가 변경되어 출력되었다.
 

 

 


 

'.NET프로그래밍 > ASP.NET 3.5 SP1' 카테고리의 다른 글

FrmFileUpload  (0) 2009.10.08
FrmHtml  (0) 2009.10.08
FrmPanel  (0) 2009.10.08
FrmXml (XML 컨트롤)  (0) 2009.10.08
FrmAdRotator (광고 컨트롤)  (0) 2009.10.07
Posted by holland14
:


==> [FrmPanel.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmPanel.aspx.cs" Inherits="FrmPanel" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <h3>레이어의 역할</h3>

        <div style="background-color:Green;">레이어</div>

        <asp:Panel ID="Panel1" runat="server"

            BackColor="Yellow"

            BorderColor="Red"

            Width="70px" Height="50px"

            ScrollBars="Auto"

            Wrap="true"

    >

            안녕하세요<br />

            안녕하세요<br />

            안녕하세요<br />

            안녕하세요<br />

            안녕하세요<br />

    </asp:Panel>

   

    <asp:Button ID="Button1" runat="server" Text="동적변경" onclick="Button1_Click" />

   

    <h3>그룹박스의 역할</h3>

    <fieldset>

        <legend>제목</legend>

        <p>내용</p>

    </fieldset>

   

    <asp:Panel ID="grpBox" runat="server"

        GroupingText="공지사항" Width="100px">

        반갑습니다.<br />

    </asp:Panel>   

    </div>

    </form>

</body>

</html>

 

 

 

<!-- "패널(Panel)컨트롤" "레이어(영역 컨트롤)"이다. '패널컨트롤' '<div>컨트롤'로 묶여진다. -->

 

 

 


 

 

-------------------------------------------------------------------------------------

 


==> [FrmPanel.aspx.cs] 소스

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Drawing;

 

public partial class FrmPanel : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

 

    }

 

    protected void Button1_Click(object sender, EventArgs e)

    {

        this.Panel1.BackColor = Color.Gray;

        this.Panel1.Width = Unit.Pixel(200);

        this.Panel1.BorderStyle = BorderStyle.Dotted;

    }

}

 

 

-------------------------------------------------------------------------------------

 


[실행결과]

--> 실행 후 웹 페이지에 출력된 첫 화면. 아래그림에서 "패널(Panel)"컨트롤 아래에 있는 '동적변경'버튼을 마우스로 클릭해보면...





--> '동적변경'버튼 위의 "패널(Panel)"컨트롤이 "동적"으로 변경되었다.(이는 '정적'인 "HTML태그"와 대비되는 "ASP.NET 서버 컨트롤"의 특징이자 장점이다.)
 

 

 


 

'.NET프로그래밍 > ASP.NET 3.5 SP1' 카테고리의 다른 글

FrmHtml  (0) 2009.10.08
FrmPlaceHolder (자리표시자)  (0) 2009.10.08
FrmXml (XML 컨트롤)  (0) 2009.10.08
FrmAdRotator (광고 컨트롤)  (0) 2009.10.07
FrmCalendar  (0) 2009.10.07
Posted by holland14
:


* "C:\...\WebStandardControl\"에 마우스 우클릭하여 "새 항목 추가"로 "웹 폼(Web Form)"형태의 파일인 "FrmXml.aspx"와 "XML 파일"형태인 "FrmXml.xml"과 "XSLT 파일"형태인 "FrmXml.xsl"파일을 각각(총 3개) 생성한 후 아래와 같이 코딩한다. (참고로, "XSLT 파일"은 확장자명이 원래는 "*.xslt"로 표기되어 출력되지만, 확장자명의 맨끝의 "t"를 생략하여 "*.xsl"로 확장자명을 지정해도 상관없다.)




==> [FrmXml.aspx] 소스 및 디자인

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmXml.aspx.cs" Inherits="FrmXml" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>XML 컨트롤</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

        <h3>회사소개</h3>

   

        <asp:Xml ID="Xml1" runat="server"

            DocumentSource="~/FrmXml.xml"

            TransformSource="FrmXml.xsl"           

        ></asp:Xml>

    </div>

    </form>

</body>

</html>

 

 


 

 

-------------------------------------------------------------------------------------

 


==> [FrmXml.xml] 소스코드

 

<?xml version="1.0" encoding="utf-8" ?>

<Company>

  <CompanyName>비주얼아카데미</CompanyName>

  <CompanyNumber>1234-5678</CompanyNumber>

  <CompanyAddress>경기도</CompanyAddress>

  <CompanyAddressDetail>부천시</CompanyAddressDetail>

  <Name>홍길동</Name>

  <CompanyType>서비스</CompanyType>

  <CompanyStyle>온라인교육</CompanyStyle>

  <Operator>백두산</Operator>

  <Phone>114</Phone>

  <Fax>114</Fax>

  <Email>h@h.com</Email>

</Company>

 

 

 

<!-- XML - 어떤 키값을 가지고 데이터를 저장하는 공간이다. -->

 

 

 

-------------------------------------------------------------------------------------

 


==> [FrmXml.xsl] 소스코드



<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"

> 

    <xsl:output method="xml" indent="yes"/>

    <xsl:template match="/Company">

 

      <h3>회사소개</h3>

      <table border="1" width="100%">

        <tr>

          <td width="180">사업자명</td>

          <td><xsl:value-of select="CompanyName"></xsl:value-of></td>

        </tr>

       

        <tr>

          <td width="180">사업자번호</td>

          <td><xsl:value-of select="CompanyNumber"></xsl:value-of></td>

        </tr>

 

        <tr>

          <td width="180">소재지</td>

          <td>

            <xsl:value-of select="CompanyAddress"></xsl:value-of>

          </td>

        </tr>

       

        <tr>

          <td width="180">전화번호</td>

          <td>

            <xsl:value-of select="Phone"></xsl:value-of>

          </td>

        </tr>

       

        <tr>

          <td width="180">팩스번호</td>

          <td>

            <xsl:value-of select="Fax"></xsl:value-of>

          </td>

        </tr>

       

        <tr>

          <td width="180">이메일</td>

          <td>

            <xsl:value-of select="Email"></xsl:value-of>

          </td>

        </tr>

       

        <tr>

          <td width="180">통신 판매업무 책임자</td>

          <td>

            <xsl:value-of select="Operator"></xsl:value-of>

          </td>

        </tr>             

      </table>

       

    </xsl:template>

</xsl:stylesheet>

 

 

 

 

<!-- 'xsl(xslt)파일' '저장된 xml파일' 'HTML형태'로 보여주는 역할을 한다. -->

<!-- xsl문법 : <xsl:value-of select="필드명"></xsl:value-of> -->

  

 

  

-------------------------------------------------------------------------------------

 


[실행결과]

--> [FrmXml.xml]파일에 저장되어있는 "데이터"가 [FrmXml.xsl]파일의 형식에 맞춰져서 "테이블"형태로 (데이터가) 웹 페이지에 출력되었다.

 

 

 

 

'.NET프로그래밍 > ASP.NET 3.5 SP1' 카테고리의 다른 글

FrmPlaceHolder (자리표시자)  (0) 2009.10.08
FrmPanel  (0) 2009.10.08
FrmAdRotator (광고 컨트롤)  (0) 2009.10.07
FrmCalendar  (0) 2009.10.07
FrmInputControl  (0) 2009.10.07
Posted by holland14
: