บทความ

Introducing the ASP.NET 2.0 GridView and DetailsView Controls

เรตติ้ง
เขียนโดย admin เมื่อวันที่ 23 January 2008 ตอน 08:55

ใช้ได้กับ

Microsoft ASP.NET 2.0 Framework

Microsoft Visual Studio 2005

คอนโทรล GridView และ DetailView ของ ASP.NET

สรุป:

แสดงผลและแก้ไขข้อมูลของดาต้าเบสและเรกคอร์ดเพียงชุดเดียวของดาต้าเบส โดยใช้คอนโทรล GridView และ DetailsView คุณสมบัติชนิดดังกล่าวจัดเป็นคอนโทรลชนิดใหม่ใน ASP.NET 2.0 framework

ASP.NET 2.0 framework มีการเพิ่มคอนโทรลใหม่สองชนิดลงไป เพื่อเอาไว้ทำงานกับข้อมูลดาต้าเบสโดยเฉพาะ คอนโทรลทั้งสองชนิดมีชื่อว่า GridView และ DetailsView คุณใช้คอนโทรล GridView เมื่อตอนที่ทำงานกับชุดดาต้าเบสเรกคอร์ด ส่วนคอนโทรล detailsView ใช้เมื่อทำงานกับแต่ละเรกคอร์ด

คอนโทรล GridView เป็นสิ่งที่มาแทนคอนโทรล DataGrid แม้ว่า Microsoft ASP.NET ยังคงมีคอนโทรล DataGrid อยู่ก็ตาม แต่คุณก็ควรใช้คุณสมบัติใหม่ต่างๆของคอนโทรล GridView มากกว่า

คอนโทรล GridView ช่วยให้คุณทำงานหลายอย่างได้เหมือนกับการใช้คอนโทรล DataGrid ซึ่งส่วนใหญ่แล้วปมเด่นของคอนโทรล GridView ก็คือคุณสามารถทำงานต่างๆเหล่านี้ได้โดยไม่ต้องเขียนโค้ดเลย คอนโทรล GridView ช่วยให้คุณ

แสดงผลชุดดาต้าเบสเรกคอร์ด
จัดเรียงชุดดาต้าเบสเรกคอร์ด
จัดเพจชุดดาต้าเบสเรกคอร์ด
แก้ไข ชุดดาต้าเบสเรกคอร์ด

นอกจากนั้นสิ่งที่ต่างจากคอนโทรล DataGrid ก็คือคอนโทรล GridView ช่วยให้คุณจัดเรียงและจัดเพจดาต้าเบสเรกคอร์ดได้โดยที่ไม่จำเป็นต้องแจ้งกลับไปยังเซิร์ฟเวอร์แต่อย่างใด นอกจากนั้นคอนโทรล GridView ยังใช้สคริปท์ฝั่งไคล์เอ็นต์ เพื่อช่วยให้คุณจัดเรียงและจัดเพจดาต้าเบสเรกคอร์ดได้โดยที่ไม่จำเป็นต้องทำ form post แต่อย่างใด

คอนโทรล DetailsView จัดเป็นคอนโทรลใหม่ที่เพิ่งมีอยู่ใน ASP.NET 2.0 ซึ่งช่วยให้คุณทำงานกับดาต้าเบสเรกคอร์ดแต่ละเรกคอร์ดได้ คุณสามารถใช้คอนโทรล DetailsView เพื่อแสดงหรือแก้ไขดาต้าเบสเรกคอร์ดแต่ละเรกคอร์ดได้ ถ้าหากนำไปใช้ร่วมกับคอนโทรล GridView คุณยังสามารถใช้คอนโทรล DetailsView เพื่อสร้างฟอร์ม master/detail ขึ้นมาได้อีกด้วย

การใช้คอนโทรล GridView

ข้อความในตัวอย่างที่ 1 แสดงวิธีการง่ายๆในการใช้คอนโทรล GridView โดยในเพจแสดงเรกคอร์ดจากตาราง Titles ของดาต้าเบส Pubs

ตัวอย่างที่ 1 การแสดงดาต้าเบสเรกคอร์ดโดยใช้คอนโทรล GridView

<html>
<head runat="server">
    <title>Display GridView</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView
        DataSourceID="TitlesSource"
        Runat="Server" />
    <asp:SqlDataSource
        ID="TitlesSource"
        ConnectionString=
          "Server=localhost;Database=pubs;Trusted_Connection=true"
        SelectCommand="SELECT * FROM Titles"
        Runat="Server" />
    </form>
</body>
</html>

ภาพที่ 1 แสดงเอาท์พุดของคอนโทรล GridView จากตัวอย่างที่ 1 ถ้าหากคุณลองสังเกตให้ดี คุณจะพบว่าตัวอย่างที่ 1 ไม่ได้มีโค้ดใดๆ แต่ GridView จะใช้ปมเด่นของคอนโทรล DataSource เพื่อดึงเรกคอร์ดขึ้นมาแสดงผล คอนโทรล GridView เกี่ยวข้องกับคอนโทรล DataSource ผ่านทาง DataSourceID property

ASP.NET 2.0 framework มีคอนโทรล DataSource หลายชนิดที่ถูกออกแบบมาเพื่อทำงานร่วมกับแหล่งข้อมูลประเภทต่างๆ ข้อความในตัวอย่างที่ 1 ใส่คอนโทรล SqlDataSource เอาไว้ โดยที่คอนโทรล SqlDataSource เอาไว้แสดงเรกคอร์ดใดๆจากดาต้าเบส SQL ใดๆ อาทิเช่นดาต้าเบส Microsoft SQL Server และ Oracle เป็นต้น นอกจากนั้น ASP.NET 2.0 framework ยังมีคอนโทรลที่ชื่อ AccessDataSource ซึ่งเอาไว้ใช้แสดงเรกคอร์ดจากตารางดาต้าเบสของ Microsoft Access อีกด้วย

โดยปกติแล้ว คอนโทรล&n GridView จะสร้างคอลัมน์ทั้งหมดที่ใช้แสดงผลขึ้นมาเองโดยอัตโนมัติ โดยมันจะสร้างคอลัมน์แต่ละคอลัมน์ให้แก่แต่ละดาต้าเบสจากแหล่งข้อมูลโดยอัตโนมัติ ถ้าหากคุณต้องการควบคุมการแสดงผลของ GridView ให้มากขึ้น คุณสามารถกำหนด AutoGenerateColumns property ให้มีค่าเป็น false แล้วแสดงเฉพาะฟิลด์ที่คุณต้องการเท่านั้นก็ได้

GridView สามารถใช้กับฟิลด์ต่างๆเหล่านี้ได้

BoundField: แสดงค่าของฟิลด์เป็นสตริงข้อความ
ButtonField: แสดงปุ่มที่ผู้ใช้กำหนดขึ้นมาเอง
CheckboxField: แสดงช่องระบุเครื่องหมายเมื่อค่าของฟิลด์เป็นค่าบูลีน
CommandField: สร้างปุ่มคำสั่งโดยอัตโนมัติ อาทิเช่นปุ่ม Edit, Update หรือ Cancel
HyperLinkField: แสดงค่าของฟิลด์เป็นไฮเปอร์ลิงก์
ImageField: แสดงภาพโดยอัตโนมัติเมื่อค่าของฟิลด์หมายถึงภาพ
TemplateField: ช่วให้ผู้ใช้ปรับแต่งหน้าตาของคอลัมน์โดยใช้เทมเพล็ต

ตัวอย่างเช่น GridView ในตัวอย่างที่ 2 ใช้ BoundField และ ImageField เพื่อแสดงนามสกุลและภาพถ่ายของพนักงานแต่ละคนจากตาราง Employees (อยู่ในดาต้าเบส Northwind)

ตัวอย่างที่ 2 การแสดงฟิลด์ต่างๆโดยใช้ GridView

<html>
<head runat="server">
    <title>Display Explicit Fields</title>
</head>
<body>
    <form runat="server">
    <asp:GridView
        DataSourceID="ProductsSource"
        AutoGenerateColumns="false"
        Runat="Server">
        <Columns>
            <asp:BoundField
                DataField="LastName"
                NullDisplayText="no value" />
            <asp:ImageField
                DataField="Photo"
                AlternateTextField="LastName"
                AlternateTextFormatString="Photo of {0}" />
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource
        ID="ProductsSource"
        ConnectionString=
          "Server=localhost;Database=Northwind;Trusted_Connection=true"
        SelectCommand="SELECT * FROM Employees"
        Runat="Server" />
    </form>
</body>
</html>

ภาพที่ 2 แสดงเอาท์พุดจากเพจในตัวอย่างที่ 2 ถ้าลองสังเกตจะพบว่ามีการกำหนดให้ BoundField ใช้ค่าของ NullDisplayText property คุณสามารถใช้ NullDisplayText เพื่อกำหนดให้มีการแสดงข้อความเมื่อคอลัมน์มีค่าเป็น null

ภาพที่ 2 GridView แสดง NullDisplayText

นอกจากนั้นสิ่งที่น่าสังเกตอีกอย่างหนึ่งก็คือ ImageField ถูกกำหนดให้มีค่าเป็นทั้ง AlternateTextField และ AlternateTextFormatString properties ได้ โดยที่ property เหล่านี้ ช่วยให้คนพิการทางสายตาสามารถใช้ข้อมูลในเพจของคุณได้ง่ายขึ้น

การจัดเรียงและการจัดเพจเรกคอร์ดโดยใช้คอนโทรล GridView

การจัดเรียงและการจัดเพจเรกคอร์ดโดยใช้คอนโทรล GridView ทำได้ง่ายดายอย่างมาก เมื่อ AllowSorting property ของคอนโทรล GridView มีค่าเป็น true คุณสามารถจัดเรียงคอลัมน์ใน GridView โดยการคลิกที่คอลัมน์หัวเรื่องได้ ถ้าหาก AllowPaging property มีค่าเป็น true คุณสามารถจัดเพจโดยใช้ชุดของเรกคอร์ดใน GridView ได้

ตัวอย่างที่ 3 แสดงวิธีการใช้ AllowSorting และ AllowPaging โดยใช้ GridView (ดูภาพที่ 3)

ตัวอย่างที่ 3 การจัดเรียงและการจัดเพจโดยใช้ GridView

<html>
<head runat="server">
    <title>Sorting and Paging a GridView</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <asp:GridView 
        DataSourceID="TitlesSource"
        AllowSorting="true"
        AllowPaging="true"
        Runat="Server" />
    
    <asp:SqlDataSource 
        ID="TitlesSource"
        ConnectionString=
          "Server=localhost;Database=pubs;Trusted_Connection=true"
        SelectCommand="SELECT * FROM Titles"
        Runat="Server" /> 
    </form>
</body>
</html>

ภาพที่ 3 GridView ที่เปิดการทำงานของ Sorting และ Paging เอาไว้

คอนโทรล GridView รองรับการจัดเรียงจากมากไปหาน้อยและจากน้อยไปหามากได้ หรือพูดอีกแง่หนึ่งก็คือ เมื่อคุณคลิกที่ชื่อคอลัมน์ของ GridView หลายๆครั้ง การเรียงลำดับในคอลัมน์จะสลับกลับไปกลับมาระหว่างมากไปหาน้อยหรือน้อยไปหามาก

โดยปกติแล้ว AllowPaging มีค่าเป็น true คุณสามารถย้ายไปมาระหว่างเพจของเรกคอร์ดต่างๆ โดยการคลิกที่หมายเลขเพจ คุณยังสามารถแก้ไขยูซเซอร์อินเทอร์เฟซของการจัดเพจได้ โดยการแก้ไข PagerSettings และ PagerStyles properties ได้ คอนโทรล GridView ใช้กับอินเทอร์เฟซต่างๆเหล่านี้ได้

NextPrevious: แสดงลิงก์ต่อไปและก่อนหน้านี้
NextPreviousFirstLast: แสดงลิงก์ต่อไปและก่อนหน้านี้ รวมทั้งลิงก์ไปยังเพจแรกสุดและท้ายสุดอีกด้วย
Numeric: แสดงลิงก์หมายเลขเพจ
NumericFirstLast: แสดงลิงก์หมายเลขเพจ รวมทั้งลิงก์ไปยังเพจแรกสุดและเพจท้ายสุด

ตัวอย่างเช่นการกำหนด GridView ต่อไปนี้จะแสดงลิงก์แรกสุด ก่อนหน้า ต่อไป และท้ายสุด นอกจากนั้นเรายังอาจแสดงลิงก์เป็นรูปภาพได้ด้วย (ดูภาพที่ 4)

    <asp:GridView
        DataSourceID="TitlesSource"
        AllowPaging="true"
        PageSize="4"
        Runat="Server">
        <PagerSettings
            Mode="NextPreviousFirstLast"
            FirstPageImageUrl="First.gif"
            PreviousPageImageUrl="Prev.gif"
            NextPageImageUrl="Next.gif"
            LastPageImageUrl="Last.gif" />
    </asp:GridView>

ภาพที่ 4 การจัดเพจโดยใช้ภาพต่างๆ

การจัดเรียงและการจัดเพจในฝั่งไคล์เอ็นต์

คอนโทรล GridView ช่วยให้คุณสามารถจัดเรียงและจัดเพจเรกคอร์ดได้โดยที่ไม่ต้องแจ้งการเปลี่ยนแปลงของฟอร์มกลับไปยังเว็บเซิร์ฟเวอร์ หรือพูดอีกแง่หนึ่งก็คือคุณสามารถเปลี่ยนการแสดงผลข้อมูลของ GridView เมื่อตอนที่ทำการจัดเรียงและจัดเพจได้ โดยที่ไม่จำเป็นสร้างรายละเอียดของทั้งเพจขึ้นมาใหม่

คุณสามารถจัดเรียงและจัดเพจข้อมูลในฝั่งไคล์เอ็นต์โดยการกำหนดค่า true ให้แก่ EnableSortingAndPagingCallback property ถ้าหาก property ตัวนี้มีค่าเป็น true แล้ว GridView จะใช้จาวาสคริปท์เพื่อเรียกชุดเรกคอร์ดที่อัพเดตแล้วมาจากเว็บเซิร์ฟเวอร์เอง

ข้อความในตัวอย่างที่ 4 แสดงวิธีการใช้ EnableSortingAndPagingCallback property

ตัวอย่างที่ 4 การใช้ Callbacks เมื่อทำการจัดเรียงและจัดเพจข้อมูล

<html>
<head runat="server">
    <title>Callback GridView</title>
</head>
<body>
    <form runat="server">
    <%=DateTime.Now %>
    <asp:GridView
        DataSourceID="TitlesSource"
        EnableSortingAndPagingCallbacks="true"
        AllowPaging="true"
        AllowSorting="true"
        Runat="Server" />
    <asp:SqlDataSource
        ID="TitlesSource"
        ConnectionString=
          "Server=localhost;Database=pubs;Trusted_Connection=true"
        SelectCommand="SELECT * FROM Titles"
        Runat="Server" />
    </form>
</body>
</html>

เพจของตัวอย่างที่ 4 แสดงวันที่และเวลาปัจจุบัน และข้อมูลจากตารางดาต้าเบส Titles อีกด้วย เมื่อคุณจัดเรียงและจัดเพจเรกคอร์ดใน GridView เวลาที่แสดงในเพจจะไม่มีการเปลี่ยนแปลง เนื่องจากไม่ได้มีการโหลดเพจขึ้นมาใหม่

การทำงานหลังฉากที่ชื่อ GridView ใช้ออปเจ็กต์ XMLHTTPRequest ของ Microsoft Internet Explorer เพื่อสื่อสารกับเว็บเซิร์ฟเวอร์ ออปเจ็กต์นี้มีอยู่ใน Internet Explorer เวอร์ชัน 5.0 ขึ้นไป

การแก้ไขเรกคอร์ดโดยใช้คอนโทรล GridView

คุณสามารถปล่อยให้ผู้ใช้แก้ไขข้อมูลที่แสดงอยู่ใน GridView ได้ โดยการกำหนด prpoerty ตัวหนึ่งขึ้นมาชื่อ AutoGenerateEditButton ถ้าหากเรากำหนดให้ UpdateCommand property ของ SqlDataSource control (ที่เกี่ยวข้องกับ GridView) เป็นคำสั่ง SQL UPDATE ที่ถูกต้อง ระบบจะทำการอัพเดตดาต้าเบสโดยอัตโนมัติ

ตัวอย่างเช่น เพจในตัวอย่างที่ 5 ยอมให้คุณอัพเดตข้อมูลของตารางดาต้าเบส Products ได้ (ดูภาพที่ 5)

ตัวอย่างที่ 5 การแก้ไขโดยใช้ GridView

<html>
<head runat="server">
    <title>Edit GridView</title>
</head>
<body>
    <form id="Form1" runat="server">
    <asp:GridView
        DataSourceID="ProductsSource"
        AutoGenerateEditButton="true"
        DataKeyNames="ProductID"
        Runat="Server" />
    <asp:SqlDataSource
        ID="ProductsSource"
        ConnectionString=
          "Server=localhost;Database=Northwind;Trusted_Connection=true"
        SelectCommand=
          "SELECT ProductID,ProductName,Discontinued FROM Products"
        UpdateCommand="Update Products
            SET ProductName=@ProductName,Discontinued=@Discontinued
            WHERE ProductID=@ProductID"
            Runat="Server" />
    </form>
</body>
</html>

ภาพที่ 5 การแก้ไขข้อมูลใน GridView

ส่วนใหญ่แล้ว GridView สามารถแยกแยะประเภทข้อมูลที่เหมาะสมสำหรับข้อมูลในคอลัมน์ที่คุณกำลังอัพเดตอยู่ได้ ซึ่งในกรณีของเพจตามตัวอย่างที่ 5 ค่าที่ได้รับจากกรอบข้อความ ProductID จะแปลงเป็นเลขจำนวนเต็มโดยอัตโนมัติ และค่าของช่องกาเครื่องหมาย Discontinued จะแปลงไปเป็น BIT ก่อนที่จะมีการประมวลผลคำสั่ง UPDATE (คุณสามารถตรวจสอบเรื่องนี้โดยการสั่งงานเครื่องมือ SQL Profiler ในขณะที่ประมวลผลเพจก็ได้)

อย่างไรก็ตาม มีข้อมูลบางประเภทที่ GridView ไม่สามารถแปลงประเภทโดยอัตโนมัติได้ อาทิเช่นคอลัมน์ Decimal เป็นต้น ถ้าหากคุณต้องการใช้คอลัมน์ Decimal คุณจำเป็นต้องกำหนดประเภทของข้อมูลในคอลัมน์อย่างชัดเจนเอาไว้ใน SqlDataSource โดยที่วิธีการจะแสดงเอาไว้ในตัวอย่างที่ 6

ตัวอย่างที่ 6 การอัพเดตข้อมูลในคอลัมน์ Decimal

<html>
<head runat="server">
    <title>Edit GridView with Decimal</title>
</head>
<body>
    <form id="Form1" runat="server">
    <asp:GridView
        DataSourceID="ProductsSource"
        AutoGenerateEditButton="true"
        DataKeyNames="ProductID"
        Runat="Server" />
    <asp:SqlDataSource
        ID="ProductsSource"
        ConnectionString=
          "Server=localhost;Database=Northwind;Trusted_Connection=true"
        SelectCommand=
        "SELECT ProductID,ProductName,UnitPrice,Discontinued
         FROM Products"
        UpdateCommand=
          "Update Products
            SET ProductName=@ProductName, UnitPrice=@UnitPrice,
            Discontinued=@Discontinued
            WHERE ProductID=@ProductID"
            Runat="Server" >
            <UpdateParameters>
            <asp:Parameter Name="UnitPrice" Type="Decimal" />
            </UpdateParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

ถ้าหากลองสังเกตเราจะพบว่าคอนโทรล SqlDataSource ในตัวอย่างที่ 6 มีป้าย <UpdateParameters> ที่แจกแจงประเภทข้อมูลของคอลัมน์ UnitPrice เอาไว้ ถ้าหากคุณไม่ได้ใส่ป้ายนี้เอาไว้ เพจจะสั่งให้ SqlException แจ้งข้อความว่า "ไม่ยอมให้มีการแปลงประเภทข้อมูลจาก nvarchar ไปเป็น money"

ปัญหาอย่างหนึ่งของตัวอย่างทั้งสองแบบที่เกี่ยวกับการแก้ไขข้อมูลโดยใช้ GridView ก็คือตัวอย่างทั้งสองแบบไม่มีโค้ดสำหรับการจัดการกับความผิดพลาดเอาไว้ด้วย ถ้าหากมีอะไรผิดพลาดเกิดขึ้นตอนประมวลผลคำสั่ง SQL UPDATE เพจจะไม่สามารถแสดงผลอย่างถูกต้องได้

คุณสามารถเพิ่มระบบจัดการกับความผิดพลาดโดยการสร้าง event handler สำหรับเหตุการณ์ RowUpdatesd ของคอนโทรล GridView ได้ เพจในตัวอย่างที่ 7 แสดงวิธีการจัดการกับ SqlException อย่างเหมาะสม

ตัวอย่างที่ 7 การแก้ไขข้อมูลโดยใช้ระบบจัดการกับความผิดพลาด

VB.NET

<%@ Page Language="vb" %>
<script runat="server">
    Sub GridViewUpdated(ByVal s As Object, ByVal e As GridViewUpdatedEventArgs)
        If Not e.Exception Is Nothing Then
            lblError.Text = "Could not update row"
            e.ExceptionHandled = True
        End If
    End Sub
</script>
<html>
<head runat="server">
    <title>Edit GridView with Errors</title>
</head>
<body>
    <form runat="server">
    <asp:Label 
        ID="lblError" 
        ForeColor="Red"
        EnableViewState="false" 
        Runat="Server" />
    <asp:GridView  
        DataSourceID="ProductsSource"
        OnRowUpdated="GridViewUpdated"
        AutoGenerateEditButton="true"
        DataKeyNames="ProductID"
        Runat="Server" />
    
    <asp:SqlDataSource 
        ID="ProductsSource"
        ConnectionString=
          "Server=localhost;Database=Northwind;Trusted_Connection=true"
        SelectCommand=
          "SELECT ProductID,ProductName,Discontinued FROM Products"
        UpdateCommand="Update Products 
            SET ProductName=@ProductName,Discontinued=@Discontinued 
            WHERE ProductID=@ProductID"
            Runat="Server" />
    </form>
</body>
</html>

<%@ Page Language="c#" %>
<script runat="server">
    void GridViewUpdated(Object s, GridViewUpdatedEventArgs e)
    {
        if (e.Exception != null)
        {
            lblError.Text = "Could not update row";
            e.ExceptionHandled = true;
        }
    }
</script>
<html>
<head runat="server">
    <title>Edit GridView with Errors</title>
</head>
<body>
    <form runat="server">
    <asp:Label 
        ID="lblError" 
        ForeColor="Red"
        EnableViewState="false" 
        Runat="Server" />
    <asp:GridView 
        DataSourceID="ProductsSource"
        OnRowUpdated="GridViewUpdated"
        AutoGenerateEditButton="true"
        DataKeyNames="ProductID"
        Runat="Server" />
    
    <asp:SqlDataSource 
        ID="ProductsSource"
        ConnectionString=
          "Server=localhost;Database=Northwind;Trusted_Connection=true"
        SelectCommand=
          "SELECT ProductID,ProductName,Discontinued FROM Products"
        UpdateCommand="Update Products 
            SET ProductName=@ProductName,Discontinued=@Discontinued 
            WHERE ProductID=@ProductID"
            Runat="Server" />
    </form>
</body>
</html>

GridViewUpdated method จะประมวลผลทุกครั้งที่แถวใดแถวหนึ่งของ GridView ทำการอัพเดตเสร็จแล้ว พารามิเตอร์ชุดที่สองที่ส่งไปให้ method นี้ (GridViewUpdateEventArgs) มี properties สองชนิดที่มีประโยชน์สำหรับการจัดการกับความผิดพลาด คุณสามารถใช้ Exception property เพื่อรับมือกับข้อยกเว้นใดๆที่เกิดขึ้นตอนประมวลผลคำสั่ง SQL UPDATE นอกจากนั้น ExceptionHandled property ยังยอมให้คุณระบุว่าต้องการจัดการกับความผิดพลาดด้วยหรือไม่ ถ้าหากคุณไม่ได้กำหนดให้ property นี้เป็น true เงื่อนไขของข้อยกเว้นก็จะถูกส่งกลับมาอยู่ตลอด

การใช้คอนโทรล DetailsView

คอนโทรล DetailsView ช่วยให้คุณทำงานกับเรกคอร์ดแต่ละเรกคอร์ดของดาต้าเบสได้ คุณสามารถใช้คอนโทรลตัวนี้เพื่อแสดงเรกคอร์เพียงเรกคอร์ดเดียวได้ นอกจากนั้นคุณยังสามารถใช้คอนโทรลเพื่อแก้ไข ลบ และเพิ่มเรกคอร์ดใหม่ลงไปได้ด้วย ท้ายสุดเมื่อใช้ร่วมกับคอนโทรลอื่นๆ อาทิเช่นคอนโทรล GridView หรือ DropDownList คุณสามารถใช้คอนโทรล DetailsView เพื่อสร้างฟอร์ม Master/Detail ขึ้นมาอย่างรวดเร็วได้ด้วย

การแสดงผลเรกคอร์ดของดาต้าเบสโดยใช้คอนโทรล detailsView

เรื่องที่ง่ายที่สุดที่คุณสามารถทำกับคอนโทรล DetailsView ก็คือการแสดงเรกคอร์ดเพียงเรกคอร์ดเดียวของดาต้าเบส โดยที่คอนโทรล DetailsView สามารถแสดงชื่อและค่าของทุกคอลัมน์ที่เลือกเอาไว้ได้ ตัวอย่างที่ 8 แสดงวิธีการใช้คอนโทรล DetailsView เพื่อแสดงเรกคอร์ดเดียวจากคอลัมน์ดาต้าเบส Authors

ตัวอย่างที่ 8 การแสดงข้อมูลของนักเขียนเพียงคนเดียว

<html>
<head runat="server">
    <title>Details View</title>
</head>
<body>
    <form runat="server">
    <asp:DetailsView
        DataSourceID="AuthorsSource"
        Runat="Server" />
        
    <asp:SqlDataSource
        ID="AuthorsSource"
        ConnectionString=
          "Server=localhost;Database=Pubs;Trusted_Connection=true"
        SelectCommand=
          "SELECT * FROM Authors WHERE au_id='172-32-1176'"
        Runat="Server" />
    </form>
</body>
</html>

ในตัวอย่างที่ 8 คอนโทรล DetailView จะเกี่ยวข้องกับคอนโทรล SqlDataSource ที่เลือกนักเขียนที่มีหมายเลขประจำตัว 172-32-1176 ขึ้นมา แล้วตามด้วยการแสดงเพจตามภาพที่ 6

ภาพที่ 6 คอนโทรล DetailsView

สิ่งที่น่าสังเกตก็คือป้ายชื่อที่คอนโทรล DetailsView สร้างขึ้นมาโดยอัตโนมัติจะตรงกับชื่อคอลัมน์ของดาต้าเบส แต่การที่ตารางดาต้าเบส Authors ใช้ชื่อฟิลด์อย่าง au_lname และ au_fname ดังนั้นป้ายชื่อเหล่านี้อาจดูแปลกๆไปอยู่บ้าง

ถ้าหากคุณต้องการควบคุมหน้าตาของคอนโทรล DetailsView ให้มากยิ่งขึ้น คุณสามารถระบุชื่อฟิลด์ที่คุณอยากให้คอนโทรลแสดงเองได้ โดยคุณต้องกำหนดให้การแสดงผลฟิลด์ของ AutoGenerateRows property ในคอนโทรลตัวนี้เป็น false จากนั้นก็เพิ่ม <Fields> tag ลงไปเอง

คอนโทรล DetailsView รองรับการใช้ประเภทของฟิลด์ทุกอย่างเหมือนกับคอนโทรล GridView โดยที่เพจตามตัวอย่างที่ 9 แสดงวิธีการกำหนดฟิลด์และใส่ชื่อฟิลด์ของ

ตัวอย่างที่ 9 การเขียนชื่อฟิลด์ลงไปเอง

<html>
<head runat="server">
    <title>Details View</title>
</head>
<body>
    <form id="Form1" runat="server">
    <asp:DetailsView ID="DetailsView1"
        DataSourceID="AuthorsSource"
        AutoGenerateRows="false"
        Runat="Server">
        <Fields>
        <asp:BoundField 
            DataField="au_id" 
            HeaderText="SS#:" 
            ReadOnly="true" />
        <asp:BoundField 
            DataField="au_lname" 
            HeaderText="Last Name:" />
        <asp:BoundField 
            DataField="au_fname" 
            HeaderText="Last Name:" />
        </Fields>
    </asp:DetailsView>
        
    <asp:SqlDataSource
        ID="AuthorsSource"
        ConnectionString=
          "Server=localhost;Database=Pubs;Trusted_Connection=true"
        SelectCommand="SELECT * FROM Authors WHERE au_id='172-32-1176'"
        Runat="Server" />
    </form>
</body>
</html>

เท่าที่ผ่านมาคุณทราบวิธีการใช้คอนโทรล DetailsView เพื่อแสดงเรกคอร์ดเพียงเรกคอร์ดเดียวไปแล้ว นอกจากนั้นคุณยังสามารถใช้ DetailsView เพื่อค้นหาข้อมูลหลายๆเรกคอร์ดได้ด้วย เมื่อคุณกำหนดให้ AllowPaging มีค่าเป็น true จากนั้นคอนโทรล DetailsView ยังสร้างยูซเซอร์อินเทอร์เฟซขึ้นมาโดยอัตโนมัติเพื่อใช้ข้ามไปมาระหว่างเรกคอร์ดต่างๆอีกด้วย ตัวอย่างที่ 10 แสดงวิธีการใช้ property ชนิดนี้

ตัวอย่างที่ 10 การค้นหาเรกคอร์ดโดยใช้คอนโทรล DetailsView

<html>
<head runat="server">
    <title>Details View</title>
</head>
<body>
    <form runat="server">
    <asp:DetailsView ID="DetailsView1"
        DataSourceID="AuthorsSource"
        AllowPaging="true"
        AutoGenerateRows="false"
        Runat="Server">
        <Fields>
        <asp:BoundField 
            DataField="au_id" 
            HeaderText="SS#:" 
            ReadOnly="true" />
        <asp:BoundField 
            DataField="au_lname" 
            HeaderText="Last Name:" />
        <asp:BoundField 
            DataField="au_fname" 
            HeaderText="Last Name:" />
        </Fields>
    </asp:DetailsView>
        
    <asp:SqlDataSource
        ID="AuthorsSource"
        ConnectionString=
          "Server=localhost;Database=Pubs;Trusted_Connection=true"
        SelectCommand="SELECT * FROM Authors"
        Runat="Server" />
    </form>
</body>
</html>

โดยปกติแล้วคอนโทรล DetailsView สร้างหมายเลขเพจขึ้นมาสำหรับการค้นหาไปตามเรกคอร์ดต่างๆ (ดูภาพที่ 7) คุณสามารถใช้ property เดียวกันนี้เหมือนคอนโทรล GridView เพื่อกำหนดยูซเซอร์อินเทอร์เฟซภายในเพจ โดยที่ properties ที่ว่าก็คือ PagerSettings และ PagerStyle

ภาพที่ 7 การจัดเพจโดยใช้คอนโทรล DetailsView

การแก้ไขเรกคอร์ดของดาต้าเบสโดยใช้คอนโทรล DetailsView

คุณสามารถแก้ไข ลบ และเพิ่มเรกคอร์ดของดาต้าเบสโดยใช้คอนโทรล DetailsView แถมที่ดียิ่งกว่าก็คือคุณสามารถทำทั้งหมดนี้ได้โดยที่ไม่ต้องเขียนโค้ดเลย

เราสามารถใช้ properties ที่ชื่อ AutoGenerateEditButton, AutoGenerateDeleteButton และ AutoGenerateInsertButton เพื่อสร้างยูซเซอร์อินเทอร์เฟซสำหรับแก้ไขเรกคอร์ดขึ้นมาได้ โดยเมื่อคุณใช้คอนโทรล DetailsView ทำการแก้ไขเรกคอร์ด คุณจำเป็นต้องเพิ่ม UpdateCommand, InsertCommand และ DeleteCommand สำหรับคอนโทรล DataSources ที่เกี่ยวข้องกับ DetailsView ลงไปด้วย

เพจที่ตัวอย่าง 11 สร้างขึ้นมาใช้คอนโทรล DetailsView เพื่อแก้ไขตารางดาต้าเบส Authors ได้ (ดูภาพที่ 8)

ตัวอย่างที่ 11 การแก้ไขเรกคอร์ดโดยใช้คอนโทรล DetailsView

<html>
<head runat="server">
    <title>Details View</title>
</head>
<body>
    <form runat="server">
    <asp:DetailsView
        DataSourceID="AuthorsSource"
        AllowPaging="true"
        AutoGenerateEditButton="true"
        AutoGenerateDeleteButton="true"
        AutoGenerateInsertButton="true"
        DataKeyNames="au_id"
        Runat="Server" />
    <asp:SqlDataSource
        ID="AuthorsSource"
        ConnectionString=
          "Server=localhost;Database=Pubs;Trusted_Connection=true"
        SelectCommand=
          "SELECT au_id,au_lname,au_fname,contract FROM Authors"
        UpdateCommand=
          "UPDATE Authors SET
             au_lname=@au_lname, au_fname=@au_fname, contract=@contract
            WHERE au_id=@au_id"
        DeleteCommand="DELETE Authors WHERE au_id=@au_id"
        InsertCommand=
          "INSERT Authors (au_id,au_lname,au_fname,contract)
            VALUES (@au_id,@au_lname,@au_fname,@contract)"
        Runat="Server" />
    </form>
</body>

ภาพที่ 8 การแก้ไขเรกคอร์ดโดยใช้คอนโทรล DetailsView

การสร้างฟอร์ม Master/Detail สำหรับคอนโทรล DetailsView

ในหัวข้อสุดท้ายนี้ เราจะสร้างฟอร์ม Master/Detail โดยอาศัยความช่วยเหลือจากคอนโทรล DetailsView และ GridView เราจะใช้คอนโทรล GridView เพื่อแสดงรายชื่อของพนักงาน จากนั้นเมื่อคุณคลิกไปที่ชื่อของพนักงาน คอนโทรล DetailsView จะแสดงภาพถ่าย นามสกุล และชื่อของพนักงานขึ้นมา (ดูภาพที่ 9)

ภาพที่ 9 ฟอร์ม Master/Detail ที่สร้างโดยใช้คอนโทรล GridView และ DetailsView

เพจที่สร้างจากตัวอย่าง 12 มีโค้ดสำหรับสร้างฟอร์ม Master/Detail ขึ้นมา

ตัวอย่าง 12 การสร้างฟอร์ม Master/Detail

<html>
<head runat="server">
    <title>Master/Detail Page</title>
</head>
<body>
    <form runat="server">
    <table cellpadding="10">
    <tr>
    <td valign="top">
    <asp:GridView
        ID="MasterGridView"
        DataSourceID="MasterSource"
        AutoGenerateColumns="false"
        DataKeyNames="EmployeeID"
        CellPadding="5"
        SelectedRowStyle-BackColor="#eeeeee"
        Runat="Server">
        <Columns>
        <asp:TemplateField HeaderText="Employee">
            <ItemTemplate>
            <asp:LinkButton CommandName="Select" Runat="Server">
              <%# Eval("LastName") %>, <%# Eval("FirstName") %>
            </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </td>
    <td valign="top">
    <asp:DetailsView
        DataSourceID="DetailsSource"
        AutoGenerateRows="false"
        CellPadding="5"
        FieldHeaderStyle-Font-Bold="true"
        FieldHeaderStyle-HorizontalAlign="Right"
        Runat="Server">
        <Fields>
            <asp:ImageField DataField="Photo" HeaderText="Photo:" />
            <asp:BoundField DataField="LastName"
              HeaderText="Last Name:" />
            <asp:BoundField DataField="FirstName"
              HeaderText="First Name:" />
            <asp:BoundField DataField="Extension"
             HeaderText="Extension:" />
        </Fields>
    </asp:DetailsView>
    </td>
    </tr>
    </table>
    <asp:SqlDataSource
        ID="MasterSource"
        EnableCaching="true"
        CacheDuration="600"
        ConnectionString=
          "Server=localhost;database=Northwind;Trusted_Connection=true"
        SelectCommand="SELECT * FROM Employees"
        Runat="Server" />
    <asp:SqlDataSource
        ID="DetailsSource"
        EnableCaching="true"
        CacheDuration="600"
        ConnectionString=
          "Server=localhost;database=Northwind;Trusted_Connection=true"
        SelectCommand="SELECT * FROM Employees"
        FilterExpression="EmployeeID=@EmployeeID"
        Runat="Server">
        <FilterParameters>
        <asp:ControlParameter
            Name="EmployeeID"
            ControlID="MasterGridView"
            PropertyName="SelectedValue" />
        </FilterParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

คอนโทรล GridView ในตัวอย่าง 12 มีแต่ TemplateField เพียงชุดเดียวเท่านั้น โดยที่ TemplateField แสดงชื่อและนามสกุลของพนักงานโดยใช้คอนโทรล LinkButton ถ้าหากลองสังเกตจะพบว่า CommandName property ของคอนโทรล LinkButton กำหนดค่าเป็น Select เมื่อคุณคลิกที่ LinkButton แถวที่ถูกเลือกเอาไว้จะถูกฟอร์แมทโดยใช้ค่าของ SelectedRowStyle property

คอนโทรล DetailsView แสดงข้อมูลของพนักงานที่เลือกเอาไว้ใน GridView ระบบจะเลือกพนักงานที่ถูกต้องโดยใช้ FilterParameter ซึ่งกำหนดเอาไว้ใน SqlDataSource ที่เกี่ยวข้องกับคอนโทล DetailsView

สิ่งที่น่าสังเกตก็คือเพจของตัวอย่าง 12 มีคอนโทรล SqlDataSource อีกชุดหนึ่งเกี่ยวข้องกับคอนโทรล DetailsView ซึ่งคอนโทรล SqlDataSource ทั้งสองชุดใช้คำสั่ง SELECT อันเดียวกัน ที่กำหนดเอาไว้สำหรับ SelectCommand property

นอกจากนั้นคอนโทรล SqldataSource ทั้งสองชุดยังกำหนดให้ทำแคชข้อมูลเอาไว้ 10 นาทีด้วย เนื่องจากคอนโทรล SqlDataSource ทั้งสองชุดใช้ค่าเดียวกันสำหรับ SelectCommand propeerties ส่วนข้อมูลจะถูกดึงมาจากดาต้าเบสเพียงครั้งเดียว เพื่อใช้กับคอนโทรลทั้งสองตัว/span>

สรุป

คอนโทรล DataGrid จัดเป็นคอนโทรลที่มีประสิทธิภาพมากที่สุดใน ASP.NET 1.x framework จากนั้นเมื่อเปลี่ยนมาเป็น ASP.NET 2.0 framework แล้ว คอนโทรล DataGrid ก็ถูกเปลี่ยนให้เป็นคอนโทรลใหม่สองชนิดซึ่งใช้ง่ายกว่าและมีฟังก์ชันมากกว่า

คอนโทรล GridView ช่วยให้คุณแสดงผล จัดเรียง จัดเพจ และแก้ไขข้อมูลในดาต้าเบสอัตโนมัติโดยที่ไม่ต้องเขียนโค้ดเลย นอกจากนั้นคอนโทรลนี้ยังช่วยให้คุณจัดเรียงและจัดเพจเรกคอร์ดต่างๆในดาต้าเบสนี้ได้โดยที่ไม่ต้องโหลดเพจที่เก็บคอนโทรลเอาไว้ขึ้นมาใหม่อีกด้วย

คอนโทรล DetailsView ชนิดใหม่ช่วยให้คุณแสดงผลและแก้ไขเรกคอร์ดดาต้าเบสเพียงเรกคอร์ดเดียวได้ และเมื่อนำมาใช้กับคอนโทรล GridView แล้ว คอนโทรล DetailsView จะช่วยให้คุณสร้างฟอร์ม Master/Detail ที่สวยงามขึ้นมาอย่างรวดเร็วได้

หนังสือที่เกี่ยวข้อง

ASP.NET Unleashed
A First Look at ASP.NET V. 2.0
Building Web Solutions with ASP.NET and ADO.NET
ASP.NET 2.0 Revealed
Microsoft ASP.NET Coding Strategies with the Microsoft ASP.NET Team

Filed under: for-developer

	firefly said: หากต้องการแสดงผลใน datagrid โดยที่ให้มีปุ่มแก้ไขและลบข้อมูลอยู่ด้วย แต่ว่ามีการแบ่งลำดับชั้นของผู้ใช้ โดยที่ผู้เข้าใช้ทั่วไปจะไม่เห็นปุ่มแก้ไขและลบ ผู้ใช้ที่เป็นผู้จัดการเท่านั้นจึงจะเห็นปุ่มเหล่านี้ จะต้องทำอย่างไรครับ March 27, 2008 6:54 AM
	firefly said: ขอโทษครับ เมื่อกี้ไม่แน่ใจว่าพิมพ์ผิดหรือปล่าว แต่ขอแก้ไขดังนี้ครับ ถ้าต้องการแสดงผลในตาราง โดยใช้ gridview และต้องการให้มีปุ่มแก้ไขและลบ โดยมีการแบ่งว่า หากเป็นผู้ใช้ทั่วไปจะไม่เห็นปุ่มแก้ไขและลบ ผู้จัดการเท่านั้นที่จะเห็นปุ่มเหล่านี้ จะต้องทำอย่างไรครับ March 27, 2008 6:58 AM
	นันคอม said: ใน ASP.NET จะมีคอนโทรลชื่อ Log-In View ครับ ในกรณีนี้อาจจะต้องมี 2 DataGrid อันนึงสำหรับคนที่ Log-in อันนึงสำหรับคนที่ไไม่ได้ Log-in และยังมันสามารถตั้งเป็น Role ได้เลยด้วยครับ ลองดูที่นี่ครับ quickstarts.asp.net/.../loginview.aspx April 10, 2008 2:17 PM
	kowaood said: ขอบคุงมากๆคับสำหรับบทความนี้ September 26, 2008 1:32 PM
	ae said: อยากทราบ การทำการจัดการกับ Gridview โดยที่ยังไม่ต้องยุ่งกับ Database นะครับ ขอสักบทความนะครับ ขอบพระคุณ October 18, 2008 10:21 AM

Name (required)

Your URL (optional)

Comments (required)

Remember Me?

Add

เพื่อนบ้าน

ดูจากแท็ก

เดือนก่อนๆ

โพสอื่นๆ

บทความ

Introducing the ASP.NET 2.0 GridView and DetailsView Controls

firefly said:

firefly said:

นันคอม said:

kowaood said:

ae said:

Leave a Comment