FormView 웹 서버 컨트롤의 템플릿 만들기
업데이트: 2007년 11월
사용자가 컨트롤에 표시된 데이터를 보거나 수정할 수 있도록 하는 템플릿을 추가하여 FormView 컨트롤을 사용자 지정할 수 있습니다. 각 템플릿의 내용은 태그, 데이터 바인딩 식이 있는 컨트롤, FormView 컨트롤의 모드를 변경하는 명령 단추로 구성됩니다.
.gif "참고") 참고: |
|---|
데이터 바인딩 식에 대한 자세한 내용은 데이터 바인딩 식 개요을 참조하십시오. |
표시 템플릿
FormView 컨트롤의 기본 표시 템플릿은 ItemTemplate 템플릿입니다. ItemTemplate 템플릿은 바인딩된 데이터를 읽기 전용 모드로 표시합니다. ItemTemplate에 포함된 컨트롤은 Label 컨트롤과 같이 데이터를 표시만 하는 컨트롤입니다. 템플릿에는 현재 레코드를 삽입, 편집 또는 삭제할 수 있도록 FormView 컨트롤의 모드를 변경하는 명령 단추도 포함될 수 있습니다. 다음 예제처럼 단방향 데이터 바인딩을 위한 Eval 메서드를 포함하는 데이터 바인딩 식을 사용하여 템플릿의 컨트롤을 데이터에 바인딩합니다.
<asp:FormView ID="FormView1"
DataSourceID="SqlDataSource1"
DataKeyNames="ProductID"
RunAt="server">
<ItemTemplate>
<table>
<tr><td align="right"><b>Product ID:</b></td> <td><%# Eval("ProductID") %></td></tr>
<tr><td align="right"><b>Product Name:</b></td> <td><%# Eval("ProductName") %></td></tr>
<tr><td align="right"><b>Category ID:</b></td> <td><%# Eval("CategoryID") %></td></tr>
<tr><td align="right"><b>Quantity Per Unit:</b></td><td><%# Eval("QuantityPerUnit") %></td></tr>
<tr><td align="right"><b>Unit Price:</b></td> <td><%# Eval("UnitPrice") %></td></tr>
</table>
</ItemTemplate>
</asp:FormView>
<asp:FormView ID="FormView1"
DataSourceID="SqlDataSource1"
DataKeyNames="ProductID"
RunAt="server">
<ItemTemplate>
<table>
<tr><td align="right"><b>Product ID:</b></td> <td><%# Eval("ProductID") %></td></tr>
<tr><td align="right"><b>Product Name:</b></td> <td><%# Eval("ProductName") %></td></tr>
<tr><td align="right"><b>Category ID:</b></td> <td><%# Eval("CategoryID") %></td></tr>
<tr><td align="right"><b>Quantity Per Unit:</b></td><td><%# Eval("QuantityPerUnit") %></td></tr>
<tr><td align="right"><b>Unit Price:</b></td> <td><%# Eval("UnitPrice") %></td></tr>
</table>
</ItemTemplate>
</asp:FormView>
ItemTemplate 템플릿에는 CommandName 값에 따라 FormView 컨트롤의 모드를 변경하는 LinkButton 컨트롤이 포함될 수 있습니다. CommandName 값이 New이면 레코드가 삽입 모드로 설정되고 사용자가 새 레코드 값을 입력할 수 있도록 하는 InsertItemTemplate 템플릿이 로드됩니다. CommandName 값이 Edit인 단추를 ItemTemplate 템플릿에 추가하면 FormView 컨트롤을 편집 모드로 설정할 수 있습니다. CommandName 값이 Delete인 단추를 ItemTemplate 템플릿에 추가하면 사용자가 데이터 소스에서 현재 레코드를 삭제할 수 있습니다.
FormView 컨트롤과 함께 사용할 수 있는 다른 표시 템플릿으로는 바인딩할 현재 레코드가 없을 때 표시되는 EmptyDataTemplate 템플릿과 각각 머리글 및 바닥글의 내용을 정의하는 HeaderTemplate 및 FooterTemplate 템플릿이 있습니다.
편집 및 삽입 템플릿
EditItemTemplate 템플릿을 사용하면 사용자가 기존 레코드를 수정할 수 있고, InsertItemTemplate 템플릿을 사용하면 데이터 소스에 새 레코드를 삽입하기 위해 값을 수집할 수 있습니다. 일반적으로 EditItemTemplate 및 InsertItemTemplate 템플릿에는 TextBox, CheckBox 또는 DropDownList 컨트롤과 같이 사용자 입력을 받는 컨트롤을 포함합니다. 읽기 전용 데이터를 표시하는 컨트롤과 사용자가 현재 레코드를 편집하거나 새 레코드를 삽입하거나 현재 작업을 취소하는 데 사용할 수 있는 명령 단추를 추가할 수도 있습니다. 다음 예제처럼 양방향 데이터 바인딩을 위한 Bind 메서드를 포함하는 데이터 바인딩 식을 사용하여 EditItemTemplate 및 InsertItemTemplate 템플릿의 컨트롤을 데이터에 바인딩합니다.
<asp:sqlDataSource ID="EmployeeDetailsSqlDataSource"
SelectCommand="SELECT EmployeeID, LastName, FirstName FROM Employees WHERE EmployeeID = @EmpID"
InsertCommand="INSERT INTO Employees(LastName, FirstName) VALUES (@LastName, @FirstName);
SELECT @EmpID = SCOPE_IDENTITY()"
UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName
WHERE EmployeeID=@EmployeeID"
DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"
ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
RunAt="server">
<SelectParameters>
<asp:Parameter Name="EmpID" Type="Int32" DefaultValue="0" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
</InsertParameters>
</asp:sqlDataSource>
<asp:sqlDataSource ID="EmployeeDetailsSqlDataSource"
SelectCommand="SELECT EmployeeID, LastName, FirstName FROM Employees WHERE EmployeeID = @EmpID"
InsertCommand="INSERT INTO Employees(LastName, FirstName) VALUES (@LastName, @FirstName);
SELECT @EmpID = SCOPE_IDENTITY()"
UpdateCommand="UPDATE Employees SET LastName=@LastName, FirstName=@FirstName
WHERE EmployeeID=@EmployeeID"
DeleteCommand="DELETE Employees WHERE EmployeeID=@EmployeeID"
ConnectionString="<%$ ConnectionStrings:NorthwindConnection %>"
OnInserted="EmployeeDetailsSqlDataSource_OnInserted"
RunAt="server">
<SelectParameters>
<asp:Parameter Name="EmpID" Type="Int32" DefaultValue="0" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="EmpID" Direction="Output" Type="Int32" DefaultValue="0" />
</InsertParameters>
</asp:sqlDataSource>
| 참고: |
|---|
DropDownList 컨트롤과 같은 ListControl 컨트롤을 사용하는 경우, DropDownList 컨트롤의 값은 현재 바인딩된 레코드의 필드에 바인딩하고 DropDownList 컨트롤의 목록 값은 별도의 사용 가능한 값 목록에 바인딩할 수 있습니다. 이렇게 하려면 Bind 식을 사용하여 DropDownList 컨트롤의 SelectedValue 속성을 현재 바인딩된 레코드에 바인딩하고, DropDownList 컨트롤의 데이터 소스, DataTextField 속성 및 DataValueField 속성은 사용 가능한 값 목록으로 지정합니다. |
CommandName 값이 Edit인 명령 단추를 사용자가 클릭하면 EditItemTemplate 템플릿이 로드됩니다. CommandName 값이 Update인 LinkButton 명령 단추를 추가하면 현재 바인딩된 값을 가져온 다음 업데이트를 위해 데이터 소스 컨트롤에 보낼 수 있습니다. CommandName 값이 Cancel인 LinkButton 명령 단추를 추가하면 현재 바인딩된 값을 삭제하고 FormView 컨트롤을 읽기 전용 모드로 되돌린 다음 ItemTemplate 템플릿을 로드할 수 있습니다.
CommandName 값이 New인 명령 단추를 사용자가 클릭하면 InsertItemTemplate 템플릿이 로드됩니다. CommandName 값이 Insert인 LinkButton 명령 단추를 추가하면 새 레코드의 값을 데이터 소스 컨트롤로 보낼 수 있습니다. CommandName 값이 Cancel인 LinkButton 명령 단추를 추가하면 새 값을 삭제하고 FormView를 읽기 전용 모드로 되돌린 다음 ItemTemplate 템플릿을 로드할 수 있습니다.
FormView 컨트롤을 사용한 데이터 편집 예제를 보려면 FormView 웹 서버 컨트롤을 사용하여 데이터 수정을 참조하십시오.
데이터 페이징 템플릿
FormView 컨트롤에서 데이터 페이지 하나는 바인딩된 레코드 하나에 해당합니다. FormView 컨트롤의 AllowPaging 속성을 true로 설정하면 FormView 컨트롤에서 페이징을 위한 UI(사용자 인터페이스) 컨트롤을 자동으로 추가합니다. PagerTemplate 템플릿을 추가하여 페이징을 위한 UI를 사용자 지정할 수 있습니다. 자세한 내용은 FormView 웹 서버 컨트롤의 페이징을 참조하십시오.
FormView의 PagerTemplate 템플릿에 대한 예제를 보려면 FormView 웹 서버 컨트롤의 페이징을 참조하십시오.