데이터 항목 및 세부 정보 표시
작성자 : Erik Reitan
이 자습서 시리즈에서는 ASP.NET 4.7 및 Microsoft Visual Studio 2017을 사용하여 ASP.NET Web Forms 애플리케이션을 빌드하는 기본 사항을 설명합니다.
이 자습서에서는 ASP.NET Web Forms 및 Entity Framework Code First를 사용하여 데이터 항목 및 데이터 항목 세부 정보를 표시하는 방법을 알아봅니다. 이 자습서는 Wingtip Toy Store 자습서 시리즈의 일부로 이전 "UI 및 탐색" 자습서를 기반으로 합니다. 이 자습서를 완료하면 ProductsList.aspx 페이지에 제품이 표시되고 ProductDetails.aspx 페이지에 제품의 세부 정보가 표시됩니다.
이 문서에서 배울 내용은 다음과 같습니다.
- 데이터 컨트롤을 추가하여 데이터베이스의 제품 표시
- 선택한 데이터에 데이터 컨트롤 연결
- 데이터 컨트롤을 추가하여 데이터베이스의 제품 세부 정보 표시
- 쿼리 문자열에서 값을 검색하고 해당 값을 사용하여 데이터베이스에서 검색되는 데이터를 제한합니다.
이 자습서에 도입된 기능:
- 모델 바인딩
- 값 공급자
데이터 컨트롤 추가
몇 가지 다른 옵션을 사용하여 데이터를 서버 컨트롤에 바인딩할 수 있습니다. 가장 일반적인 하위 명령은 다음과 같습니다.
- 데이터 원본 컨트롤 추가
- 직접 코드 추가
- 모델 바인딩 사용
데이터 원본 컨트롤을 사용하여 데이터 바인딩
데이터 원본 컨트롤을 추가하면 데이터 원본 컨트롤을 데이터를 표시하는 컨트롤에 연결할 수 있습니다. 이 방법을 사용하면 프로그래밍 방식으로 서버 쪽 컨트롤을 데이터 원본에 연결하지 않고 선언적으로 연결할 수 있습니다.
데이터를 바인딩하는 코드
직접 코딩에는 다음이 포함됩니다.
- 값 읽기
- null인지 확인
- 적절한 형식으로 변환
- 변환 성공 확인
- 쿼리에서 값 사용
이 방법을 사용하면 데이터 액세스 논리를 완전히 제어할 수 있습니다.
모델 바인딩을 사용하여 데이터 바인딩
모델 바인딩을 사용하면 훨씬 적은 코드로 결과를 바인딩할 수 있으며 애플리케이션 전체에서 기능을 다시 사용할 수 있습니다. 풍부한 데이터 바인딩 프레임워크를 제공하면서 코드 중심 데이터 액세스 논리 작업을 간소화합니다.
제품 표시
이 자습서에서는 모델 바인딩을 사용하여 데이터를 바인딩합니다. 모델 바인딩을 사용하여 데이터를 선택하도록 데이터 컨트롤을 구성하려면 컨트롤의 SelectMethod 속성을 페이지 코드의 메서드 이름으로 설정합니다. 데이터 컨트롤은 페이지 수명 주기에서 적절한 시간에 메서드를 호출하고 반환된 데이터를 자동으로 바인딩합니다. 메서드를 명시적으로 호출 DataBind 할 필요가 없습니다.
솔루션 탐색기ProductList.aspx를 엽니다.
기존 태그를 다음 태그로 바꿉 있습니다.
<%@ Page Title="Products" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductList.aspx.cs" Inherits="WingtipToys.ProductList" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <section> <div> <hgroup> <h2><%: Page.Title %></h2> </hgroup> <asp:ListView ID="productList" runat="server" DataKeyNames="ProductID" GroupItemCount="4" ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts"> <EmptyDataTemplate> <table > <tr> <td>No data was returned.</td> </tr> </table> </EmptyDataTemplate> <EmptyItemTemplate> <td/> </EmptyItemTemplate> <GroupTemplate> <tr id="itemPlaceholderContainer" runat="server"> <td id="itemPlaceholder" runat="server"></td> </tr> </GroupTemplate> <ItemTemplate> <td runat="server"> <table> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>" width="100" height="75" style="border: solid" /></a> </td> </tr> <tr> <td> <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <span> <%#:Item.ProductName%> </span> </a> <br /> <span> <b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%> </span> <br /> </td> </tr> <tr> <td> </td> </tr> </table> </p> </td> </ItemTemplate> <LayoutTemplate> <table style="width:100%;"> <tbody> <tr> <td> <table id="groupPlaceholderContainer" runat="server" style="width:100%"> <tr id="groupPlaceholder"></tr> </table> </td> </tr> <tr> <td></td> </tr> <tr></tr> </tbody> </table> </LayoutTemplate> </asp:ListView> </div> </section> </asp:Content>
이 코드는 라는 productListListView 컨트롤을 사용하여 제품을 표시합니다.
<asp:ListView ID="productList" runat="server"
템플릿 및 스타일을 사용하여 ListView 컨트롤이 데이터를 표시하는 방법을 정의합니다. 반복 구조의 데이터에 유용합니다. 이 ListView 예제에서는 단순히 데이터베이스 데이터를 표시하지만 코드 없이 사용자가 데이터를 편집, 삽입 및 삭제하고 데이터를 정렬 및 페이지화할 수 있도록 할 수도 있습니다.
ListView 컨트롤에서 속성을 설정 ItemType 하면 데이터 바인딩 식을 Item 사용할 수 있고 컨트롤이 강력한 형식이 됩니다. 이전 자습서에서 설명한 대로 IntelliSense를 사용하여 항목 개체 세부 정보(예: 를 지정)를 ProductName선택할 수 있습니다.
또한 모델 바인딩을 사용하여 값을 지정합니다 SelectMethod . 이 값(GetProducts)은 다음 단계에서 제품을 표시하기 위해 코드 숨김에 추가할 메서드에 해당합니다.
제품을 표시하는 코드 추가
이 단계에서는 ListView 컨트롤을 데이터베이스의 제품 데이터로 채우는 코드를 추가합니다. 코드는 모든 제품 및 개별 범주 제품을 표시할 수 있습니다.
솔루션 탐색기ProductList.aspx를 마우스 오른쪽 단추로 클릭한 다음 코드 보기를 선택합니다.
ProductList.aspx.cs 파일의 기존 코드를 다음으로 바꿉니다.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using WingtipToys.Models; using System.Web.ModelBinding; namespace WingtipToys { public partial class ProductList : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public IQueryable<Product> GetProducts([QueryString("id")] int? categoryId) { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Product> query = _db.Products; if (categoryId.HasValue && categoryId > 0) { query = query.Where(p => p.CategoryID == categoryId); } return query; } } }
이 코드는 ProductList.aspx 페이지에서 ListView 컨트롤의 ItemType 속성이 참조하는 메서드를 보여 GetProducts 줍니다. 결과를 특정 데이터베이스 범주로 제한하기 위해 코드는 ProductList.aspx 페이지가 탐색될 때 ProductList.aspx 페이지로 전달된 쿼리 문자열 값의 값을 설정합니다categoryId. QueryStringAttribute 네임스페이스의 System.Web.ModelBinding 클래스는 쿼리 문자열 변수 id의 값을 검색하는 데 사용됩니다. 이렇게 하면 모델 바인딩이 런타임에 쿼리 문자열의 값을 매개 변수에 categoryId 바인딩하도록 지시합니다.
유효한 범주가 페이지에 쿼리 문자열로 전달되면 쿼리 결과는 값과 일치하는 categoryId 데이터베이스의 제품으로 제한됩니다. instance 경우 ProductsList.aspx 페이지 URL은 다음과 같습니다.
http://localhost/ProductList.aspx?id=1
페이지에는 가 와 같은 1제품 categoryId 만 표시됩니다.
ProductList.aspx 페이지가 호출될 때 쿼리 문자열이 포함되지 않으면 모든 제품이 표시됩니다.
이러한 메서드의 값 원본을 값 공급자 (예: QueryString)라고 하며, 사용할 값 공급자를 나타내는 매개 변수 특성을 값 공급자 특성 (예: id)이라고 합니다. ASP.NET 쿼리 문자열, 쿠키, 양식 값, 컨트롤, 뷰 상태, 세션 상태 및 프로필 속성과 같은 Web Forms 애플리케이션에서 사용자 입력의 모든 일반적인 소스에 대한 값 공급자 및 해당 특성을 포함합니다. 사용자 지정 값 공급자를 작성할 수도 있습니다.
애플리케이션 실행
이제 애플리케이션을 실행하여 모든 제품 또는 범주의 제품을 봅니다.
Visual Studio에서 F5 키를 눌러 애플리케이션을 실행합니다.
브라우저가 열리고 Default.aspx 페이지가 표시됩니다.제품 범주 탐색 메뉴에서 자동차를 선택합니다.
ProductList.aspx 페이지에는 자동차 범주 제품만 표시됩니다. 이 자습서의 뒷부분에서는 제품 세부 정보를 표시합니다.
위쪽 의 탐색 메뉴에서 제품을 선택합니다.
다시 ProductList.aspx 페이지가 표시되지만 이번에는 전체 제품 목록이 표시됩니다.
브라우저를 닫고 Visual Studio로 돌아갑니다.
제품 세부 정보를 표시하는 데이터 컨트롤 추가
다음으로, 이전 자습서에서 추가한 ProductDetails.aspx 페이지의 태그를 수정하여 특정 제품 정보를 표시합니다.
솔루션 탐색기ProductDetails.aspx를 엽니다.
기존 태그를 다음 태그로 바꿉 있습니다.
<%@ Page Title="Product Details" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs" Inherits="WingtipToys.ProductDetails" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <asp:FormView ID="productDetail" runat="server" ItemType="WingtipToys.Models.Product" SelectMethod ="GetProduct" RenderOuterTable="false"> <ItemTemplate> <div> <h1><%#:Item.ProductName %></h1> </div> <br /> <table> <tr> <td> <img src="/Catalog/Images/<%#:Item.ImagePath %>" style="border:solid; height:300px" alt="<%#:Item.ProductName %>"/> </td> <td> </td> <td style="vertical-align: top; text-align:left;"> <b>Description:</b><br /><%#:Item.Description %> <br /> <span><b>Price:</b> <%#: String.Format("{0:c}", Item.UnitPrice) %></span> <br /> <span><b>Product Number:</b> <%#:Item.ProductID %></span> <br /> </td> </tr> </table> </ItemTemplate> </asp:FormView> </asp:Content>이 코드는 FormView 컨트롤을 사용하여 특정 제품 세부 정보를 표시합니다. 이 태그는 ProductList.aspx 페이지에 데이터를 표시하는 데 사용되는 메서드와 같은 메서드를 사용합니다. FormView 컨트롤은 데이터 원본에서 한 번에 하나의 레코드를 표시하는 데 사용됩니다. FormView 컨트롤을 사용하는 경우 데이터 바인딩된 값을 표시하고 편집하는 템플릿을 만듭니다. 이러한 템플릿에는 폼의 모양과 기능을 정의하는 컨트롤, 바인딩 식 및 서식이 포함됩니다.
이전 태그를 데이터베이스에 연결하려면 추가 코드가 필요합니다.
솔루션 탐색기ProductDetails.aspx를 마우스 오른쪽 단추로 클릭한 다음 코드 보기를 클릭합니다.
ProductDetails.aspx.cs 파일이 표시됩니다.기존 코드를 다음 코드로 바꿉다.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using WingtipToys.Models; using System.Web.ModelBinding; namespace WingtipToys { public partial class ProductDetails : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } public IQueryable<Product> GetProduct([QueryString("productID")] int? productId) { var _db = new WingtipToys.Models.ProductContext(); IQueryable<Product> query = _db.Products; if (productId.HasValue && productId > 0) { query = query.Where(p => p.ProductID == productId); } else { query = null; } return query; } } }
이 코드는 "productID" 쿼리 문자열 값을 확인합니다. 유효한 쿼리 문자열 값이 발견되면 일치하는 제품이 표시됩니다. 쿼리 문자열을 찾을 수 없거나 해당 값이 유효하지 않으면 제품이 표시되지 않습니다.
애플리케이션 실행
이제 애플리케이션을 실행하여 제품 ID에 따라 표시되는 개별 제품을 볼 수 있습니다.
Visual Studio에서 F5 키를 눌러 애플리케이션을 실행합니다.
브라우저가 열리고 Default.aspx 페이지가 표시됩니다.범주 탐색 메뉴에서 보트를 선택합니다.
ProductList.aspx 페이지가 표시됩니다.제품 목록에서 Paper Boat 를 선택합니다. ProductDetails.aspx 페이지가 표시됩니다.
브라우저를 닫습니다.
추가 리소스
모델 바인딩 및 웹 양식을 사용하여 데이터 검색 및 표시
다음 단계
이 자습서에서는 제품 및 제품 세부 정보를 표시하는 태그 및 코드를 추가했습니다. 강력한 형식의 데이터 컨트롤, 모델 바인딩 및 값 공급자에 대해 알아보았습니다. 다음 자습서에서는 Wingtip Toys 샘플 애플리케이션에 쇼핑 카트를 추가합니다.