라디오 단추의 GridView 열 추가(C#)Adding a GridView Column of Radio Buttons (C#)

Scott Mitchellby Scott Mitchell

샘플 앱 다운로드 또는 PDF 다운로드Download Sample App or Download PDF

이 자습서에서는 GridView 컨트롤에 라디오 단추 열을 추가 하 여 사용자에 게 GridView의 단일 행을 선택 하는 보다 직관적인 방법을 제공 하는 방법을 보여 줍니다.This tutorial looks at how to add a column of radio buttons to a GridView control to provide the user with a more intuitive way of selecting a single row of the GridView.

소개Introduction

GridView 컨트롤은 다양 한 기본 제공 기능을 제공 합니다.The GridView control offers a great deal of built-in functionality. 여기에는 텍스트, 이미지, 하이퍼링크 및 단추를 표시 하는 여러 가지 필드가 포함 됩니다.It includes a number of different fields for displaying text, images, hyperlinks, and buttons. 추가 사용자 지정을 위한 템플릿을 지원 합니다.It supports templates for further customization. 마우스를 몇 번 클릭 하면 단추를 통해 각 행을 선택할 수 있는 GridView를 만들거나 기능을 편집 하거나 삭제할 수 있습니다.With a few clicks of the mouse, it s possible to make a GridView where each row can be selected via a button, or to enable editing or deleting capabilities. 제공 된 기능을 다양 한도 하지만 지원 되지 않는 추가 기능을 추가 해야 하는 경우가 종종 있습니다.Despite the plethora of provided features, there will often be situations in which additional, non-supported features will need to be added. 이 자습서 및 다음 두 가지에서는 추가 기능을 포함 하도록 GridView s 기능을 개선 하는 방법을 살펴보겠습니다.In this tutorial and the next two we'll examine how to enhance the GridView s functionality to include additional features.

이 자습서와 다음은 행 선택 프로세스를 개선 하는 데 중점을 두는 것입니다.This tutorial and the next one focus on enhancing the row-selection process. DetailView 세부 정보를 사용 하 여 선택 가능한 마스터 GridView를 사용 하 여 마스터/세부정보에서 검토 한 대로 선택 단추가 포함 된 GridView에 commandfield를 추가할 수 있습니다.As examined in the Master/Detail Using a Selectable Master GridView with a Details DetailView, we can add a CommandField to the GridView that includes a Select button. 이 단추를 클릭 하면 다시 게시 ensues 및 GridView s SelectedIndex 속성이 해당 선택 단추를 클릭 한 행의 인덱스로 업데이트 됩니다.When clicked, a postback ensues and the GridView s SelectedIndex property is updated to the index of the row whose Select button was clicked. 세부 정보 DetailView 자습서와 함께 선택 가능한 마스터 GridView를 사용 하는 마스터/세부 정보에서이 기능을 사용 하 여 선택한 GridView 행의 세부 정보를 표시 하는 방법을 살펴보았습니다.In the Master/Detail Using a Selectable Master GridView with a Details DetailView tutorial, we saw how to use this feature to display details for the selected GridView row.

선택 단추는 다양 한 상황에서 작동 하지만 다른 작업에도 작동 하지 않을 수 있습니다.While the Select button works in many situations, it may not work as well for others. 단추를 사용 하는 대신 두 개의 다른 사용자 인터페이스 요소 (라디오 단추 및 확인란)를 선택 하는 데 주로 사용 됩니다.Rather than using a button, two other user interface elements are commonly used for selection: the radio button and checkbox. 선택 단추 대신 각 행에 라디오 단추나 확인란이 포함 되도록 GridView를 확장할 수 있습니다.We can augment the GridView so that instead of a Select button, each row contains a radio button or checkbox. 사용자가 GridView 레코드 중 하나만 선택할 수 있는 시나리오에서는 선택 단추 보다 라디오 단추가 선호 될 수 있습니다.In scenarios where the user can only select one of the GridView records, the radio button might be preferred over the Select button. 사용자가 웹 기반 전자 메일 응용 프로그램에서와 같은 여러 레코드를 선택할 수 있는 경우, 사용자가 여러 메시지를 선택 하 여 삭제할 수 있습니다. 확인란은 선택 단추 또는 라디오 단추에서 사용할 수 없는 기능을 제공 합니다. 사용자 인터페이스.In situations where the user can potentially select multiple records such as in a web-based email application, where a user might want to select multiple messages to delete the checkbox offers functionality that is not available from the Select button or radio button user interfaces.

이 자습서에서는 GridView에 라디오 단추 열을 추가 하는 방법을 살펴봅니다.This tutorial looks at how to add a column of radio buttons to the GridView. 계속 해 서 자습서에서 확인란을 사용 하는 방법을 살펴봅니다.The proceeding tutorial explores using checkboxes.

1 단계: GridView 웹 페이지 향상 만들기Step 1: Creating the Enhancing the GridView Web Pages

라디오 단추 열을 포함 하도록 GridView를 개선 하기 전에 먼저이 자습서와 다음 두 가지에 필요한 웹 사이트 프로젝트에 ASP.NET 페이지를 만들어 보겠습니다.Before we start enhancing the GridView to include a column of radio buttons, let s first take a moment to create the ASP.NET pages in our website project that we'll need for this tutorial and the next two. EnhancedGridView이라는 새 폴더를 추가 하 여 시작 합니다.Start by adding a new folder named EnhancedGridView. 그런 다음, 다음 ASP.NET 페이지를 해당 폴더에 추가 하 여 각 페이지를 Site.master 마스터 페이지에 연결 합니다.Next, add the following ASP.NET pages to that folder, making sure to associate each page with the Site.master master page:

  • Default.aspx
  • RadioButtonField.aspx
  • CheckBoxField.aspx
  • InsertThroughFooter.aspx

SqlDataSource 관련 자습서에 대 한 ASP.NET 페이지 추가

그림 1: SqlDataSource 관련 자습서에 대 한 ASP.NET 페이지 추가Figure 1: Add the ASP.NET Pages for the SqlDataSource-Related Tutorials

다른 폴더와 마찬가지로 EnhancedGridView 폴더의 Default.aspx에는 해당 섹션의 자습서가 나열 됩니다.Like in the other folders, Default.aspx in the EnhancedGridView folder will list the tutorials in its section. SectionLevelTutorialListing.ascx 사용자 정의 컨트롤은이 기능을 제공 합니다.Recall that the SectionLevelTutorialListing.ascx User Control provides this functionality. 따라서이 사용자 정의 컨트롤을 솔루션 탐색기에서 페이지 디자인 뷰로 끌어 Default.aspx에 추가 합니다.Therefore, add this User Control to Default.aspx by dragging it from the Solution Explorer onto the page s Design view.

SectionLevelTutorialListing 사용자 정의 컨트롤을 Default.aspx에 추가 Add the SectionLevelTutorialListing.ascx User Control to Default.aspx

그림 2: Default.aspxSectionLevelTutorialListing.ascx 사용자 정의 컨트롤 추가 (전체 크기 이미지를 보려면 클릭)Figure 2: Add the SectionLevelTutorialListing.ascx User Control to Default.aspx (Click to view full-size image)

마지막으로, 이러한 4 개의 페이지를 Web.sitemap 파일에 항목으로 추가 합니다.Lastly, add these four pages as entries to the Web.sitemap file. 특히, SqlDataSource 컨트롤을 사용 하 여 뒤에 다음 태그를 추가 <siteMapNode>합니다.Specifically, add the following markup after the Using the SqlDataSource Control <siteMapNode>:

<siteMapNode 
    title="Enhancing the GridView" 
    url="~/EnhancedGridView/Default.aspx" 
    description="Augment the user experience of the GridView control.">
    <siteMapNode 
        url="~/EnhancedGridView/RadioButtonField.aspx" 
        title="Selection via a Radio Button Column" 
        description="Explore how to add a column of radio buttons in the GridView." />
    <siteMapNode 
        url="~/EnhancedGridView/CheckBoxField.aspx" 
        title="Selection via a Checkbox Column" 
        description="Select multiple records in the GridView by using a column of 
            checkboxes." />
    <siteMapNode 
        url="~/EnhancedGridView/InsertThroughFooter.aspx" 
        title="Add New Records through the Footer" 
        description="Learn how to allow users to add new records through the 
            GridView's footer." />
</siteMapNode>

Web.sitemap업데이트 한 후 브라우저를 통해 자습서 웹 사이트를 잠시 기다려 주십시오.After updating Web.sitemap, take a moment to view the tutorials website through a browser. 이제 왼쪽의 메뉴에는 자습서 편집, 삽입 및 삭제를 위한 항목이 포함 되어 있습니다.The menu on the left now includes items for the editing, inserting, and deleting tutorials.

이제 사이트 맵에 GridView 자습서 향상을 위한 항목이 포함 되어 있습니다.

그림 3: 이제 GridView 자습서 향상을 위한 항목을 포함 하는 사이트 맵Figure 3: The Site Map Now Includes Entries for the Enhancing the GridView Tutorials

2 단계: GridView에서 공급자 표시Step 2: Displaying the Suppliers in a GridView

이 자습서에서는를 사용 하 여 USA의 공급자를 나열 하는 GridView를 빌드하고 각 GridView 행에서 라디오 단추를 제공 합니다.For this tutorial let s build a GridView that lists the suppliers from the USA, with each GridView row providing a radio button. 라디오 단추를 통해 공급자를 선택 하면 사용자가 단추를 클릭 하 여 공급 업체 제품을 볼 수 있습니다.After selecting a supplier via the radio button, the user can view the supplier s products by clicking a button. 이 작업을 수행 하는 것은 간단 하지만 특히 복잡 한 여러 가지 미묘한 방법이 있습니다.While this task may sound trivial, there are a number of subtleties that make it particularly tricky. 이러한 세부 사항을 살펴보기 전에 먼저 공급자를 나열 하는 GridView를 가져옵니다.Before we delve into these subtleties, let s first get a GridView listing the suppliers.

먼저 EnhancedGridView 폴더에서 RadioButtonField.aspx 페이지를 열고 도구 상자에서 디자이너로 끌어 옵니다.Start by opening the RadioButtonField.aspx page in the EnhancedGridView folder by dragging a GridView from the Toolbox onto the Designer. GridView s IDSuppliers로 설정 하 고 스마트 태그에서 새 데이터 원본을 만들도록 선택 합니다.Set the GridView s ID to Suppliers and, from its smart tag, choose to create a new data source. 특히 SuppliersBLL 개체에서 데이터를 가져오는 SuppliersDataSource 라는 ObjectDataSource를 만듭니다.Specifically, create an ObjectDataSource named SuppliersDataSource that pulls its data from the SuppliersBLL object.

SuppliersDataSource 라는 새 ObjectDataSource를 만들 Create a New ObjectDataSource Named SuppliersDataSource

그림 4: 이름이 SuppliersDataSource 새 ObjectDataSource 만들기 (전체 크기 이미지를 보려면 클릭)Figure 4: Create a New ObjectDataSource Named SuppliersDataSource (Click to view full-size image)

SuppliersBLL 클래스를 사용 하도록 ObjectDataSource 구성 Configure the ObjectDataSource to Use the SuppliersBLL Class

그림 5: SuppliersBLL 클래스를 사용 하도록 ObjectDataSource 구성 (전체 크기 이미지를 보려면 클릭)Figure 5: Configure the ObjectDataSource to Use the SuppliersBLL Class (Click to view full-size image)

해당 공급자를 USA에만 나열 하려면 선택 탭의 드롭다운 목록에서 GetSuppliersByCountry(country) 메서드를 선택 합니다.Since we only want to list those suppliers in the USA, choose the GetSuppliersByCountry(country) method from the drop-down list in the SELECT tab.

SuppliersBLL 클래스를 사용 하도록 ObjectDataSource 구성 Configure the ObjectDataSource to Use the SuppliersBLL Class

그림 6: SuppliersBLL 클래스를 사용 하도록 ObjectDataSource 구성 (전체 크기 이미지를 보려면 클릭)Figure 6: Configure the ObjectDataSource to Use the SuppliersBLL Class (Click to view full-size image)

업데이트 탭에서 (없음) 옵션을 선택 하 고 다음을 클릭 합니다.From the UPDATE tab, select the (None) option and click Next.

SuppliersBLL 클래스를 사용 하도록 ObjectDataSource 구성 Configure the ObjectDataSource to Use the SuppliersBLL Class

그림 7: SuppliersBLL 클래스를 사용 하도록 ObjectDataSource 구성 (전체 크기 이미지를 보려면 클릭)Figure 7: Configure the ObjectDataSource to Use the SuppliersBLL Class (Click to view full-size image)

GetSuppliersByCountry(country) 메서드는 매개 변수를 허용 하므로 데이터 원본 구성 마법사에서 해당 매개 변수의 원본을 확인 하는 메시지를 표시 합니다.Since the GetSuppliersByCountry(country) method accepts a parameter, the Configure Data Source wizard prompts us for the source of that parameter. 하드 코드 된 값 (이 예제에서는 USA)을 지정 하려면 매개 변수 원본 드롭다운 목록을 없음으로 설정 된 채로 두고 텍스트 상자에 기본값을 입력 합니다.To specify a hard coded value ( USA, in this example), leave the Parameter source drop-down list set to None and enter the default value in the textbox. 마침을 클릭하여 마법사를 완료합니다.Click Finish to complete the wizard.

country 매개 변수의 기본값으로 USA를 사용 Use USA as the Default Value for the country Parameter

그림 8: country 매개 변수의 기본값으로 USA 사용 (전체 크기 이미지를 보려면 클릭)Figure 8: Use USA as the Default Value for the country Parameter (Click to view full-size image)

마법사를 완료 한 후 GridView에는 각 공급자 데이터 필드에 대 한 BoundField 포함 됩니다.After completing the wizard, the GridView will include a BoundField for each of the supplier data fields. CompanyName, CityCountry BoundFields를 제외한 모든을 제거 하 고 CompanyName BoundFields HeaderText 속성의 이름을 공급자로 바꿉니다.Remove all but the CompanyName, City, and Country BoundFields, and rename the CompanyName BoundFields HeaderText property to Supplier. 이렇게 하 고 나면 GridView 및 ObjectDataSource 선언 구문이 다음과 같이 표시 됩니다.After doing so, the GridView and ObjectDataSource declarative syntax should look similar to the following.

<asp:GridView ID="Suppliers" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="SuppliersDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="CompanyName" HeaderText="Supplier" 
            SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City" 
            SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" 
            SortExpression="Country" />
    </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="SuppliersDataSource" runat="server" 
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetSuppliersByCountry" TypeName="SuppliersBLL">
    <SelectParameters>
        <asp:Parameter DefaultValue="USA" Name="country" Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

이 자습서에서는 사용자가 공급자 목록과 동일한 페이지 또는 다른 페이지에서 선택한 공급자 제품을 볼 수 있도록 허용 합니다.For this tutorial, let s allow the user to view the selected supplier s products on the same page as the supplier list, or on a different page. 이를 수용 하려면 두 개의 단추 웹 컨트롤을 페이지에 추가 합니다.To accommodate this, add two Button Web controls to the page. 이러한 두 단추의 ID s를 ListProductsSendToProducts으로 설정 했습니다. ListProducts를 클릭 하면 포스트백이 발생 하 고 선택한 공급자 제품이 동일한 페이지에 나열 되지만 SendToProducts를 클릭 하면 해당 제품을 나열 하는 다른 페이지로 whisked 됩니다.I ve set the ID s of these two Buttons to ListProducts and SendToProducts, with the idea that when ListProducts is clicked a postback will occur and the selected supplier s products will be listed on the same page, but when SendToProducts is clicked, the user will be whisked to a another page that lists the products.

그림 9에서는 브라우저를 통해 볼 때 Suppliers GridView와 두 개의 단추 웹 컨트롤을 보여 줍니다.Figure 9 shows the Suppliers GridView and the two Button Web controls when viewed through a browser.

미국의 해당 공급 업체에 게 이름, 구/군/시 및 국가 정보가 나열 되어 Those Suppliers from the USA Have Their Name, City, and Country Information Listed

그림 9: 미국의 이름, 구/군/시 및 국가 정보가 나열 된 공급 업체 (전체 이미지를 보려면 클릭)Figure 9: Those Suppliers from the USA Have Their Name, City, and Country Information Listed (Click to view full-size image)

3 단계: 라디오 단추 열 추가Step 3: Adding a Column of Radio Buttons

이 시점에서 Suppliers GridView에는 미국의 각 공급 업체의 회사 이름, 도시 및 국가를 표시 하는 세 가지 BoundFields 있습니다.At this point the Suppliers GridView has three BoundFields displaying the company name, city, and country of each supplier in the USA. 그러나 여전히 라디오 단추 열은 없습니다.It is still lacking a column of radio buttons, however. 아쉽게도 GridView는 기본 제공 RadioButtonField를 포함 하지 않습니다. 그렇지 않은 경우에는이를 그리드에 추가 하 고 수행 하면 됩니다.Unfortunately, the GridView doesn t include a built-in RadioButtonField, otherwise we could just add that to the grid and be done. 대신 Templatefield로 변환를 추가 하 고 해당 ItemTemplate를 구성 하 여 라디오 단추를 렌더링 하 여 각 GridView 행의 라디오 단추를 만들 수 있습니다.Instead, we can add a TemplateField and configure its ItemTemplate to render a radio button, resulting in a radio button for each GridView row.

처음에는 Templatefield로 변환의 ItemTemplate에 RadioButton 웹 컨트롤을 추가 하 여 원하는 사용자 인터페이스를 구현할 수 있다고 가정할 수 있습니다.Initially, we might assume that the desired user interface can be implemented by adding a RadioButton Web control to the ItemTemplate of a TemplateField. 이 경우 GridView의 각 행에 단일 라디오 단추가 추가 되지만 라디오 단추는 그룹화 할 수 없기 때문에 함께 사용할 수 없습니다.While this will indeed add a single radio button to each row of the GridView, the radio buttons cannot be grouped and therefore are not mutually exclusive. 즉, 최종 사용자가 GridView에서 동시에 여러 라디오 단추를 선택할 수 있습니다.That is, an end user is able to select multiple radio buttons simultaneously from the GridView.

RadioButton 웹 컨트롤을 사용 하는 경우에도 필요한 기능이 제공 되지 않지만, 결과 라디오 단추가 그룹화 되지 않은 이유를 확인 하는 것이 Templatefield로 변환이 방법을 구현 해 보겠습니다.Even though using a TemplateField of RadioButton Web controls does not offer the functionality we need, let s implement this approach, as it s worthwhile to examine why the resulting radio buttons are not grouped. 먼저 Suppliers GridView에 Templatefield로 변환를 추가 하 여 가장 왼쪽에 있는 필드를 만듭니다.Start by adding a TemplateField to the Suppliers GridView, making it the leftmost field. 그런 다음 GridView의 스마트 태그에서 템플릿 편집 링크를 클릭 하 고 도구 상자에서 Templatefield로 변환 s ItemTemplate로 RadioButton 웹 컨트롤을 끕니다 (그림 10 참조).Next, from the GridView s smart tag, click the Edit Templates link and drag a RadioButton Web control from the Toolbox into the TemplateField s ItemTemplate (see Figure 10). RadioButton s ID 속성을 RowSelector로 설정 하 고 GroupName 속성을 SuppliersGroup로 설정 합니다.Set the RadioButton s ID property to RowSelector and the GroupName property to SuppliersGroup.

ItemTemplate에 RadioButton 웹 컨트롤을 추가 Add a RadioButton Web Control to the ItemTemplate

그림 10: ItemTemplate에 RadioButton 웹 컨트롤 추가 (전체 크기 이미지를 보려면 클릭)Figure 10: Add a RadioButton Web Control to the ItemTemplate (Click to view full-size image)

디자이너를 통해 이러한 추가 작업을 수행한 후에는 GridView의 태그가 다음과 같이 표시 됩니다.After making these additions through the Designer, your GridView s markup should look similar to the following:

<asp:GridView ID="Suppliers" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="SuppliersDataSource" 
    EnableViewState="False">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:RadioButton ID="RowSelector" runat="server" 
                    GroupName="SuppliersGroup" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CompanyName" HeaderText="Supplier" 
            SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City" 
            SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" 
            SortExpression="Country" />
    </Columns>
</asp:GridView>

RadioButton s GroupName 속성 은 일련의 라디오 단추를 그룹화 하는 데 사용 됩니다.The RadioButton s GroupName property is what is used to group a series of radio buttons. GroupName 값이 같은 모든 RadioButton 컨트롤은 그룹화 된 것으로 간주 됩니다. 한 번에 하나의 라디오 단추만 그룹에서 선택할 수 있습니다.All RadioButton controls with the same GroupName value are considered grouped; only one radio button can be selected from a group at a time. GroupName 속성은 렌더링 된 라디오 단추 name 특성의 값을 지정 합니다.The GroupName property specifies the value for the rendered radio button s name attribute. 브라우저는 라디오 단추 name 특성을 검사 하 여 라디오 단추 그룹화를 결정 합니다.The browser examines the radio buttons name attributes to determine the radio button groupings.

ItemTemplate에 RadioButton 웹 컨트롤이 추가 된 상태에서 브라우저를 통해이 페이지를 방문 하 여 표 형태의 행에 있는 라디오 단추를 클릭 합니다.With the RadioButton Web control added to the ItemTemplate, visit this page through a browser and click on the radio buttons in the grid s rows. 그림 11에 표시 된 것 처럼 라디오 단추가 그룹화 되지 않아 모든 행을 선택할 수 있도록 합니다.Notice how the radio buttons are not grouped, making it possible to select all of the rows, as Figure 11 shows.

GridView s 라디오 단추가 그룹화 되지 The GridView s Radio Buttons are Not Grouped

그림 11: GridView s 라디오 단추가 그룹화 되지 않음 (전체 크기 이미지를 보려면 클릭)Figure 11: The GridView s Radio Buttons are Not Grouped (Click to view full-size image)

라디오 단추가 그룹화 되지 않는 이유는 동일한 GroupName 속성 설정이 있더라도 렌더링 된 name 특성이 서로 다르기 때문입니다.The reason the radio buttons are not grouped is because their rendered name attributes are different, despite having the same GroupName property setting. 이러한 차이점을 확인 하려면 브라우저에서 뷰/소스를 수행 하 고 라디오 단추 태그를 검사 합니다.To see these differences, do a View/Source from the browser and examine the radio button markup:

<input id="ctl00_MainContent_Suppliers_ctl02_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl02$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl03_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl03$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl04_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl04$SuppliersGroup" 
    type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl05_RowSelector" 
    name="ctl00$MainContent$Suppliers$ctl05$SuppliersGroup" 
    type="radio" value="RowSelector" />

nameid 특성이 속성 창에 지정 된 정확한 값이 아니라 다른 ID 값이 앞에 표시 되는 것을 확인할 수 있습니다.Notice how both the name and id attributes are not the exact values as specified in the Properties window, but are prepended with a number of other ID values. 렌더링 된 idname 특성의 앞에 추가 ID 값이 추가 되는 ID의 라디오 단추는 부모 컨트롤 GridViewRow s, GridView s ID, 콘텐츠 컨트롤의 ID및 웹 폼을 ID합니다.IDThe additional ID values added to the front of the rendered id and name attributes are the ID s of the radio buttons parent controls the GridViewRow s ID s, the GridView s ID, the Content control s ID, and the Web Form s ID. GridView의 렌더링 된 각 웹 컨트롤에는 고유한 idname 값이 있도록 이러한 ID가 추가 됩니다.These ID s are added so that each rendered Web control in the GridView has a unique id and name values.

렌더링 되는 각 컨트롤에는 다른 nameid 필요 합니다 .이는 브라우저에서 클라이언트 쪽의 각 컨트롤을 고유 하 게 식별 하는 방법과 웹 서버에서 다시 게시할 때 발생 하는 작업 또는 변경 작업을 식별 하는 방법 이기 때문입니다.Each rendered control needs a different name and id because this is how the browser uniquely identifies each control on the client-side and how it identifies to the web server what action or change has occurred on postback. 예를 들어 RadioButton의 선택 상태가 변경 될 때마다 일부 서버 쪽 코드를 실행 하려고 한다고 가정 합니다.For example, imagine that we wanted to run some server-side code whenever a RadioButton s checked state was changed. RadioButton s AutoPostBack 속성을 true로 설정 하 고 CheckChanged 이벤트에 대 한 이벤트 처리기를 만들어이를 수행할 수 있습니다.We could accomplish this by setting the RadioButton s AutoPostBack property to true and creating an event handler for the CheckChanged event. 그러나 모든 라디오 단추에 대해 렌더링 된 nameid 값이 동일 하면 다시 게시할 때 클릭 한 특정 RadioButton을 확인할 수 없습니다.However, if the rendered name and id values for all of the radio buttons were the same, on postback we could not determine what specific RadioButton was clicked.

이 중에서 가장 짧은 것은 RadioButton 웹 컨트롤을 사용 하 여 GridView에서 라디오 단추 열을 만들 수 없다는 것입니다.The short of it is that we cannot create a column of radio buttons in a GridView using the RadioButton Web control. 대신, 낡은 기술을 사용 하 여 각 GridView 행에 적절 한 태그가 삽입 되도록 해야 합니다.Instead, we must use rather archaic techniques to ensure that the appropriate markup is injected into each GridView row.

Note

RadioButton 웹 컨트롤과 마찬가지로, 서식 파일에 추가 될 때 라디오 단추 HTML 컨트롤은 고유한 name 특성을 포함 하 여 모눈의 라디오 단추를 그룹화 하지 않습니다.Like the RadioButton Web control, the radio button HTML control, when added to a template, will include the unique name attribute, making the radio buttons in the grid ungrouped. Html 컨트롤을 잘 모르는 경우 특히 ASP.NET 2.0에서 HTML 컨트롤이 거의 사용 되지 않으므로이 메모는 무시 해도 됩니다.If you are not familiar with HTML controls, feel free to disregard this note, as HTML controls are rarely used, especially in ASP.NET 2.0. 하지만 더 자세히 알아보려면 Allen 의 블로그 항목 웹 컨트롤 및 HTML 컨트롤을 참조 하세요.But if you are interested in learning more, see K. Scott Allen s blog entry Web Controls and HTML Controls.

리터럴 컨트롤을 사용 하 여 라디오 단추 태그 삽입Using a Literal Control to Inject Radio Button Markup

GridView 내의 모든 라디오 단추를 올바르게 그룹화 하려면 ItemTemplate라디오 단추 태그를 수동으로 삽입 해야 합니다.In order to correctly group all of the radio buttons within the GridView, we need to manually inject the radio buttons markup into the ItemTemplate. 각 라디오 단추에는 동일한 name 특성이 필요 하지만 클라이언트 쪽 스크립트를 통해 라디오 단추에 액세스 하려는 경우 고유한 id 특성이 있어야 합니다.Each radio button needs the same name attribute, but should have a unique id attribute (in case we want to access a radio button via client-side script). 사용자가 라디오 단추를 선택 하 고 페이지를 포스트백 한 후 브라우저는 선택한 라디오 단추 value 특성의 값을 다시 보냅니다.After a user selects a radio button and posts back the page, the browser will send back the value of the selected radio button s value attribute. 따라서 각 라디오 단추에는 고유한 value 특성이 필요 합니다.Therefore, each radio button will need a unique value attribute. 마지막으로, 다시 게시 시 선택 된 라디오 단추 하나에 checked 특성을 추가 해야 합니다. 그렇지 않으면 사용자가 선택 하 여 다시 게시 한 후 라디오 단추가 기본 상태로 돌아갑니다 (모두 선택 취소 됨).Finally, on postback we need to make sure to add the checked attribute to the one radio button that is selected, otherwise after the user makes a selection and posts back, the radio buttons will return to their default state (all unselected).

하위 수준 태그를 템플릿에 삽입 하기 위해 수행할 수 있는 두 가지 방법이 있습니다.There are two approaches that can be taken in order to inject low-level markup into a template. 하나는 코드를 혼합 하 고 코드를 표시 하는 클래스에 정의 된 형식 지정 메서드를 호출 하는 것입니다.One is to do a mix of markup and calls to formatting methods defined in the code-behind class. 이 기술은 GridView 컨트롤 자습서의 템플릿 사용 필드 에서 처음으로 설명 했습니다.This technique was first discussed in the Using TemplateFields in the GridView Control tutorial. 이 경우 다음과 같은 내용이 표시 될 수 있습니다.In our case it might look something like:

<input type="radio" id='<%# GetUniqueRadioButtonID(...) %>' 
    name='SuppliersGroup' value='<%# GetRadioButtonValue(...) %>' ... />

여기서 GetUniqueRadioButtonGetRadioButtonValue은 적절 한 id을 반환 하 고 각 라디오 단추에 대 한 특성 값을 value 코드를 만든 클래스에서 정의 되는 메서드입니다.Here, GetUniqueRadioButton and GetRadioButtonValue would be methods defined in the code-behind class that returned the appropriate id and value attribute values for each radio button. 이 방법은 idvalue 특성을 할당 하는 데 적합 하지만 데이터 바인딩 구문은 데이터를 GridView에 처음 바인딩할 때만 실행 되므로 checked 특성 값을 지정 해야 하는 경우에는 짧습니다.This approach works well for assigning the id and value attributes, but falls short when needing to specify the checked attribute value because the databinding syntax is only executed when data is first bound to the GridView. 따라서 GridView에서 뷰 상태를 사용 하는 경우 페이지를 처음 로드할 때 (또는 GridView를 데이터 소스에 명시적으로 다시 바인딩할 때)에만 서식 지정 메서드가 실행 되므로 checked 특성을 설정 하는 함수는 포스트백 시 호출 되지 않습니다.Therefore, if the GridView has view state enabled, the formatting methods will only fire when the page is first loaded (or when the GridView is explicitly rebound to the data source), and therefore the function that sets the checked attribute won't be called on postback. 이 문서의 범위를 벗어나는 다소 미묘한 문제 이며,이에 대해서는 그대로 둡니다.It s a rather subtle problem and a bit beyond the scope of this article, so I'll leave it at this. 하지만 위의 방법을 사용 하 여 중단 되는 지점으로 작업 하는 것이 좋습니다.I do, however, encourage you to try using the above approach and work it through to the point where you'll get stuck. 이러한 연습을 통해 작업 버전이 더 이상 표시 되지 않지만 GridView와 데이터 바인딩 수명 주기를 보다 깊이 있게 이해할 수 있습니다.While such an exercise won't get you any closer to a working version, it will help foster a deeper understanding of the GridView and the databinding lifecycle.

템플릿에 사용자 지정, 하위 수준 마크업을 삽입 하는 다른 방법은 템플릿에 리터럴 컨트롤 을 추가 하는 것입니다.The other approach to injecting custom, low-level markup in a template and the approach that we'll be using for this tutorial is to add a Literal control to the template. 그런 다음 GridView s RowCreated 또는 RowDataBound 이벤트 처리기에서 리터럴 컨트롤에 프로그래밍 방식으로 액세스 하 고 Text 속성을 내보낼 태그로 설정할 수 있습니다.Then, in the GridView s RowCreated or RowDataBound event handler, the Literal control can be programmatically accessed and its Text property set to the markup to emit.

Templatefield로 변환 s ItemTemplate에서 RadioButton을 제거 하 여 시작 하 고 리터럴 컨트롤로 바꿉니다.Start by removing the RadioButton from the TemplateField s ItemTemplate, replacing it with a Literal control. 리터럴 컨트롤 ID RadioButtonMarkup로 설정 합니다.Set the Literal control s ID to RadioButtonMarkup.

ItemTemplate에 리터럴 컨트롤을 추가 Add a Literal Control to the ItemTemplate

그림 12: ItemTemplate에 리터럴 컨트롤 추가 (전체 크기 이미지를 보려면 클릭)Figure 12: Add a Literal Control to the ItemTemplate (Click to view full-size image)

다음으로, GridView s RowCreated 이벤트에 대 한 이벤트 처리기를 만듭니다.Next, create an event handler for the GridView s RowCreated event. 데이터를 GridView로 바인딩 하는지 여부에 관계 없이 추가 된 모든 행에 대해 RowCreated 이벤트가 한 번 발생 합니다.The RowCreated event fires once for every row added, whether or not the data is being rebound to the GridView. 즉, 뷰 상태에서 데이터를 다시 로드 하는 경우에도 RowCreated 이벤트가 계속 발생 하 고이를 사용 하는 이유는 데이터가 데이터 웹 컨트롤에 명시적으로 바인딩되는 경우에만 발생 하는 RowDataBound 대신 사용 하는 것입니다.That means that even on a postback when the data is reloaded from view state, the RowCreated event still fires and this is the reason we are using it instead of RowDataBound (which fires only when the data is explicitly bound to the data Web control).

이 이벤트 처리기에서는 데이터 행을 다시 처리 하는 경우에만 계속 진행 하려고 합니다.In this event handler, we only want to proceed if we re dealing with a data row. 각 데이터 행에 대해 프로그래밍 방식으로 RadioButtonMarkup 리터럴 컨트롤을 참조 하 고 Text 속성을 내보낼 태그로 설정 합니다.For each data row we want to programmatically reference the RadioButtonMarkup Literal control and set its Text property to the markup to emit. 다음 코드에서 보여 주는 것 처럼 내보낸 태그는 name 특성이 SuppliersGroup로 설정 된 라디오 단추를 만듭니다 .이 단추는 id 특성이 RowSelectorX로 설정 됩니다. 여기서 X 는 gridview 행의 인덱스이 고 value 특성은 gridview 행의 인덱스로 설정 합니다.As the following code shows, the markup emitted creates a radio button whose name attribute is set to SuppliersGroup, whose id attribute is set to RowSelectorX, where X is the index of the GridView row, and whose value attribute is set to the index of the GridView row.

protected void Suppliers_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Grab a reference to the Literal control
        Literal output = (Literal)e.Row.FindControl("RadioButtonMarkup");
        // Output the markup except for the "checked" attribute
        output.Text = string.Format(
            @"<input type="radio" name="SuppliersGroup" " +
            @"id="RowSelector{0}" value="{0}" />", e.Row.RowIndex);
    }
}

GridView 행을 선택 하 고 포스트백이 발생 하면 선택한 공급자의 SupplierID에 관심이 있습니다.When a GridView row is selected and a postback occurs, we are interested in the SupplierID of the selected supplier. 따라서 각 라디오 단추의 값이 GridView 행의 인덱스 대신 실제 SupplierID 이어야 한다고 생각할 수 있습니다.Therefore, one might think that the value of each radio button should be the actual SupplierID (rather than the index of the GridView row). 이는 특정 상황에서 작동할 수 있지만 SupplierID를 무조건 수락 하 고 처리 하는 것은 보안상 위험할 수 있습니다.While this may work in certain circumstances, it would be a security risk to blindly accept and process a SupplierID. 예를 들어, GridView에는 미국의 공급 업체만 나열 됩니다.Our GridView, for example, lists only those suppliers in the USA. 그러나 SupplierID 라디오 단추에서 직접 전달 되는 경우 다시 게시 시 다시 전송 된 SupplierID 값을 짓궂은 사용자가 조작 하지 않는 것은 무엇 인가요?However, if the SupplierID is passed directly from the radio button, what s to stop a mischievous user from manipulating the SupplierID value sent back on postback? 행 인덱스를 value로 사용 하 고 DataKeys 컬렉션에서 다시 게시를 SupplierID 가져오는 경우 사용자가 GridView 행 중 하 나와 연결 된 SupplierID 값 중 하나를 사용 하도록 할 수 있습니다.By using the row index as the value, and then getting the SupplierID on postback from the DataKeys collection, we can ensure that the user is only using one of the SupplierID values associated with one of the GridView rows.

이 이벤트 처리기 코드를 추가한 후에는 브라우저에서 페이지를 테스트 하는 데 1 분 정도 걸립니다.After adding this event handler code, take a minute to test out the page in a browser. 첫째, 표에 있는 라디오 단추를 한 번에 하나만 선택할 수 있습니다.First, note that only one radio button in the grid can be selected at a time. 그러나 라디오 단추를 선택 하 고 단추 중 하나를 클릭 하면 포스트백이 발생 하 고 라디오 단추가 모두 초기 상태로 돌아갑니다. 즉, 다시 게시 시 선택한 라디오 단추가 더 이상 선택 되지 않습니다.However, when selecting a radio button and clicking one of the buttons, a postback occurs and the radio buttons all revert to their initial state (that is, on postback, the selected radio button is no longer selected). 이 문제를 해결 하려면 다시 게시에서 보낸 선택한 라디오 단추 인덱스를 검사 하 고 행 인덱스 일치 항목의 내보낸 태그에 checked="checked" 특성을 추가 하도록 RowCreated 이벤트 처리기를 보강 해야 합니다.To fix this, we need to augment the RowCreated event handler so that it inspects the selected radio button index sent from the postback and adds the checked="checked" attribute to the emitted markup of the row index matches.

포스트백이 발생 하면 브라우저는 name를 다시 보내고 선택한 라디오 단추를 value 합니다.When a postback occurs, the browser sends back the name and value of the selected radio button. Request.Form["name"]를 사용 하 여 프로그래밍 방식으로 값을 검색할 수 있습니다.The value can be programmatically retrieved using Request.Form["name"]. Request.Form 속성 은 폼 변수를 나타내는 NameValueCollection 를 제공 합니다.The Request.Form property provides a NameValueCollection representing the form variables. 폼 변수는 웹 페이지에 있는 양식 필드의 이름 및 값 이며, 다시 게시가 ensues 때마다 웹 브라우저에서 다시 보냅니다.The form variables are the names and values of the form fields in the web page, and are sent back by the web browser whenever a postback ensues. GridView에 있는 라디오 단추의 렌더링 된 name 특성이 SuppliersGroup되기 때문에 웹 페이지가 다시 게시 될 때 브라우저는 다른 폼 필드와 함께 웹 서버로 SuppliersGroup=valueOfSelectedRadioButton을 다시 보냅니다.Because the rendered name attribute of the radio buttons in the GridView is SuppliersGroup, when the web page is posted back the browser will send SuppliersGroup=valueOfSelectedRadioButton back to the web server (along with the other form fields). 그러면 Request.Form["SuppliersGroup"]를 사용 하 여 Request.Form 속성에서이 정보에 액세스할 수 있습니다.This information can then be accessed from the Request.Form property using: Request.Form["SuppliersGroup"].

RowCreated 이벤트 처리기 뿐만 아니라 단추 웹 컨트롤에 대 한 Click 이벤트 처리기에서 선택 된 라디오 단추 인덱스를 확인 해야 하므로, 라디오 단추 중 하나를 선택한 경우 라디오 단추가 선택 되어 있지 않은 경우 -1를 반환 하는 코드 숨김이 클래스에 SuppliersSelectedIndex 속성을 추가 합니다.Since we'll need to determine the selected radio button index not only in the RowCreated event handler, but in the Click event handlers for the Button Web controls, let s add a SuppliersSelectedIndex property to the code-behind class that returns -1 if no radio button was selected and the selected index if one of the radio buttons is selected.

private int SuppliersSelectedIndex
{
    get
    {
        if (string.IsNullOrEmpty(Request.Form["SuppliersGroup"]))
            return -1;
        else
            return Convert.ToInt32(Request.Form["SuppliersGroup"]);
    }
}

이 속성이 추가 되 면 SuppliersSelectedIndex e.Row.RowIndex같을 때 RowCreated 이벤트 처리기에 checked="checked" 태그를 추가 하는 것을 알 수 있습니다.With this property added, we know to add the checked="checked" markup in the RowCreated event handler when SuppliersSelectedIndex equals e.Row.RowIndex. 이 논리를 포함 하도록 이벤트 처리기를 업데이트 합니다.Update the event handler to include this logic:

protected void Suppliers_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Grab a reference to the Literal control
        Literal output = (Literal)e.Row.FindControl("RadioButtonMarkup");
        // Output the markup except for the "checked" attribute
        output.Text = string.Format(
            @"<input type="radio" name="SuppliersGroup" " +
            @"id="RowSelector{0}" value="{0}"", e.Row.RowIndex);
        // See if we need to add the "checked" attribute
        if (SuppliersSelectedIndex == e.Row.RowIndex)
            output.Text += @" checked="checked"";
        // Add the closing tag
        output.Text += " />";
    }
}

이렇게 변경 하면 다시 게시 후 선택한 라디오 단추가 선택 된 상태로 유지 됩니다.With this change, the selected radio button remains selected after a postback. 선택 된 라디오 단추를 지정 하는 기능이 있으므로 페이지를 처음 방문할 때 첫 번째 GridView 행의 라디오 단추가 선택 됩니다 .이 단추는 기본적으로 선택 되어 있지 않고 현재는 현재 동작).Now that we have the ability to specify what radio button is selected, we could change the behavior so that when the page was first visited, the first GridView row s radio button was selected (rather than having no radio buttons selected by default, which is the current behavior). 첫 번째 라디오 단추를 기본적으로 선택 하려면 if (SuppliersSelectedIndex == e.Row.RowIndex) 문을 if (SuppliersSelectedIndex == e.Row.RowIndex || (!Page.IsPostBack && e.Row.RowIndex == 0))으로 변경 하면 됩니다.To have the first radio button selected by default, simply change the if (SuppliersSelectedIndex == e.Row.RowIndex) statement to the following: if (SuppliersSelectedIndex == e.Row.RowIndex || (!Page.IsPostBack && e.Row.RowIndex == 0)).

이 시점에서 gridview에 그룹화 된 라디오 단추 열을 추가 하 여 다시 게시 간에 단일 GridView 행을 선택 하 고 기억할 수 있습니다.At this point we have added a column of grouped radio buttons to the GridView that allows for a single GridView row to be selected and remembered across postbacks. 다음 단계는 선택한 공급자가 제공 하는 제품을 표시 하는 것입니다.Our next steps are to display the products provided by the selected supplier. 4 단계에서는 사용자를 다른 페이지로 리디렉션하는 방법에 대해 설명 하 고, 선택 된 SupplierID따라 보냅니다.In Step 4 we'll see how to redirect the user to another page, sending along the selected SupplierID. 5 단계에서는 선택한 공급자 제품을 동일한 페이지의 GridView에 표시 하는 방법을 알아봅니다.In Step 5, we'll see how to display the selected supplier s products in a GridView on the same page.

Note

Templatefield로 변환를 사용 하는 대신 (이 긴 3 단계를 중심으로) 적절 한 사용자 인터페이스 및 기능을 렌더링 하는 사용자 지정 DataControlField 클래스를 만들 수 있습니다.Rather than using a TemplateField (the focus of this lengthy Step 3), we could create a custom DataControlField class that renders the appropriate user interface and functionality. DataControlField 클래스 는 BoundField, CheckBoxField, templatefield로 변환 및 기타 기본 제공 GridView 및 DetailsView 필드가 파생 되는 기본 클래스입니다.The DataControlField class is the base class from which the BoundField, CheckBoxField, TemplateField, and other built-in GridView and DetailsView fields derive. 사용자 지정 DataControlField 클래스를 만들면 라디오 단추 열을 선언 구문을 사용 하 여 추가 하 고 다른 웹 페이지 및 다른 웹 응용 프로그램에 대 한 기능을 훨씬 쉽게 복제할 수 있습니다.Creating a custom DataControlField class would mean that the column of radio buttons could be added just using declarative syntax, and would also make replicating the functionality on other web pages and other web applications significantly easier.

그러나 ASP.NET에서 컴파일된 사용자 지정 컨트롤을 만든 경우에는 상당한 양의 투자할가 필요 하 고 신중 하 게 처리 해야 하는 세부 및에 지 사례 호스트로 전달 됩니다.If you ve ever created custom, compiled controls in ASP.NET, however, you know that doing so requires a fair amount of legwork and carries with it a host of subtleties and edge cases that must be carefully handled. 따라서 지금은 라디오 단추 열을은 선형화 사용자 지정 DataControlField 클래스로 구현 하 고 Templatefield로 변환 옵션을 사용 하는 것이 좋습니다.Therefore, we will forgo implementing a column of radio buttons as a custom DataControlField class for now and stick with the TemplateField option. 아마도 향후 자습서에서 사용자 지정 DataControlField 클래스를 만들고, 사용 하 고, 배포 하는 방법을 살펴볼 수 있습니다.Perhaps we'll have the chance to explore creating, using, and deploying custom DataControlField classes in a future tutorial!

4 단계: 별도의 페이지에 선택한 공급자 제품 표시Step 4: Displaying the Selected Supplier s Products in a Separate Page

사용자가 GridView 행을 선택한 후에는 선택한 공급 업체 제품을 표시 해야 합니다.After the user has selected a GridView row, we need to show the selected supplier s products. 경우에 따라 별도의 페이지에 이러한 제품을 표시 하는 것이 좋을 수도 있습니다.In some circumstances, we may want to display these products in a separate page, in others we might prefer to do it in the same page. 먼저 개별 페이지에서 제품을 표시 하는 방법을 살펴보겠습니다. 5 단계에서는 선택한 공급자 제품을 표시 하기 위해 RadioButtonField.aspx에 GridView를 추가 하는 방법을 살펴보겠습니다.Let s first examine how to display the products in a separate page; in Step 5 we'll look at adding a GridView to RadioButtonField.aspx to display the selected supplier s products.

현재 페이지 ListProductsSendToProducts에는 두 개의 단추 웹 컨트롤이 있습니다.Currently there are two Button Web controls on the page ListProducts and SendToProducts. SendToProducts 단추를 클릭 하면 ~/Filtering/ProductsForSupplierDetails.aspx사용자를 전송 하려고 합니다.When the SendToProducts Button is clicked, we want to send the user to ~/Filtering/ProductsForSupplierDetails.aspx. 이 페이지는 두 페이지에서 마스터/세부 정보 필터링 자습서에 생성 되었으며 SupplierID라는 querystring 필드를 통해 SupplierID 전달 되는 공급자에 대 한 제품을 표시 합니다.This page was created in the Master/Detail Filtering Across Two Pages tutorial and displays the products for the supplier whose SupplierID is passed through the querystring field named SupplierID.

이 기능을 제공 하려면 SendToProducts Button s Click 이벤트에 대 한 이벤트 처리기를 만듭니다.To provide this functionality, create an event handler for the SendToProducts Button s Click event. 3 단계에서는 라디오 단추가 선택 된 행의 인덱스를 반환 하는 SuppliersSelectedIndex 속성을 추가 했습니다.In Step 3 we added the SuppliersSelectedIndex property, which returns the index of the row whose radio button is selected. 해당 SupplierID는 GridView의 DataKeys 컬렉션에서 검색할 수 있으며, 사용자는 Response.Redirect("url")를 사용 하 여 ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID으로 보낼 수 있습니다.The corresponding SupplierID can be retrieved from the GridView s DataKeys collection and the user can then be sent to ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID using Response.Redirect("url").

protected void SendToProducts_Click(object sender, EventArgs e)
{
    // Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
    int supplierID = 
        Convert.ToInt32(Suppliers.DataKeys[SuppliersSelectedIndex].Value);
    Response.Redirect(
        "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" 
        + supplierID);
    }
}

이 코드는 GridView에서 라디오 단추 중 하나를 선택 하는 한 wonderfully 작동 합니다.This code works wonderfully as long as one of the radio buttons is selected from the GridView. 처음에 GridView에 라디오 단추가 선택 되어 있지 않은 경우 사용자가 SendToProducts 단추를 클릭 하면 SuppliersSelectedIndex -1됩니다. 그러면 -1DataKeys 컬렉션의 인덱스 범위를 벗어나면 예외가 throw 됩니다.If, initially, the GridView does not have any radio buttons selected, and the user clicks the SendToProducts button, SuppliersSelectedIndex will be -1, which will cause an exception to be thrown since -1 is out of the index range of the DataKeys collection. 그러나이는 기본적으로 GridView의 첫 번째 라디오 단추를 선택 하는 것 처럼 3 단계에서 설명한 대로 RowCreated 이벤트 처리기를 업데이트 하기로 결정 한 경우에는 문제가 되지 않습니다.This is not a concern, however, if you decided to update the RowCreated event handler as discussed in Step 3 so as to have the first radio button in the GridView initially selected.

-1SuppliersSelectedIndex 값을 수용 하려면 GridView 위의 페이지에 Label 웹 컨트롤을 추가 합니다.To accommodate a SuppliersSelectedIndex value of -1, add a Label Web control to the page above the GridView. ID 속성을 ChooseSupplierMsg, 해당 CssClass 속성을 Warning로 설정 하 고, 해당 EnableViewStateVisible 속성을 false로 설정 하 고, 해당 Text 속성을 표에서 공급자를 선택 합니다.Set its ID property to ChooseSupplierMsg, its CssClass property to Warning, its EnableViewState and Visible properties to false, and its Text property to Please choose a supplier from the grid. CSS 클래스 Warning는 텍스트를 빨강, 기울임꼴, 굵은 글꼴로 표시 하 고 Styles.css에 정의 되어 있습니다.The CSS class Warning displays text in a red, italic, bold, large font and is defined in Styles.css. EnableViewStateVisible 속성을 false로 설정 하면 컨트롤의 Visible 속성을 프로그래밍 방식으로 true으로 설정 하는 포스트백만 제외 하 고 레이블이 렌더링 되지 않습니다.By setting the EnableViewState and Visible properties to false, the Label is not rendered except for only those postbacks where the control s Visible property is programmatically set to true.

GridView 위에 레이블 웹 컨트롤을 추가 Add a Label Web Control Above the GridView

그림 13: GridView 위에 레이블 웹 컨트롤 추가 (전체 크기 이미지를 보려면 클릭)Figure 13: Add a Label Web Control Above the GridView (Click to view full-size image)

다음으로 Click 이벤트 처리기를 늘려 SuppliersSelectedIndex이 0 보다 작은 경우 ChooseSupplierMsg 레이블을 표시 하 고, 그렇지 않은 경우 ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID 사용자를 리디렉션합니다.Next, augment the Click event handler to display the ChooseSupplierMsg Label if SuppliersSelectedIndex is less than zero, and redirect the user to ~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=SupplierID otherwise.

protected void SendToProducts_Click(object sender, EventArgs e)
{
    // make sure one of the radio buttons has been selected
    if (SuppliersSelectedIndex < 0)
        ChooseSupplierMsg.Visible = true;
    else
    {
        // Send the user to ~/Filtering/ProductsForSupplierDetails.aspx
        int supplierID = 
            Convert.ToInt32(Suppliers.DataKeys[SuppliersSelectedIndex].Value);
        Response.Redirect(
            "~/Filtering/ProductsForSupplierDetails.aspx?SupplierID=" 
            + supplierID);
    }
}

브라우저에서 페이지를 방문 하 고 GridView에서 공급자를 선택 하기 전에 SendToProducts 단추를 클릭 합니다.Visit the page in a browser and click the SendToProducts button before selecting a supplier from the GridView. 그림 14와 같이 ChooseSupplierMsg 레이블을 표시 합니다.As Figure 14 shows, this displays the ChooseSupplierMsg label. 그런 다음 공급자를 선택 하 고 SendToProducts 단추를 클릭 합니다.Next, select a supplier and click the SendToProducts button. 그러면 선택한 공급자가 제공 하는 제품을 나열 하는 페이지로 whisk 됩니다.This will whisk you to a page that lists the products supplied by the selected supplier. 그림 15에서는 Breweries 공급자가 선택 된 경우의 ProductsForSupplierDetails.aspx 페이지를 보여 줍니다.Figure 15 shows the ProductsForSupplierDetails.aspx page when the Bigfoot Breweries supplier was selected.

공급자를 선택 하지 않은 경우 ChooseSupplierMsg 레이블이 표시 The ChooseSupplierMsg Label is Displayed if No Supplier is Selected

그림 14: 공급자를 선택 하지 않은 경우 ChooseSupplierMsg 레이블이 표시 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 14: The ChooseSupplierMsg Label is Displayed if No Supplier is Selected (Click to view full-size image)

선택한 공급자 제품 ProductsForSupplierDetails에 표시 됩니다.The Selected Supplier s Products are Displayed in ProductsForSupplierDetails.aspx

그림 15: 선택한 공급자 제품이 ProductsForSupplierDetails.aspx 표시 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 15: The Selected Supplier s Products are Displayed in ProductsForSupplierDetails.aspx (Click to view full-size image)

5 단계: 같은 페이지에서 선택한 공급 업체 제품 표시Step 5: Displaying the Selected Supplier s Products on the Same Page

4 단계에서는 사용자를 다른 웹 페이지에 전송 하 여 선택한 공급 업체 제품을 표시 하는 방법을 살펴보았습니다.In Step 4 we saw how to send the user to another web page to display the selected supplier s products. 또는 선택한 공급자의 제품을 동일한 페이지에 표시할 수 있습니다.Alternatively, the selected supplier s products can be displayed on the same page. 이를 설명 하기 위해 RadioButtonField.aspx에 다른 GridView를 추가 하 여 선택한 공급 업체 제품을 표시 합니다.To illustrate this, we'll add another GridView to RadioButtonField.aspx to display the selected supplier s products.

공급자가 선택 된 후에만이 제품 GridView를 표시 하려면 Suppliers GridView 아래에 Panel 웹 컨트롤을 추가 하 고 해당 IDProductsBySupplierPanel로 설정 하 고 Visible 속성을 false로 설정 합니다.Since we only want this GridView of products to display once a supplier has been selected, add a Panel Web control beneath the Suppliers GridView, setting its ID to ProductsBySupplierPanel and its Visible property to false. 패널 내에서 선택한 공급자에 대 한 텍스트 제품을 추가한 다음 이름이 ProductsBySupplier인 GridView를 추가 합니다.Within the Panel, add the text Products for the Selected Supplier, followed by a GridView named ProductsBySupplier. GridView s 스마트 태그에서을 선택 하 여 ProductsBySupplierDataSource라는 새 ObjectDataSource에 바인딩합니다.From the GridView s smart tag, choose to bind it to a new ObjectDataSource named ProductsBySupplierDataSource.

ProductsBySupplier GridView를 새 ObjectDataSource에 바인딩 Bind the ProductsBySupplier GridView to a New ObjectDataSource

그림 16: 새 ObjectDataSource에 ProductsBySupplier GridView 바인딩 (전체 크기 이미지를 보려면 클릭)Figure 16: Bind the ProductsBySupplier GridView to a New ObjectDataSource (Click to view full-size image)

다음으로 ProductsBLL 클래스를 사용 하도록 ObjectDataSource를 구성 합니다.Next, configure the ObjectDataSource to use the ProductsBLL class. 선택한 공급자가 제공 하는 제품만 검색 하려고 하기 때문에 ObjectDataSource가 해당 데이터를 검색 하는 GetProductsBySupplierID(supplierID) 메서드를 호출 하도록 지정 합니다.Since we only want to retrieve those products provided by the selected supplier, specify that the ObjectDataSource should invoke the GetProductsBySupplierID(supplierID) method to retrieve its data. 업데이트, 삽입 및 삭제 탭의 드롭다운 목록에서 (없음)을 선택 합니다.Select (None) from the drop-down lists in the UPDATE, INSERT, and DELETE tabs.

GetProductsBySupplierID (공급자) 메서드를 사용 하도록 ObjectDataSource를 구성 Configure the ObjectDataSource to Use the GetProductsBySupplierID(supplierID) Method

그림 17: GetProductsBySupplierID(supplierID) 메서드를 사용 하도록 ObjectDataSource 구성 (전체 크기 이미지를 보려면 클릭)Figure 17: Configure the ObjectDataSource to Use the GetProductsBySupplierID(supplierID) Method (Click to view full-size image)

업데이트, 삽입 및 삭제 탭에서 드롭다운 목록을 (없음)으로 설정 Set the Drop-Down Lists to (None) in the UPDATE, INSERT, and DELETE Tabs

그림 18: 업데이트, 삽입 및 삭제 탭에서 드롭다운 목록을 (없음)으로 설정 (전체 크기 이미지를 보려면 클릭)Figure 18: Set the Drop-Down Lists to (None) in the UPDATE, INSERT, and DELETE Tabs (Click to view full-size image)

SELECT, UPDATE, INSERT 및 DELETE 탭을 구성한 후 다음을 클릭 합니다.After configuring the SELECT, UPDATE, INSERT, and DELETE tabs, click Next. GetProductsBySupplierID(supplierID) 메서드에는 입력 매개 변수가 필요 하므로 데이터 원본 만들기 마법사에서 매개 변수 값의 원본을 지정 하 라는 메시지를 표시 합니다.Since the GetProductsBySupplierID(supplierID) method expects an input parameter, the Create Data Source wizard prompts us to specify the source for the parameter s value.

여기에는 매개 변수 값의 원본을 지정 하는 몇 가지 옵션이 있습니다.We have a couple of options here in specifying the source of the parameter s value. 기본 매개 변수 개체를 사용 하 고 SuppliersSelectedIndex 속성 값을 ObjectDataSource s Selecting 이벤트 처리기의 매개 변수 DefaultValue 속성에 프로그래밍 방식으로 할당할 수 있습니다.We could use the default Parameter object, and programmatically assign the value of the SuppliersSelectedIndex property to the Parameter s DefaultValue property in the ObjectDataSource s Selecting event handler. ObjectDataSource의 매개 변수 값을 프로그래밍 방식으로 지정 하려면 리프레셔에 대해 objectdatasource의 매개 변수 값 자습서를 프로그래밍 방식 으로 다시 참조 하세요.Refer back to the Programmatically Setting the ObjectDataSource's Parameter Values tutorial for a refresher on programmatically assigning values to the ObjectDataSource s parameters.

또는 ControlParameter를 사용 하 고 Suppliers GridView s SelectedValue 속성 을 참조할 수 있습니다 (그림 19 참조).Alternatively, we can use a ControlParameter and refer to the Suppliers GridView s SelectedValue property (see Figure 19). GridView s SelectedValue 속성은 SelectedIndex 속성에 해당 하는 DataKey 값을 반환 합니다.The GridView s SelectedValue property returns the DataKey value corresponding to the SelectedIndex property. 이 옵션이 작동 하려면 ListProducts 단추를 클릭할 때 GridView s SelectedIndex 속성을 선택 된 행으로 프로그래밍 방식으로 설정 해야 합니다.In order for this option to work, we need to programmatically set the GridView s SelectedIndex property to the selected row when the ListProducts button is clicked. 추가 된 혜택으로, SelectedIndex설정 하 여 선택한 레코드는 DataWebControls 테마 (노란색 배경)에 정의 된 SelectedRowStyle에 적용 됩니다.As an added benefit, by setting the SelectedIndex, the selected record will take on the SelectedRowStyle defined in the DataWebControls Theme (a yellow background).

ControlParameter를 사용 하 GridView s SelectedValue을 매개 변수 원본으로 지정 합니다.Use a ControlParameter to Specify the GridView s SelectedValue as the Parameter Source

그림 19: controlparameter를 사용 하 여 GridView s SelectedValue을 매개 변수 소스로 지정 (전체 크기 이미지를 보려면 클릭)Figure 19: Use a ControlParameter to Specify the GridView s SelectedValue as the Parameter Source (Click to view full-size image)

마법사가 완료 되 면 Visual Studio에서 제품 데이터 필드에 대 한 필드를 자동으로 추가 합니다.Upon completing the wizard, Visual Studio will automatically add fields for the product s data fields. ProductName, CategoryNameUnitPrice BoundFields를 제외한 모든 항목을 제거 하 고 HeaderText 속성을 Product, Category 및 Price로 변경 합니다.Remove all but the ProductName, CategoryName, and UnitPrice BoundFields, and change the HeaderText properties to Product, Category, and Price. UnitPrice BoundField를 구성 하 여 해당 값의 서식을 통화로 지정 합니다.Configure the UnitPrice BoundField so that its value is formatted as a currency. 이러한 변경을 수행한 후 패널, GridView 및 ObjectDataSource의 선언 태그는 다음과 같습니다.After making these changes, the Panel, GridView, and ObjectDataSource s declarative markup should look like the following:

<asp:Panel runat="server" ID="ProductsBySupplierPanel" Visible="False">
    <h3>
        Products for the Selected Supplier</h3>
    <p>
        <asp:GridView ID="ProductsBySupplier" runat="server" 
            AutoGenerateColumns="False" DataKeyNames="ProductID"
            DataSourceID="ProductsBySupplierDataSource" EnableViewState="False">
            <Columns>
                <asp:BoundField DataField="ProductName" HeaderText="Product" 
                    SortExpression="ProductName" />
                <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                    ReadOnly="True" SortExpression="CategoryName" />
                <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                    HeaderText="Price" HtmlEncode="False" 
                    SortExpression="UnitPrice" />
            </Columns>
        </asp:GridView>
        <asp:ObjectDataSource ID="ProductsBySupplierDataSource" runat="server" 
            OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetProductsBySupplierID" TypeName="ProductsBLL">
            <SelectParameters>
                <asp:ControlParameter ControlID="Suppliers" Name="supplierID" 
                    PropertyName="SelectedValue" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </p>
</asp:Panel>

이 연습을 완료 하려면 GridView s SelectedIndex 속성을 SelectedSuppliersIndex로 설정 하 고 ProductsBySupplierPanel 패널의 Visible 속성을 true 단추를 클릭할 때 ListProducts으로 설정 해야 합니다.To complete this exercise, we need to set the GridView s SelectedIndex property to the SelectedSuppliersIndex and the ProductsBySupplierPanel Panel s Visible property to true when the ListProducts button is clicked. 이 작업을 수행 하려면 ListProducts Button Web control s Click 이벤트에 대 한 이벤트 처리기를 만들고 다음 코드를 추가 합니다.To accomplish this, create an event handler for the ListProducts Button Web control s Click event and add the following code:

protected void ListProducts_Click(object sender, EventArgs e)
{
    // make sure one of the radio buttons has been selected
    if (SuppliersSelectedIndex < 0)
    {
        ChooseSupplierMsg.Visible = true;
        ProductsBySupplierPanel.Visible = false;
    }
    else
    {
        // Set the GridView's SelectedIndex
        Suppliers.SelectedIndex = SuppliersSelectedIndex;
        // Show the ProductsBySupplierPanel panel
        ProductsBySupplierPanel.Visible = true;
    }
}

GridView에서 공급자를 선택 하지 않은 경우 ChooseSupplierMsg 레이블이 표시 되 고 ProductsBySupplierPanel 패널이 숨겨집니다.If a supplier has not been selected from the GridView, the ChooseSupplierMsg Label is displayed and the ProductsBySupplierPanel Panel hidden. 그렇지 않고 공급자를 선택한 경우 ProductsBySupplierPanel 표시 되 고 GridView s SelectedIndex 속성이 업데이트 됩니다.Otherwise, if a supplier has been selected, the ProductsBySupplierPanel is displayed and the GridView s SelectedIndex property is updated.

그림 20에서는 Breweries 공급자를 선택 하 고 페이지에 제품 표시 단추를 클릭 한 후의 결과를 보여 줍니다.Figure 20 shows the results after the Bigfoot Breweries supplier has been selected and the Show Products on Page button has been clicked.

에서 제공 하는 제품이 동일한 페이지에 나열 됩니다.The Products Supplied by Bigfoot Breweries are Listed on the Same Page

그림 20: (Breweries 피트)에서 제공 하는 제품이 동일한 페이지에 나열 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 20: The Products Supplied by Bigfoot Breweries are Listed on the Same Page (Click to view full-size image)

요약Summary

세부 정보 DetailView 자습서와 함께 선택 가능한 마스터 GridView를 사용 하 여 마스터/세부 정보에서 설명한 대로 ShowSelectButton 속성이 true로 설정 된 commandfield를 사용 하 여 GridView에서 레코드를 선택할 수 있습니다.As discussed in the Master/Detail Using a Selectable Master GridView with a Details DetailView tutorial, records can be selected from a GridView using a CommandField whose ShowSelectButton property is set to true. 그러나 CommandField는 일반 푸시 단추, 링크 또는 이미지로 단추를 표시 합니다.But the CommandField displays its buttons either as regular push buttons, links, or images. 대체 행 선택 사용자 인터페이스는 각 GridView 행에 라디오 단추나 확인란을 제공 하는 것입니다.An alternative row-selection user interface is to provide a radio button or checkbox in each GridView row. 이 자습서에서는 라디오 단추 열을 추가 하는 방법을 살펴보았습니다.In this tutorial we examined how to add a column of radio buttons.

불행 하 게도 라디오 단추 열을 추가 하는 것은 무엇 보다 간단 하거나 간단 하지 않을 수 있습니다.Unfortunately, adding a column of radio buttons isn t as straightforward or simple as one might expect. 단추를 클릭 하 여 추가할 수 있는 기본 제공 RadioButtonField 없으며, Templatefield로 변환 내에 RadioButton 웹 컨트롤을 사용 하면 고유한 문제 집합이 도입 됩니다.There is no built-in RadioButtonField that can be added at the click of a button, and using the RadioButton Web control within a TemplateField introduces its own set of problems. 결과적으로 이러한 인터페이스를 제공 하기 위해 사용자 지정 DataControlField 클래스를 만들어야 하거나 RowCreated 이벤트 중에 적절 한 HTML을 Templatefield로 변환에 삽입 해야 합니다.In the end, to provide such an interface we either have to create a custom DataControlField class or resort to injecting the appropriate HTML into a TemplateField during the RowCreated event.

라디오 단추 열을 추가 하는 방법을 살펴본 후에는 확인란 열을 추가 하는 것에 주목 하세요.Having explored how to add a column of radio buttons, let us turn our attention to adding a column of checkboxes. 사용자는 확인란의 열을 사용 하 여 하나 이상의 GridView 행을 선택 하 고 선택한 모든 행 (예: 웹 기반 전자 메일 클라이언트에서 전자 메일 집합 선택)에 대해 일부 작업을 수행한 다음 선택한 모든 메일을 삭제 하도록 선택할 수 있습니다.With a column of checkboxes, a user can select one or more GridView rows and then perform some operation on all of the selected rows (such as selecting a set of emails from a web-based email client, and then choosing to delete all selected emails). 다음 자습서에서는 이러한 열을 추가 하는 방법을 알아봅니다.In the next tutorial we'll see how to add such a column.

행복 한 프로그래밍Happy Programming!

저자 정보About the Author

Scott Mitchell(7 개의 ASP/ASP. NET books 및 4GuysFromRolla.com창립자)은 1998부터 Microsoft 웹 기술을 사용 하 여 작업 했습니다.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott은 독립 컨설턴트, 강사 및 기록기로 작동 합니다.Scott works as an independent consultant, trainer, and writer. 최신 책은 24 시간 이내에 ASP.NET 2.0을 sams teach yourself것입니다.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. mitchell@4GuysFromRolla.com에 도달할 수 있습니다 .He can be reached at mitchell@4GuysFromRolla.com. 또는 블로그를 통해 http://ScottOnWriting.NET에서 찾을 수 있습니다.or via his blog, which can be found at http://ScottOnWriting.NET.

특별히 감사 합니다.Special Thanks To

이 자습서 시리즈는 많은 유용한 검토자가 검토 했습니다.This tutorial series was reviewed by many helpful reviewers. 이 자습서의 리드 검토자는 David Suru입니다.Lead reviewer for this tutorial was David Suru. 예정 된 MSDN 문서를 검토 하는 데 관심이 있나요?Interested in reviewing my upcoming MSDN articles? 그렇다면mitchell@4GuysFromRolla.com에서 줄을 삭제 합니다.If so, drop me a line at mitchell@4GuysFromRolla.com.