기존 이진 데이터 업데이트 및 삭제(C#)

작성자 : Scott Mitchell

PDF 다운로드

이전 자습서에서는 GridView 컨트롤을 사용하여 텍스트 데이터를 간단하게 편집하고 삭제하는 방법을 알아보았습니다. 이 자습서에서는 이진 데이터가 데이터베이스에 저장되거나 파일 시스템에 저장되는지 여부에 관계없이 GridView 컨트롤을 통해 이진 데이터를 편집하고 삭제할 수 있는 방법을 알아보세요.

소개

지난 세 자습서에서는 이진 데이터 작업을 위한 많은 기능을 추가했습니다. 먼저 테이블에 열을 Categories 추가하고 BrochurePath 그에 따라 아키텍처를 업데이트했습니다. 또한 이미지 파일의 이진 콘텐츠 s를 포함하는 Categories 테이블의 기존 Picture 열과 함께 작동하도록 데이터 액세스 계층 및 비즈니스 논리 계층 메서드를 추가했습니다. 이진 데이터를 GridView에 브로셔에 대한 다운로드 링크를 제공하는 웹 페이지를 빌드했으며, 요소에 <img> 범주의 그림이 표시되고 사용자가 새 범주를 추가하고 브로셔 및 그림 데이터를 업로드할 수 있도록 DetailsView를 추가했습니다.

구현해야 할 것은 기존 범주를 편집하고 삭제하는 기능입니다. 이 자습서에서는 GridView의 기본 제공 편집 및 삭제 기능을 사용하여 수행할 것입니다. 범주를 편집할 때 사용자는 필요에 따라 새 사진을 업로드하거나 범주가 기존 그림을 계속 사용하도록 할 수 있습니다. 브로셔의 경우 기존 브로슈어를 사용하거나, 새 브로슈어를 업로드하거나, 범주에 더 이상 브로슈어와 연결되어 있지 않음을 나타낼 수 있습니다. 시작해 보겠습니다!

1단계: 데이터 액세스 계층 업데이트

DAL은 , Update및 메서드를 자동으로 생성Insert했지만 이러한 메서드는 열을 포함하지 않는 기본 쿼리를 Picture 기반으로 CategoriesTableAdapter 생성 Delete 되었습니다. 따라서 및 Update 메서드에는 Insert 범주 그림에 대한 이진 데이터를 지정하기 위한 매개 변수가 포함되지 않습니다. 이전 자습서에서와 마찬가지로 이진 데이터를 지정할 때 테이블을 업데이트 Categories 하기 위한 새 TableAdapter 메서드를 만들어야 합니다.

형식화된 데이터 세트를 열고 Designer 헤더를 CategoriesTableAdapter 마우스 오른쪽 단추로 클릭하고 상황에 맞는 메뉴에서 쿼리 추가를 선택하여 TableAdapter 쿼리 구성 마법사를 시작합니다. 이 마법사는 TableAdapter 쿼리가 데이터베이스에 액세스하는 방법을 묻는 것으로 시작합니다. SQL 문 사용을 선택하고 다음을 클릭합니다. 다음 단계에서는 생성할 쿼리 유형을 묻는 메시지를 표시합니다. 테이블에 새 레코드 Categories 를 추가하는 쿼리를 만들고 있으므로 업데이트를 선택하고 다음을 클릭합니다.

그림 1: 업데이트 옵션 선택(전체 크기 이미지를 보려면 클릭)

이제 SQL 문을 지정 UPDATE 해야 합니다. 마법사는 TableAdapter의 기본 쿼리(, Description및 BrochurePath 값을 업데이트하는 문)에 해당하는 문을 자동으로 제안 UPDATE 합니다CategoryName. 다음과 같이 열이 Picture 매개 변수와 함께 @Picture 포함되도록 문을 변경합니다.

UPDATE [Categories] SET 
    [CategoryName] = @CategoryName, 
    [Description] = @Description, 
    [BrochurePath] = @BrochurePath ,
    [Picture] = @Picture
WHERE (([CategoryID] = @Original_CategoryID))

마법사의 마지막 화면에서 새 TableAdapter 메서드의 이름을 지정하도록 요청합니다. 를 입력 UpdateWithPicture 하고 마침을 클릭합니다.

그림 2: 새 TableAdapter 메서드 UpdateWithPicture 의 이름을 지정합니다(전체 크기 이미지를 보려면 클릭).

2단계: 비즈니스 논리 계층 메서드 추가

DAL을 업데이트하는 것 외에도 범주를 업데이트하고 삭제하는 메서드를 포함하도록 BLL을 업데이트해야 합니다. 다음은 프레젠테이션 계층에서 호출되는 메서드입니다.

범주를 삭제하려면 의 자동 생성된 Delete 메서드를 CategoriesTableAdapter 사용할 수 있습니다. CategoriesBLL 클래스에 다음 메서드를 추가합니다.

[System.ComponentModel.DataObjectMethodAttribute
    (System.ComponentModel.DataObjectMethodType.Delete, true)]
public bool DeleteCategory(int categoryID)
{
    int rowsAffected = Adapter.Delete(categoryID);
    // Return true if precisely one row was deleted, otherwise false
    return rowsAffected == 1;
}

이 자습서에서는 범주를 업데이트하기 위한 두 가지 메서드를 만들어 보겠습니다. 하나는 이진 그림 데이터를 예상하고 방금 에 추가 CategoriesTableAdapter 한 메서드를 호출 UpdateWithPicture 하고, 다른 하나는 , Description및 값만 CategoryName수락하고 BrochurePath 클래스의 자동 생성된 Update 문을 사용하는 CategoriesTableAdapter 메서드입니다. 두 가지 방법을 사용하는 이유는 경우에 따라 사용자가 다른 필드와 함께 범주의 그림을 업데이트하려고 할 수 있다는 것입니다. 이 경우 사용자는 새 그림을 업로드해야 합니다. 업로드된 그림의 이진 데이터를 문에서 UPDATE 사용할 수 있습니다. 다른 경우에는 사용자가 이름 및 설명을 업데이트하는 데만 관심이 있을 수 있습니다. 그러나 문에 UPDATE 열에 대한 Picture 이진 데이터도 필요한 경우 해당 정보도 제공해야 합니다. 이렇게 하려면 편집 중인 레코드에 대한 그림 데이터를 다시 가져오기 위해 데이터베이스를 추가로 방문해야 합니다. 따라서 두 UPDATE 가지 메서드를 원합니다. 비즈니스 논리 계층은 범주를 업데이트할 때 그림 데이터가 제공되는지 여부에 따라 사용할 항목을 결정합니다.

이를 용이하게 하려면 라는 두 메서드를 클래스UpdateCategory에 CategoriesBLL 추가합니다. 첫 번째 매개 변수는 세 string 개의 s, byte 배열 및 를 int 입력 매개 변수로 수락해야 합니다. 두 번째 매개 변수는 3개, 은 3개 string 만 허용 int해야 합니다. 입력 매개 변수는 string 범주 이름, 설명 및 브로셔 파일 경로에 대한 것이고, byte 배열은 범주 그림의 이진 내용에 대한 것이며 int , 는 업데이트할 레코드의 를 식별합니다 CategoryID . 전달된 배열이 인 경우 첫 번째 오버로드는 두 번째 오버로드를 byte 호출합니다 null.

[System.ComponentModel.DataObjectMethodAttribute
    (System.ComponentModel.DataObjectMethodType.Update, false)]
public bool UpdateCategory(string categoryName, string description, 
    string brochurePath, byte[] picture, int categoryID)
{
    // If no picture is specified, use other overload
    if (picture == null)
        return UpdateCategory(categoryName, description, brochurePath, categoryID);
    // Update picture, as well
    int rowsAffected = Adapter.UpdateWithPicture
        (categoryName, description, brochurePath, picture, categoryID);
    // Return true if precisely one row was updated, otherwise false
    return rowsAffected == 1;
}
[System.ComponentModel.DataObjectMethodAttribute
    (System.ComponentModel.DataObjectMethodType.Update, true)]
public bool UpdateCategory(string categoryName, string description, 
    string brochurePath, int categoryID)
{
    int rowsAffected = Adapter.Update
        (categoryName, description, brochurePath, categoryID);
    // Return true if precisely one row was updated, otherwise false
    return rowsAffected == 1;
}

3단계: 삽입 및 보기 기능 복사

이전 자습서에서는 GridView의 모든 범주를 나열하는 라는 UploadInDetailsView.aspx 페이지를 만들고 시스템에 새 범주를 추가하는 DetailsView를 제공했습니다. 이 자습서에서는 편집 및 삭제 지원을 포함하도록 GridView를 확장합니다. 에서 UploadInDetailsView.aspx작업을 계속하는 대신 이 자습서의 변경 내용을 UpdatingAndDeleting.aspx 동일한 폴더 ~/BinaryData의 페이지에 배치해 보겠습니다. 에서 선언적 태그 및 코드를 복사하여 에 UploadInDetailsView.aspxUpdatingAndDeleting.aspx붙여넣습니다.

페이지를 열어 시작합니다 UploadInDetailsView.aspx . 그림 3과 같이 요소 내 <asp:Content> 의 선언적 구문을 모두 복사합니다. 그런 다음 이 태그를 열고 UpdatingAndDeleting.aspx 해당 요소 내에 붙여넣습니다 <asp:Content> . 마찬가지로 페이지의 코드 숨김 클래스에서 UploadInDetailsView.aspx 로 코드를 복사합니다 UpdatingAndDeleting.aspx.

그림 3: 에서 선언적 태그 UploadInDetailsView.aspx 복사(전체 크기 이미지를 보려면 클릭)

선언적 태그 및 코드를 복사한 후 를 방문합니다 UpdatingAndDeleting.aspx. 동일한 출력이 표시되고 이전 자습서의 페이지와 UploadInDetailsView.aspx 동일한 사용자 환경이 있어야 합니다.

4단계: ObjectDataSource 및 GridView에 삭제 지원 추가

데이터 삽입, 업데이트 및 삭제 개요 자습서에서 다시 설명한 것처럼 GridView는 기본 제공 삭제 기능을 제공하며 그리드의 기본 데이터 원본이 삭제를 지원하는 경우 확인란의 틱에서 이러한 기능을 사용하도록 설정할 수 있습니다. 현재 GridView가 (CategoriesDataSource)에 바인딩된 ObjectDataSource는 삭제를 지원하지 않습니다.

이 문제를 해결하려면 ObjectDataSource의 스마트 태그에서 데이터 원본 구성 옵션을 클릭하여 마법사를 시작합니다. 첫 번째 화면에서는 ObjectDataSource가 클래스와 함께 작동하도록 구성되어 있음을 CategoriesBLL 보여줍니다. 다음을 누릅니다. 현재 ObjectDataSource 및 InsertMethodSelectMethod 속성만 지정됩니다. 그러나 마법사는 UPDATE 및 DELETE 탭의 드롭다운 목록을 각각 및 DeleteCategory 메서드로 UpdateCategory 자동 채웁니다. 이는 클래스에서 CategoriesBLL 를 업데이트 및 삭제하기 위한 기본 메서드로 사용하여 DataObjectMethodAttribute 이러한 메서드를 표시했기 때문입니다.

지금은 UPDATE 탭의 드롭다운 목록을 (없음)으로 설정하지만 DELETE 탭의 드롭다운 목록을 로 설정합니다 DeleteCategory. 업데이트 지원을 추가하려면 6단계에서 이 마법사로 돌아갑니다.

그림 4: 메서드를 사용하도록 DeleteCategory ObjectDataSource 구성(전체 크기 이미지를 보려면 클릭)

ObjectDataSource에는 이제 속성 DeleteMethod 에 대한 값과 DeleteParameter가 포함됩니다. 마법사를 사용하여 메서드를 지정할 때 Visual Studio는 ObjectDataSource의 OldValuesParameterFormatString 속성을 original_{0}로 설정하여 업데이트 및 삭제 메서드 호출에 문제가 발생합니다. 따라서 이 속성을 모두 지우거나 기본값인 {0}로 다시 설정합니다. 이 ObjectDataSource 속성에서 메모리를 새로 고쳐야 하는 경우 데이터 삽입, 업데이트 및 삭제 개요 자습서를 참조하세요.

마법사를 완료하고 를 수정한 OldValuesParameterFormatString후 ObjectDataSource의 선언적 태그는 다음과 유사하게 표시됩니다.

<asp:ObjectDataSource ID="CategoriesDataSource" runat="server" 
    OldValuesParameterFormatString="{0}" SelectMethod="GetCategories" 
    TypeName="CategoriesBLL" InsertMethod="InsertWithPicture" 
    DeleteMethod="DeleteCategory">
    <InsertParameters>
        <asp:Parameter Name="categoryName" Type="String" />
        <asp:Parameter Name="description" Type="String" />
        <asp:Parameter Name="brochurePath" Type="String" />
        <asp:Parameter Name="picture" Type="Object" />
    </InsertParameters>
    <DeleteParameters>
        <asp:Parameter Name="categoryID" Type="Int32" />
    </DeleteParameters>
</asp:ObjectDataSource>

ObjectDataSource를 구성한 후 GridView의 스마트 태그에서 삭제 사용 확인란을 선택하여 GridView에 삭제 기능을 추가합니다. 그러면 속성이 로 설정된 trueGridView ShowDeleteButton 에 CommandField가 추가됩니다.

그림 5: GridView에서 삭제 지원 사용(전체 크기 이미지를 보려면 클릭)

잠시 시간을 내어 삭제 기능을 테스트합니다. 테이블과 Categories 테이블 CategoryID 의 CategoryID사이에 Products 외래 키가 있으므로 처음 8개 범주 중 일부를 삭제하려고 하면 외래 키 제약 조건 위반 예외가 발생합니다. 이 기능을 테스트하려면 브로셔와 그림을 모두 제공하는 새 범주를 추가합니다. 그림 6에 표시된 내 테스트 범주에는 라는 Test.pdf 테스트 브로슈어 파일과 테스트 사진이 포함되어 있습니다. 그림 7은 테스트 범주가 추가된 후의 GridView를 보여줍니다.

그림 6: 브로셔 및 이미지를 사용하여 테스트 범주 추가(전체 크기 이미지를 보려면 클릭)

그림 7: 테스트 범주를 삽입한 후 GridView에 표시됩니다(전체 크기 이미지를 보려면 클릭).

Visual Studio에서 솔루션 탐색기 새로 고칩니다. 이제 폴더 Test.pdf 에 ~/Brochures 새 파일이 표시됩니다(그림 8 참조).

그런 다음 테스트 범주 행에서 삭제 링크를 클릭하여 페이지가 포스트백되고 클래스의 DeleteCategory 메서드가 CategoriesBLL 실행됩니다. 그러면 DAL 메서드 Delete 가 호출되어 적절한 DELETE 문이 데이터베이스로 전송됩니다. 그러면 데이터가 GridView로 다시 돌아가고 태그가 테스트 범주가 더 이상 존재하지 않는 클라이언트로 다시 전송됩니다.

삭제 워크플로가 테이블에서 테스트 범주 레코드를 Categories 성공적으로 제거한 반면 웹 서버의 파일 시스템에서 브로셔 파일을 제거하지는 않았습니다. 솔루션 탐색기 새로 고치면 폴더에 ~/Brochures 여전히 있는 것을 Test.pdf 볼 수 있습니다.

그림 8: Test.pdf 파일이 웹 서버의 파일 시스템에서 삭제되지 않았습니다.

5단계: 삭제된 범주의 브로셔 파일 제거

데이터베이스 외부에 이진 데이터를 저장하는 단점 중 하나는 연결된 데이터베이스 레코드가 삭제될 때 이러한 파일을 클린 위해 추가 단계를 수행해야 한다는 것입니다. GridView 및 ObjectDataSource는 delete 명령이 수행되기 전과 후에 발생하는 이벤트를 제공합니다. 실제로는 사전 및 사후 작업 이벤트 모두에 대한 이벤트 처리기를 만들어야 합니다. 레코드를 Categories 삭제하기 전에 해당 PDF 파일의 경로를 확인해야 하지만 일부 예외가 있고 범주가 삭제되지 않은 경우 범주가 삭제되기 전에 PDF를 삭제하지 않습니다.

GridView의 RowDeleting 이벤트는 ObjectDataSource의 delete 명령이 호출되기 전에 실행되고 그 RowDeleted 이후에 이벤트가 발생합니다. 다음 코드를 사용하여 이러한 두 이벤트에 대한 이벤트 처리기를 만듭니다.

// A page variable to "remember" the deleted category's BrochurePath value 
string deletedCategorysPdfPath = null;
protected void Categories_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
    // Determine the PDF path for the category being deleted...
    int categoryID = Convert.ToInt32(e.Keys["CategoryID"]);
    CategoriesBLL categoryAPI = new CategoriesBLL();
    Northwind.CategoriesDataTable categories = 
        categoryAPI.GetCategoryByCategoryID(categoryID);
    Northwind.CategoriesRow category = categories[0];
    if (category.IsBrochurePathNull())
        deletedCategorysPdfPath = null;
    else
        deletedCategorysPdfPath = category.BrochurePath;
}
protected void Categories_RowDeleted(object sender, GridViewDeletedEventArgs e)
{
    // Delete the brochure file if there were no problems deleting the record
    if (e.Exception == null)
    {
        // Is there a file to delete?
        if (deletedCategorysPdfPath != null)
        {
            System.IO.File.Delete(Server.MapPath(deletedCategorysPdfPath));
        }
    }
}

RowDeleting 이벤트 처리기 CategoryID 에서 삭제되는 행의 는 GridView 컬렉션 DataKeys 에서 가져옵니다. 이 컬렉션은 컬렉션을 통해 e.Keys 이 이벤트 처리기에서 액세스할 수 있습니다. 다음으로, CategoriesBLL 삭제되는 레코드에 대한 정보를 반환하기 위해 클래스가 GetCategoryByCategoryID(categoryID) 호출됩니다. 반환 CategoriesDataRow 된 개체에 값NULL``BrochurePath 이 없는 경우 이벤트 처리기에서 파일을 삭제할 수 있도록 페이지 변수 deletedCategorysPdfPath 에 RowDeleted 저장됩니다.

ObjectDataSource의 기본 delete 명령이 호출되면 GridView의 RowDeleted 이벤트 처리기가 실행됩니다. 데이터 삭제에 예외가 없고 에 대한 deletedCategorysPdfPath값이 있는 경우 파일 시스템에서 PDF가 삭제됩니다. 이 추가 코드는 그림과 연결된 범주의 이진 데이터를 클린 필요가 없습니다. 그림 데이터가 데이터베이스에 직접 저장되므로 행을 삭제하면 Categories 해당 범주의 그림 데이터도 삭제됩니다.

두 이벤트 처리기를 추가한 후 이 테스트 사례를 다시 실행합니다. 범주를 삭제하면 연결된 PDF도 삭제됩니다.

기존 레코드의 연결된 이진 데이터를 업데이트하면 몇 가지 흥미로운 문제가 발생합니다. 이 자습서의 나머지 부분에서는 브로셔 및 그림에 업데이트 기능을 추가하는 방법을 자세히 설명합니다. 6단계에서는 브로슈어 정보를 업데이트하는 기술을 살펴보고 7단계는 그림 업데이트를 살펴봅니다.

6단계: 범주 브로슈어 업데이트

데이터 삽입, 업데이트 및 삭제 개요 자습서에서 설명한 대로 GridView는 기본 데이터 원본이 적절하게 구성된 경우 확인란의 틱으로 구현할 수 있는 기본 제공 행 수준 편집 지원을 제공합니다. 현재 CategoriesDataSource ObjectDataSource는 업데이트 지원을 포함하도록 아직 구성되지 않았으므로 추가해 보겠습니다.

ObjectDataSource 마법사에서 데이터 원본 구성 링크를 클릭하고 두 번째 단계를 진행합니다. DataObjectMethodAttribute 에서 CategoriesBLL사용되므로 UPDATE 드롭다운 목록은 4개의 입력 매개 변수를 허용하는 오버로드로 UpdateCategory 자동으로 채워져야 합니다(하지만 Picture모든 열에 대해 ). 5개의 매개 변수와 함께 오버로드를 사용할 수 있도록 이를 변경합니다.

그림 9: 에 대한 Picture 매개 변수를 포함하는 메서드를 사용하도록 UpdateCategory ObjectDataSource 구성(전체 크기 이미지를 보려면 클릭)

이제 ObjectDataSource에는 해당 UpdateMethod 속성의 값과 해당 UpdateParameter 의 값이 포함됩니다. 4단계에서 설명한 것처럼 Visual Studio는 데이터 원본 구성 마법사를 original_{0} 사용할 때 ObjectDataSource의 OldValuesParameterFormatString 속성을 로 설정합니다. 이로 인해 업데이트 및 삭제 메서드 호출에 문제가 발생합니다. 따라서 이 속성을 모두 지우거나 기본값인 {0}로 다시 설정합니다.

마법사를 완료하고 를 수정한 OldValuesParameterFormatString후 ObjectDataSource의 선언적 태그는 다음과 같이 표시됩니다.

<asp:ObjectDataSource ID="CategoriesDataSource" runat="server" 
    OldValuesParameterFormatString="{0}" SelectMethod="GetCategories" 
    TypeName="CategoriesBLL" InsertMethod="InsertWithPicture" 
    DeleteMethod="DeleteCategory" UpdateMethod="UpdateCategory">
    <InsertParameters>
        <asp:Parameter Name="categoryName" Type="String" />
        <asp:Parameter Name="description" Type="String" />
        <asp:Parameter Name="brochurePath" Type="String" />
        <asp:Parameter Name="picture" Type="Object" />
    </InsertParameters>
    <DeleteParameters>
        <asp:Parameter Name="categoryID" Type="Int32" />
    </DeleteParameters>
    <UpdateParameters>
        <asp:Parameter Name="categoryName" Type="String" />
        <asp:Parameter Name="description" Type="String" />
        <asp:Parameter Name="brochurePath" Type="String" />
        <asp:Parameter Name="picture" Type="Object" />
        <asp:Parameter Name="categoryID" Type="Int32" />
    </UpdateParameters>
</asp:ObjectDataSource>

GridView의 기본 제공 편집 기능을 켜려면 GridView의 스마트 태그에서 편집 사용 옵션을 검사. 그러면 CommandField의 ShowEditButton 속성 true이 로 설정되고 편집 단추(편집 중인 행에 대한 업데이트 및 취소 단추)가 추가됩니다.

그림 10: 편집을 지원하도록 GridView 구성(전체 크기 이미지를 보려면 클릭)

브라우저를 통해 페이지를 방문하여 행 편집 단추 중 하나를 클릭합니다. CategoryName 및 Description BoundFields는 텍스트 상자로 렌더링됩니다. TemplateField에는 BrochurePath 가 EditItemTemplate없으므로 브로셔에 대한 ItemTemplate 링크가 계속 표시됩니다. ImageField는 Picture 이 경우 CategoryID속성에 Text ImageField DataImageUrlField 값 값이 할당된 TextBox로 렌더링됩니다.

그림 11: GridView에 대한 BrochurePath 편집 인터페이스가 없습니다(전체 크기 이미지를 보려면 클릭).

BrochurePath편집 인터페이스 사용자 지정

사용자가 다음 중 하나를 수행할 수 있도록 하는 TemplateField에 대한 BrochurePath 편집 인터페이스를 만들어야 합니다.

• 범주의 브로셔를 있는 그대로 둡니다.
• 새 브로슈어를 업로드하여 범주의 브로셔를 업데이트하거나
• 범주의 브로슈어를 모두 제거합니다(범주에 연결된 브로셔가 더 이상 없는 경우).

ImageField의 편집 인터페이스도 업데이트 Picture 해야 하지만 7단계에서 이를 확인할 수 있습니다.

GridView의 스마트 태그에서 템플릿 편집 링크를 클릭하고 드롭다운 목록에서 TemplateField를 EditItemTemplate 선택합니다BrochurePath. 이 템플릿에 RadioButtonList 웹 컨트롤을 추가하고 속성을 로 설정하고 해당 IDBrochureOptionsAutoPostBack 속성을 로 true설정합니다. 속성 창 속성의 줄임표를 Items 클릭하면 컬렉션 편집기 표시됩니다ListItem. 각각 s 1, 2 및 3을 사용하여 Value 다음 세 가지 옵션을 추가합니다.

• 현재 브로셔 사용
• 현재 브로셔 제거
• 새 브로셔 업로드

첫 ListItem 번째 속성을 Selectedtrue로 설정합니다.

그림 12: RadioButtonList에 3개 ListItem 추가

RadioButtonList 아래에 라는 BrochureUploadFileUpload 컨트롤을 추가합니다. 해당 Visible 속성을 false로 설정합니다.

그림 13: RadioButtonList 및 FileUpload 컨트롤을 EditItemTemplate 에 추가합니다(전체 크기 이미지를 보려면 클릭).

이 RadioButtonList는 사용자에 대한 세 가지 옵션을 제공합니다. FileUpload 컨트롤은 마지막 옵션인 새 브로셔 업로드를 선택한 경우에만 표시됩니다. 이렇게 하려면 RadioButtonList 이벤트에 SelectedIndexChanged 대한 이벤트 처리기를 만들고 다음 코드를 추가합니다.

protected void BrochureOptions_SelectedIndexChanged(object sender, EventArgs e)
{
    // Get a reference to the RadioButtonList and its Parent
    RadioButtonList BrochureOptions = (RadioButtonList)sender;
    Control parent = BrochureOptions.Parent;
    // Now use FindControl("controlID") to get a reference of the 
    // FileUpload control
    FileUpload BrochureUpload = 
        (FileUpload)parent.FindControl("BrochureUpload");
    // Only show BrochureUpload if SelectedValue = "3"
    BrochureUpload.Visible = (BrochureOptions.SelectedValue == "3");
}

RadioButtonList 및 FileUpload 컨트롤은 템플릿 내에 있으므로 프로그래밍 방식으로 이러한 컨트롤에 액세스하기 위해 약간의 코드를 작성해야 합니다. SelectedIndexChanged 이벤트 처리기는 입력 매개 변수에서 RadioButtonList의 참조를 sender 전달합니다. FileUpload 컨트롤을 얻으려면 RadioButtonList의 부모 컨트롤을 가져와서 여기에서 메서드를 FindControl("controlID") 사용해야 합니다. RadioButtonList 및 FileUpload 컨트롤 모두에 대한 참조가 있으면 FileUpload 컨트롤의 속성은 RadioButtonList가 Visible 3인 경우에만 로 설정 true 됩니다. 이 속성은 새 브로셔 ListItem업로드 에 대한 입니다Value.SelectedValue

이 코드가 적용된 상태에서 잠시 시간을 내어 편집 인터페이스를 테스트합니다. 행에 대한 편집 단추를 클릭합니다. 처음에는 현재 브로셔 사용 옵션을 선택해야 합니다. 선택한 인덱스가 변경되면 포스트백이 발생합니다. 세 번째 옵션을 선택하면 FileUpload 컨트롤이 표시되고, 그렇지 않으면 숨겨집니다. 그림 14에서는 편집 단추를 처음 클릭할 때의 편집 인터페이스를 보여 집니다. 그림 15는 새 브로슈어 업로드 옵션을 선택한 후의 인터페이스를 보여 있습니다.

그림 14: 처음에는 현재 브로셔 사용 옵션이 선택되었습니다(전체 크기 이미지를 보려면 클릭).

그림 15: 새 브로셔 업로드 옵션을 선택하면 파일업로드 컨트롤이 표시됩니다(전체 크기 이미지를 보려면 클릭).

브로셔 파일 저장 및 열 업데이트BrochurePath

GridView의 업데이트 단추를 클릭하면 해당 RowUpdating 이벤트가 발생합니다. ObjectDataSource의 update 명령이 호출된 다음 GridView의 RowUpdated 이벤트가 발생합니다. 워크플로 삭제와 마찬가지로 이러한 두 이벤트에 대한 이벤트 처리기를 만들어야 합니다. RowUpdating 이벤트 처리기에서 RadioButtonList의 BrochureOptions 를 기반으로 SelectedValue 수행할 작업을 결정해야 합니다.

• 가 SelectedValue 1이면 동일한 BrochurePath 설정을 계속 사용하려고 합니다. 따라서 ObjectDataSource의 brochurePath 매개 변수를 업데이트할 레코드의 기존 BrochurePath 값으로 설정해야 합니다. ObjectDataSource의 brochurePath 매개 변수는 를 사용하여 e.NewValues["brochurePath"] = value설정할 수 있습니다.
• 가 SelectedValue 2이면 레코드 값을 BrochurePath 로 설정하려고 합니다 NULL. 이 작업은 ObjectDataSource의 brochurePath 매개 변수를 Nothing로 설정하여 수행할 수 있으며, 이로 인해 문에 데이터베이스 NULL 가 UPDATE 사용됩니다. 제거되는 기존 브로셔 파일이 있는 경우 기존 파일을 삭제해야 합니다. 그러나 예외를 발생하지 않고 업데이트가 완료된 경우에만 이 작업을 수행하려고 합니다.
• 가 SelectedValue 3인 경우 사용자가 PDF 파일을 업로드했는지 확인하고 파일 시스템에 저장하고 레코드의 BrochurePath 열 값을 업데이트하려고 합니다. 또한 대체되는 기존 브로슈어 파일이 있는 경우 이전 파일을 삭제해야 합니다. 그러나 예외를 발생하지 않고 업데이트가 완료된 경우에만 이 작업을 수행하려고 합니다.

RadioButtonList SelectedValue 가 3일 때 완료해야 하는 단계는 DetailsView의 ItemInserting 이벤트 처리기에서 사용하는 단계와 거의 동일합니다. 이 이벤트 처리기는 이전 자습서에서 추가한 DetailsView 컨트롤에서 새 범주 레코드가 추가될 때 실행됩니다. 따라서 이 기능을 별도의 메서드로 리팩터링해야 합니다. 특히 일반적인 기능을 다음 두 가지 방법으로 이동했습니다.

• ProcessBrochureUpload(FileUpload, out bool)은 fileUpload 컨트롤 instance 입력으로 허용하며 삭제 또는 편집 작업을 진행할지 아니면 일부 유효성 검사 오류로 인해 취소해야 하는지 여부를 지정하는 출력 부울 값입니다. 이 메서드는 저장된 파일의 경로를 반환하거나 null 파일이 저장되지 않은 경우 를 반환합니다.
• DeleteRememberedBrochurePath가 이 아닌 null경우 deletedCategorysPdfPath 페이지 변수 deletedCategorysPdfPath 의 경로에 지정된 파일을 삭제합니다.

이러한 두 메서드에 대한 코드는 다음과 같습니다. 이전 자습서의 DetailsView ItemInserting 이벤트 처리기와의 ProcessBrochureUpload 유사성을 확인합니다. 이 자습서에서는 이러한 새 메서드를 사용하도록 DetailsView의 이벤트 처리기를 업데이트했습니다. DetailsView의 이벤트 처리기에 대한 수정 내용을 보려면 이 자습서와 연결된 코드를 다운로드합니다.

private string ProcessBrochureUpload
    (FileUpload BrochureUpload, out bool CancelOperation)
{
    CancelOperation = false;    // by default, do not cancel operation
    if (BrochureUpload.HasFile)
    {
        // Make sure that a PDF has been uploaded
        if (string.Compare(System.IO.Path.GetExtension(BrochureUpload.FileName), 
            ".pdf", true) != 0)
        {
            UploadWarning.Text = 
                "Only PDF documents may be used for a category's brochure.";
            UploadWarning.Visible = true;
            CancelOperation = true;
            return null;
        }
        const string BrochureDirectory = "~/Brochures/";
        string brochurePath = BrochureDirectory + BrochureUpload.FileName;
        string fileNameWithoutExtension = 
            System.IO.Path.GetFileNameWithoutExtension(BrochureUpload.FileName);
        int iteration = 1;
        while (System.IO.File.Exists(Server.MapPath(brochurePath)))
        {
            brochurePath = string.Concat(BrochureDirectory, fileNameWithoutExtension, 
                "-", iteration, ".pdf");
            iteration++;
        }
        // Save the file to disk and set the value of the brochurePath parameter
        BrochureUpload.SaveAs(Server.MapPath(brochurePath));
        return brochurePath;
    }
    else
    {
        // No file uploaded
        return null;
    }
}
private void DeleteRememberedBrochurePath()
{
    // Is there a file to delete?
    if (deletedCategorysPdfPath != null)
    {
        System.IO.File.Delete(Server.MapPath(deletedCategorysPdfPath));
    }
}

GridView RowUpdating 및 RowUpdated 이벤트 처리기는 다음 코드와 같이 및 DeleteRememberedBrochurePath 메서드를 사용합니다ProcessBrochureUpload.

protected void Categories_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    // Reference the RadioButtonList
    RadioButtonList BrochureOptions = 
        (RadioButtonList)Categories.Rows[e.RowIndex].FindControl("BrochureOptions");
    // Get BrochurePath information about the record being updated
    int categoryID = Convert.ToInt32(e.Keys["CategoryID"]);
    CategoriesBLL categoryAPI = new CategoriesBLL();
    Northwind.CategoriesDataTable categories = 
        categoryAPI.GetCategoryByCategoryID(categoryID);
    Northwind.CategoriesRow category = categories[0];
    if (BrochureOptions.SelectedValue == "1")
    {
        // Use current value for BrochurePath
        if (category.IsBrochurePathNull())
            e.NewValues["brochurePath"] = null;
        else
            e.NewValues["brochurePath"] = category.BrochurePath;
    }
    else if (BrochureOptions.SelectedValue == "2")
    {
        // Remove the current brochure (set it to NULL in the database)
        e.NewValues["brochurePath"] = null;
    }
    else if (BrochureOptions.SelectedValue == "3")
    {
        // Reference the BrochurePath FileUpload control
        FileUpload BrochureUpload = 
            (FileUpload)Categories.Rows[e.RowIndex].FindControl("BrochureUpload");
        // Process the BrochureUpload
        bool cancelOperation = false;
        e.NewValues["brochurePath"] = 
            ProcessBrochureUpload(BrochureUpload, out cancelOperation);
        e.Cancel = cancelOperation;
    }
    else
    {
        // Unknown value!
        throw new ApplicationException(
            string.Format("Invalid BrochureOptions value, {0}", 
                BrochureOptions.SelectedValue));
    }
    if (BrochureOptions.SelectedValue == "2" || 
        BrochureOptions.SelectedValue == "3")
    {
        // "Remember" that we need to delete the old PDF file
        if (category.IsBrochurePathNull())
            deletedCategorysPdfPath = null;
        else
            deletedCategorysPdfPath = category.BrochurePath;
    }
}
protected void Categories_RowUpdated(object sender, GridViewUpdatedEventArgs e)
{
    // If there were no problems and we updated the PDF file, 
    // then delete the existing one
    if (e.Exception == null)
    {
        DeleteRememberedBrochurePath();
    }
}

이벤트 처리기가 일련의 조건문을 사용하여 RadioButtonList의 SelectedValue 속성 값에 BrochureOptions 따라 적절한 작업을 수행하는 방법을 RowUpdating 확인합니다.

이 코드를 적용하면 범주를 편집하고 현재 브로셔를 사용하거나 브로셔를 사용하지 않거나 새 브로셔를 업로드할 수 있습니다. 계속 진행하여 사용해 보세요. 및 RowUpdated 이벤트 처리기에서 RowUpdating 중단점을 설정하여 워크플로를 파악합니다.

7단계: 새 그림 업로드

ImageField의 편집 인터페이스는 Picture 속성의 값 DataImageUrlField 으로 채워진 텍스트 상자로 렌더링됩니다. 편집 워크플로 중에 GridView는 매개 변수 이름을 ImageField 속성의 값과 편집 인터페이스의 DataImageUrlField 텍스트 상자에 입력한 매개 변수 값으로 ObjectDataSource에 매개 변수를 전달합니다. 이 동작은 이미지가 파일 시스템에 파일로 저장되고 DataImageUrlField 에 이미지의 전체 URL이 포함된 경우에 적합합니다. 이러한 경우 편집 인터페이스는 사용자가 변경하고 데이터베이스에 다시 저장할 수 있는 이미지의 URL을 텍스트 상자에 표시합니다. 이 기본 인터페이스는 사용자가 새 이미지를 업로드할 수 없도록 허용하지만 이미지의 URL을 현재 값에서 다른 값으로 변경할 수 있습니다. 그러나 이 자습서에서는 이진 데이터가 데이터베이스 DataImageUrlField 에 직접 저장되고 속성에만 CategoryID가 있으므로 ImageField의 기본 편집 인터페이스로는 충분하지 Picture 않습니다.

사용자가 ImageField를 사용하여 행을 편집할 때 자습서에서 어떤 일이 발생하는지 더 잘 이해하려면 다음 예제를 고려합니다. 사용자가 10이 있는 행 CategoryID 을 편집하여 Picture ImageField가 값이 10인 텍스트 상자로 렌더링합니다. 사용자가 이 텍스트 상자의 값을 50으로 변경하고 업데이트 단추를 클릭한다고 상상해 보세요. 포스트백이 발생하고 GridView는 처음에 값이 50인 라는 CategoryID 매개 변수를 만듭니다. 그러나 GridView가 이 매개 변수(및 매개 CategoryNameDescription 변수)를 보내기 전에 컬렉션의 값 DataKeys 에 를 추가합니다. 따라서 매개 변수를 CategoryID 현재 행의 기본 CategoryID 값인 10으로 덮어씁니다. 요컨대 ImageField의 편집 인터페이스는 ImageField 속성의 이름과 그리드 값이 같기 때문에 이 자습서의 DataImageUrlFieldDataKey 편집 워크플로에 영향을 주지 않습니다.

ImageField를 사용하면 데이터베이스 데이터를 기반으로 이미지를 쉽게 표시할 수 있지만 편집 인터페이스에 텍스트 상자를 제공하지는 않습니다. 대신 최종 사용자가 범주의 그림을 변경하는 데 사용할 수 있는 FileUpload 컨트롤을 제공하려고 합니다. 값과 BrochurePath 달리 이러한 자습서의 경우 각 범주에 그림이 있어야 합니다. 따라서 사용자가 새 그림을 업로드하거나 현재 그림을 있는 그대로 둘 수 있는 연결된 그림이 없음을 사용자에게 표시할 필요가 없습니다.

ImageField의 편집 인터페이스를 사용자 지정하려면 이를 TemplateField로 변환해야 합니다. GridView의 스마트 태그에서 열 편집 링크를 클릭하고 ImageField를 선택한 다음 이 필드를 TemplateField로 변환 링크를 클릭합니다.

그림 16: ImageField를 TemplateField로 변환

이러한 방식으로 ImageField를 TemplateField로 변환하면 두 개의 템플릿이 있는 TemplateField가 생성됩니다. 다음 선언적 구문과 ItemTemplate 같이 에는 ImageField DataImageUrlFieldDataImageUrlFormatString 및 속성에 따라 데이터 바인딩 구문을 사용하여 속성이 할당된 Image Web 컨트롤 ImageUrl 이 포함됩니다. EditItemTemplate 에는 속성이 속성에 지정된 값에 바인딩된 TextBox Text 가 DataImageUrlField 포함되어 있습니다.

<asp:TemplateField>
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server" 
            Text='<%# Eval("CategoryID") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Image ID="Image1" runat="server" 
            ImageUrl='<%# Eval("CategoryID", 
                "DisplayCategoryPicture.aspx?CategoryID={0}") %>' />
    </ItemTemplate>
</asp:TemplateField>

FileUpload 컨트롤을 EditItemTemplate 사용하려면 를 업데이트해야 합니다. GridView의 스마트 태그에서 템플릿 편집 링크를 클릭한 다음 드롭다운 목록에서 TemplateField s EditItemTemplate 를 선택합니다Picture. 템플릿에 TextBox가 이 항목을 제거하는 것을 볼 수 있습니다. 그런 다음, 도구 상자에서 템플릿으로 FileUpload 컨트롤을 끌어서 로 IDPictureUpload설정합니다. 또한 범주의 그림을 변경하려면 새 그림을 지정합니다. 범주의 그림을 동일하게 유지하려면 필드를 템플릿에 비워 둡니다.

그림 17: 에 FileUpload 컨트롤 EditItemTemplate 추가(전체 크기 이미지를 보려면 클릭)

편집 인터페이스를 사용자 지정한 후 브라우저에서 진행률을 확인합니다. 읽기 전용 모드에서 행을 볼 때 범주의 이미지는 이전과 같이 표시되지만 편집 단추를 클릭하면 그림 열이 FileUpload 컨트롤을 사용하여 텍스트로 렌더링됩니다.

그림 18: 편집 인터페이스에 FileUpload 컨트롤이 포함되어 있습니다(전체 크기 이미지를 보려면 클릭).

ObjectDataSource는 그림 byte 의 이진 데이터를 배열로 입력으로 허용하는 클래스의 UpdateCategory 메서드를 호출 CategoriesBLL 하도록 구성되었습니다. 그러나 이 배열에 null 값이 있는 경우 대체 UpdateCategory 오버로드가 호출되어 열을 수정 Picture 하지 않는 SQL 문을 실행 UPDATE 하여 범주의 현재 그림을 그대로 둡니다. 따라서 GridView의 RowUpdating 이벤트 처리기에서 FileUpload 컨트롤을 PictureUpload 프로그래밍 방식으로 참조하고 파일이 업로드되었는지 확인해야 합니다. 업로드되지 않은 경우 매개 변수의 값을 picture 지정하지 않습니다. 반면에 FileUpload 컨트롤에 PictureUpload 파일이 업로드된 경우 해당 파일이 JPG 파일인지 확인하려고 합니다. 이 경우 매개 변수를 통해 picture ObjectDataSource에 이진 콘텐츠를 보낼 수 있습니다.

6단계에서 사용된 코드와 마찬가지로 여기에 필요한 대부분의 코드는 DetailsView의 ItemInserting 이벤트 처리기에 이미 있습니다. 따라서 일반적인 기능을 새 메서드 로 리팩터링하고 이 메서드 ValidPictureUpload를 ItemInserting 사용하도록 이벤트 처리기를 업데이트했습니다.

GridView RowUpdating 이벤트 처리기의 시작 부분에 다음 코드를 추가합니다. 잘못된 그림 파일이 업로드된 경우 브로셔를 웹 서버 파일 시스템에 저장하지 않기 때문에 이 코드는 브로셔 파일을 저장하는 코드 앞에 오는 것이 중요합니다.

// Reference the PictureUpload FileUpload
FileUpload PictureUpload = 
    (FileUpload)Categories.Rows[e.RowIndex].FindControl("PictureUpload");
if (PictureUpload.HasFile)
{
    // Make sure the picture upload is valid
    if (ValidPictureUpload(PictureUpload))
    {
        e.NewValues["picture"] = PictureUpload.FileBytes;
    }
    else
    {
        // Invalid file upload, cancel update and exit event handler
        e.Cancel = true;
        return;
    }
}

메서드는 ValidPictureUpload(FileUpload) FileUpload 컨트롤을 유일한 입력 매개 변수로 사용하고 업로드된 파일의 확장자를 확인하여 업로드된 파일이 JPG인지 확인합니다. 그림 파일이 업로드된 경우에만 호출됩니다. 업로드된 파일이 없으면 그림 매개 변수가 설정되지 않으므로 의 기본값 null을 사용합니다. 그림을 업로드하고 ValidPictureUpload 를 반환 true하면 매개 변수에 picture 업로드된 이미지의 이진 데이터가 할당됩니다. 메서드가 를 반환 false하면 업데이트 워크플로가 취소되고 이벤트 처리기가 종료됩니다.

ValidPictureUpload(FileUpload) DetailsView의 ItemInserting 이벤트 처리기에서 리팩터링된 메서드 코드는 다음과 같습니다.

private bool ValidPictureUpload(FileUpload PictureUpload)
{
    // Make sure that a JPG has been uploaded
    if (string.Compare(System.IO.Path.GetExtension(PictureUpload.FileName), 
            ".jpg", true) != 0 &&
        string.Compare(System.IO.Path.GetExtension(PictureUpload.FileName), 
            ".jpeg", true) != 0)
    {
        UploadWarning.Text = 
            "Only JPG documents may be used for a category's picture.";
        UploadWarning.Visible = true;
        return false;
    }
    else
    {
        return true;
    }
}

8단계: 원래 범주 그림을 JPG로 바꾸기

원래 8개의 범주 그림은 OLE 헤더로 래핑된 비트맵 파일입니다. 기존 레코드의 사진을 편집하는 기능을 추가했으므로 잠시 시간을 내어 이러한 비트맵을 JPG로 바꿉 있습니다. 현재 범주 그림을 계속 사용하려면 다음 단계를 수행하여 JPG로 변환할 수 있습니다.

1. 비트맵 이미지를 하드 드라이브에 저장합니다. 브라우저의 UpdatingAndDeleting.aspx 페이지를 방문하여 처음 8개 범주 각각에 대해 이미지를 마우스 오른쪽 단추로 클릭하고 사진을 저장하도록 선택합니다.
2. 선택한 이미지 편집기에서 이미지를 엽니다. 예를 들어 Microsoft 그림판 사용할 수 있습니다.
3. 비트맵을 JPG 이미지로 저장합니다.
4. JPG 파일을 사용하여 편집 인터페이스를 통해 범주의 그림을 업데이트합니다.

범주를 편집하고 JPG 이미지를 업로드한 후에는 페이지가 처음 8개 범주의 그림에서 처음 78바이트를 제거하므로 이미지가 브라우저 DisplayCategoryPicture.aspx 에서 렌더링되지 않습니다. OLE 헤더 제거를 수행하는 코드를 제거하여 이 문제를 해결합니다. 이렇게 DisplayCategoryPicture.aspx``Page_Load 하면 이벤트 처리기에 다음 코드만 있어야 합니다.

protected void Page_Load(object sender, EventArgs e)
{
    int categoryID = Convert.ToInt32(Request.QueryString["CategoryID"]);
    // Get information about the specified category
    CategoriesBLL categoryAPI = new CategoriesBLL();
    Northwind.CategoriesDataTable categories = _
        categoryAPI.GetCategoryWithBinaryDataByCategoryID(categoryID);
    Northwind.CategoriesRow category = categories[0];
    // For new categories, images are JPGs...
    
    // Output HTTP headers providing information about the binary data
    Response.ContentType = "image/jpeg";
    // Output the binary data
    Response.BinaryWrite(category.Picture);
}

요약

이 자습서에서는 이진 데이터 작업을 완료합니다. 이 자습서와 이전 세 가지에서는 이진 데이터를 파일 시스템 또는 데이터베이스 내에 직접 저장할 수 있는 방법을 알아보았습니다. 사용자는 하드 드라이브에서 파일을 선택하고 파일 시스템에 저장하거나 데이터베이스에 삽입할 수 있는 웹 서버에 업로드하여 시스템에 이진 데이터를 제공합니다. ASP.NET 2.0에는 끌어서 놓기 같은 인터페이스를 쉽게 제공할 수 있는 FileUpload 컨트롤이 포함되어 있습니다. 그러나 파일 업로드 자습서에서 설명한 대로 FileUpload 컨트롤은 비교적 작은 파일 업로드에만 적합하며 메가바이트를 초과하지 않는 것이 좋습니다. 또한 업로드된 데이터를 기본 데이터 모델과 연결하는 방법뿐만 아니라 기존 레코드에서 이진 데이터를 편집하고 삭제하는 방법도 살펴보했습니다.

다음 자습서 집합에서는 다양한 캐싱 기술을 살펴봅니다. 캐싱은 비용이 많이 드는 작업의 결과를 가져와 더 빠르게 액세스할 수 있는 위치에 저장하여 애플리케이션의 전반적인 성능을 개선하는 수단을 제공합니다.

행복한 프로그래밍!

저자 정보

7개의 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 창립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 연구해 왔습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 자신을 가르친다 ASP.NET 2.0 24 시간. 그는 에서 찾을 수있는 그의 블로그를 통해 또는 에 mitchell@4GuysFromRolla.comhttp://ScottOnWriting.NET도달 할 수 있습니다.

특별 감사

이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 테레사 머피였습니다. 예정된 MSDN 문서를 검토하시겠습니까? 그렇다면 에 줄을 놓습니다 mitchell@4GuysFromRolla.com.