ASP를 시작하면서 WingtipToys 라는 튜토리얼 프로젝트를 다운받아서 이렇게 저렇게 공부하고 있다. ASP 가 자바와 비슷한 줄 알았더니 자못 달라서 이거 공부 좀 해야 제대로 써먹을 수 있겠다 싶다.
ASP.NET 튜토리얼 사이트 : http://www.asp.net/get-started
여기서 이내 튜토리얼 사이트를 따라가 보기 시작했다. Visual Studio 2013도 다운로드 받고 사용법도 이렇게 저렇게 클릭질 해 보면서 야심차게 시작했다.
Getting Started with ASP.NET 4.5 Web Forms and Visual Studio 2013 (10 Tutorials)
This tutorial series will teach you the basics of building an ASP.NET Web Forms application using ASP.NET 4.5 and Microsoft Visual Studio Express 2013 for Web. A Visual Studio 2013 project with C# source code is available to accompany this tutorial series.
그런데 샘플 소스가 점점 현란해 지면서 4장 정도 지날 때는 집중력이 떨어졌다. 그래서 다시 한글로 된 ASP.NET 튜토리얼을 찾아 다녀 본다. 개념도 좀더 이해하고 시작하는 게 낫겠다는 마음에서였다.
java 와 다른 점은 우선 화면이 서버에서 그려져서 클라이언트로 재전송된다는 점과 이렇다 보니 다양한 콘트롤을 제공할 수 있는 장점이 있다. java script 를 현란하게 사용해야 가능한 것들을 .NET 프레임웍에서 제공해 주는 컨트롤을 이용하기만 하면 서버에서 원하는 화면 html 소스를 생성해 주기 때문에 개발자에게 많은 수고를 덜어 줄 수 있지 않나 생각된다. 반면 서버와 클라이언트로 많은 양의 데이타들이 왔다리 갔다리 하게 되니깐 대량의 트래픽이 있는 시스템의 경우 성능이 떨어질 수 있겠다 싶다.
먼저 데이타베이스에서 데이터를 조회하는 초 간단 샘플 프로그램을 한번 만들어 보았다. GridView 이라는 콘트롤을 사용하는 예제인데 .NET 엔진이 데이타를 조회해서 GridView 가 사용된 것을 식별해 내고 GridView와 상응되는 html의 <table> 태그로 생성해서 클라이언트로 전송해 주는 구조이다.
1. 단순 조회
WingtipToys 프로젝트를 우클릭하면 메뉴가 뜨는데 여기서
Add -> New Item 메뉴를 선택한 후 WebForm 을 선택한다. 그리고 아래의 코드를 추가해 본다.
[GridView1.aspx] : Product 를 조회하는 간단한 샘플 프로그램.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridView1.aspx.cs" Inherits="WingtipToys.About" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Product List</title>
<h1>Toy Product List</h1>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView" runat="server" DataSourceID="SqlDataSource" />
<asp:SqlDataSource ID="SqlDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:WingtipToys %>"
SelectCommand="select productId,productName, description from [products]" />
</div>
</form>
</body>
</html>
Ctrl-F5 를 클릭하면 다음과 같은 실행결과 화면 을 볼 수 있다.
여기서 WingtipToys 라는 connectionStrings 를 사용했는데 이것에 대한 정보는 Web.config 파일에 기술되어 있다. WingtipToys 프로젝트에서 사용하는 로컬DB이다.
<connectionStrings>
<add name="WingtipToys"
connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"
providerName="System.Data.SqlClient" />
2. 컬럼 속성 지정
위의 예제는 컬럼이 SQL 에서 조회되는 대로 모두 화면에 표시된다. 화면에 표시되는 컬럼의 항목을 좀 더 지정을 해 볼 수 있다. GridView 설정에서 AutoGenerateColumns="False" 로 지정하고 각 컬럼에 대하여 속성을 지정할 수 있다. 프로그램을 다음과 같이 수정하고 다시 실행(F5) 을 해 본다.
[GridView2.aspx] : 조회되어 보여지는 컬럼을 개별 속성 지정하는 예제
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridView2.aspx.cs" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GridView2</title>
</head>
<body>
<h1>Toy Product List</h1>
<form id="form_gridview2" runat="server">
<div>
<asp:GridView ID="GridView2" AutoGenerateColumns="False" runat="server" DataSourceID="SqlDataSource">
<Columns>
<asp:BoundField DataField="productId" HeaderText="ID" ItemStyle-Width="50px" />
<asp:BoundField DataField="productName" HeaderText="NAME" ItemStyle-Width="100px"/>
<asp:BoundField DataField="description" HeaderText="DESCRIPTION" ItemStyle-Width="250px"/>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:WingtipToys %>"
SelectCommand="select productId,productName, description, unitPrice from [products]" />
</div>
</form>
</body>
</html>
실행 결과는 처음과 거의 동일하게 나타나는 것을 알 수 있다.
3.스크립트를 이용한 쿼리
html 부분의 소스는 최소한으로 간단하게 하고 sql 부분을 스크립트에서 실행할 수 있다.
[GridView3.aspx]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridView3.aspx.cs" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["WingtipToys"].ConnectionString);
conn.Open();
string query = "select productId,productName, description from [products]";
System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(query, conn);
System.Data.SqlClient.SqlDataReader rd = cmd.ExecuteReader();
ProductGridView3.DataSource = rd;
ProductGridView3.DataBind();
rd.Close();
conn.Close();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GridView3</title>
</head>
<body>
<h1>Toy Product List 3</h1>
<form id="form_gridview3" runat="server">
<div>
<asp:GridView ID="ProductGridView3" runat="server" >
</asp:GridView>
</div>
</form>
</body>
</html>
4. Behind Script 를 이용한 쿼리
데이타를 쿼리하는 부분을 비하인드스크립트(behind script) cs 파일 속으로 옮겨 버리면 좀 더 소스가 깔끔할 것이다.
파일을 두개로 나누어서 GridView3.aspx 와 GridView3.aspx.cs 를 아래와 같이 새로 만들어 실행해 본다.
[GridView5.aspx]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridView5.aspx.cs" Inherits="WingtipToys.GridView5" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Product List 5</title>
</head>
<body>
<h1>Toy Product List 5</h1>
<form id="form1" runat="server">
<div>
<asp:GridView ID="ProductGridView5" runat="server" >
</asp:GridView>
</div>
</form>
</body>
</html>
[GridView5.aspx.cs]
using System;
using System.Configuration;
using System.Data.SqlClient;
namespace WingtipToys
{
public partial class GridView5 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["WingtipToys"].ConnectionString);
conn.Open();
string query = "select productId,productName, description from [products]";
SqlCommand cmd = new SqlCommand(query, conn);
SqlDataReader rd = cmd.ExecuteReader();
ProductGridView5.DataSource = rd;
ProductGridView5.DataBind();
rd.Close();
conn.Close();
}
}
}
실행결과는 처음의 결과와 거의 동일하게 나오는 것을 알 수 있다.
'컴퓨터활용 > ASP.NET' 카테고리의 다른 글
| ASP.NET INSERT 간단 샘플 (0) | 2015.04.30 |
|---|