방법: Visual Studio에서 템플릿 기반 컨트롤의 데이터에 바인딩
업데이트: 2007년 11월
GridView, DetailsView, FormView, ListView, DataList 또는 Repeater 컨트롤과 같은 컨트롤을 LinqDataSource, ObjectDataSource, SqlDataSource 컨트롤 등의 데이터 소스 컨트롤과 연결할 수 있습니다. 컨트롤의 템플릿(ListView, DataList, Repeater 및 FormView 컨트롤에는 템플릿이 필요함)을 사용하여 디자이너 내의 사용자 지정 UI(사용자 인터페이스)로 데이터 표시를 사용자 지정할 수도 있습니다.
이 항목에서는 TextBox 컨트롤과 같은 UI 컨트롤을 템플릿에 추가한 다음 해당 컨트롤을 특정 데이터에 바인딩하는 작업에 대해 설명합니다.
템플릿 컨트롤을 데이터 소스에 바인딩하려면
페이지에서 SqlDataSource 컨트롤과 같은 올바른 데이터 소스를 설정하고 ID 속성 값을 확인합니다.
예를 들면 다음과 같습니다.
<asp:SqlDataSource ID="SqlDataSource1" Runat="server" SelectCommand="SELECT CustomerID, CompanyName FROM Customers" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"> </asp:SqlDataSource>SqlDataSource 컨트롤을 데이터베이스와 함께 사용하는 방법은 SqlDataSource 웹 서버 컨트롤 개요을 참조하십시오.
도구 상자의 데이터 그룹에서 DataList 컨트롤을 페이지로 끌어 옵니다.
DataList 작업 바로 가기 메뉴가 나타납니다.
- DataList 작업 바로 가기 메뉴가 나타나지 않으면 DataList 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
데이터 소스 선택 목록에서 1단계에서 만든 SqlDataSource 컨트롤을 클릭합니다.
페이지를 렌더링할 때 이 컨트롤에 사용자 지정 없이 쿼리의 모든 열과 데이터가 표시됩니다. 데이터에 따라 DataList 컨트롤은 다음 코드 예제에서와 같이 바인딩된 기본 필드와 함께 나타납니다.
<asp:DataList ID="DataList1" DataKeyField="CustomerID" DataSourceID="SqlDataSource1"> <ItemTemplate> CustomerID: <asp:Label ID="CustomerIDLabel" Text='<%# Eval("CustomerID") %>'> </asp:Label><br /> CompanyName: <asp:Label ID="CompanyNameLabel" Text='<%# Eval("CompanyName") %>'> </asp:Label><br /> <br /> </ItemTemplate> </asp:DataList>
컨트롤의 템플릿을 편집하려면
디자인 뷰에서 DataList 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
DataList 작업 메뉴에서 템플릿 편집을 클릭합니다.
이제 디자이너에서 템플릿을 편집할 수 있습니다. 다른 컨트롤을 나중에 바인딩할 템플릿으로 끌어 올 수 있습니다.
표시 목록에서 AlternatingItemTemplate을 클릭합니다. 여기서 각 컨트롤은 서로 다른 템플릿을 지원합니다.
AlternatingItemTemplate 디자인 공간에서 CustomerID:를 입력한 다음 도구 상자의 표준 그룹에서 T:System.Web.UI.WebControls.Label 컨트롤을 DataList 컨트롤로 끌어 옵니다.
Label 작업 메뉴에서 데이터 바인딩 편집을 클릭합니다.
LabelNameDataBindings 대화 상자의 바인딩 가능한 속성에서 Text를 클릭합니다.
Text에 대한 바인딩의 바인딩 대상 목록에서 CustomerID를 클릭합니다.
CompanyName에 대해 4-7단계를 반복합니다.
AlternatingItemTemplate 디자인 공간에서 모든 콘텐츠를 선택한 다음 Ctrl+B를 눌러 텍스트를 굵게 변경합니다.
DataList 컨트롤을 마우스 오른쪽 단추로 클릭한 다음 스마트 태그 표시를 클릭합니다.
템플릿 편집 끝내기를 클릭하여 템플릿 편집 모드를 끝냅니다.
브라우저에서 페이지를 표시하면 일반 텍스트와 굵은 텍스트가 교대로 사용되는 회사 목록이 표시됩니다.