GridView Master Detail


ใช้กับ

Microsoft Visual Studio 2008 Professional Edition

Microsoft SQL Server 2005 Express

AJAX 1.0-Enable ASP.Net 2.0

สาธารณะDownload: GridViewMasterDetail.zip

บทความนี้ นำเสนอการทำรายงานแบบ Master Detail ง่ายๆ ด้วย GridView กันครับ มีหลักการง่ายๆ ครับ คือใช้ GridView  ซ้อนกัน 2 อัน และใช้ AJAX มาช่วยเพื่อการแสดงผลให้น่าใช้งานมากขึ้น

MasterDetail GridView ซ้อนกัน 2 อัน เป็นรายงาน Category และ Product

clip_image002

 

ออกแบบโปรแกรมกัน

1. New Project ด้วย AJAX 1.0-Enabled ASP.NET 2.0

clip_image003

2. ลาก GridView  มาวาง 1 อัน

clip_image004

3. จัด Auto Format ตามต้องการ

clip_image005

4. กำหนดให้มันสลับสี Row

clip_image006

5. กำหนด Connection string เอก base Northwind

clip_image007

6. เลือกตาราง Categorics

clip_image008

7. ลบ Column ให้เหลือ 2 Column แล้วทำการ Convert เป็น TemplateField

clip_image009

8. Edite TemplateField

clip_image010

9. Edite TemplateField CategoryID ก่อน โดยเลือนเมาส์มาเลือก ItemTemplate

clip_image011

10. ลาก ImageButton มาวาง

clip_image012

11. กำหนด ImageUrl เลือกรูป Plus.gif

clip_image013

12. จะได้ผลดังนี้

clip_image014

13. มา Edit ItemTemplate Categoryname

clip_image015

14. บน Label2 Edit DataBindings

clip_image016

15. ลาก Label มาเพิ่มอีก 2 อันเพื่อ Show ข้อมูล categoryName และ Detail

clip_image017

16.

clip_image018

17. กำหนด DataBindings ตามรูป

clip_image019

18. เรียบร้อยในส่วน ข้อมูล Category

clip_image020

19. จากนั้นมาทำในส่วนของรายงานข้อมูลสินค้าที่อยู่ใน category ID นั้นๆ โดยลาก GridView มาวางเพิ่มอีก 1 อันดังรูป แล้วจัด Format ตามใจชอบ

clip_image021

20. กำหนด Data Source สำหรับ GridView แสดงรายงาน Product ตั้งชื่อเป็น SqlDataSource_Product  เพราะเราต้องใช้ใน Code behind

clip_image022

21. เลือก Field ตามต้องการครับ

clip_image023

22. กำหนด รายการ Product ตาม CategoryID operator เป็น = Source None เราจะผ่านเป็น Parameter ครับ

clip_image024

23.

clip_image025

24.

clip_image026

25. ใส่ Caption= Product Detail

clip_image027

26. หลังจาก ออกแบบเรียบร้อย หน้าตาเป็นดังรูป 

clip_image028

27. กำหนด CommandName บน ImageButton1 เป็น showPro

clip_image029

28. กำหนด DataKeyName

clip_image030

29. ทดสอบรันเพื่อดูหน้าตารายงาน

clip_image031

30.

clip_image032

31. ใช้งาน Ajax ลาก UpdatePanel และ UpdateProgrees มาวาง ใต้ ScriptManager

clip_image033

32. ลากรูป indicator (loading.gif) มาวางบน UpdateProgress และพิมพ์ Loading… เพื่อหลอกผู้ใช้งานว่ากำลังทำงานอยู่ ในขณะที่ Ajax ทำงาน

clip_image034

33. ลาก GridView มาวางใน Update Panel

clip_image035

34. แก้ไข HeaderText

clip_image036

35. รันโปรแกรม ทดสอบรายงาน

clip_image037

 

Code Behind:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    private int index = 0;
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {      

        if (e.CommandName == "showPro")
        {
            ImageButton im = (ImageButton)GridView1.Rows[int.Parse(e.CommandArgument.ToString())].Cells[0].FindControl("ImageButton1");
            if (im.ImageUrl == "~/Images/Plus.gif")
            {
                //เก็บ DataKeys ซึ่งคือ CategoryID
                string catId = GridView1.DataKeys[int.Parse(e.CommandArgument.ToString())].Value.ToString();
                //เก็บ DataSource ของ Product
                SqlDataSource sds = (SqlDataSource)GridView1.Rows[int.Parse(e.CommandArgument.ToString())].FindControl("SqlDataSource_Product");
                //GridView รายการ Product
                GridView gv = (GridView)GridView1.Rows[int.Parse(e.CommandArgument.ToString())].FindControl("GridView2");
                //pass parameter CategoryID ให้ SqlDataSource_Product
                sds.SelectParameters[0].DefaultValue = catId;
                //Show GridView รายการ Product
                gv.Visible = true;
                //set รูป Image เป็น Minus
                im.ImageUrl = "~/Images/Minus.gif";

            }
            else
            {
                //เก็บ DataSource ของ Product
                GridView gv = (GridView)GridView1.Rows[int.Parse(e.CommandArgument.ToString())].FindControl("GridView2");
                //ซ่อน GridView รายการ Product
                gv.Visible = false;
                //set รูป Image เป็น Plus
                im.ImageUrl = "~/Images/Plus.gif";
            }

        }

    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            ImageButton im = (ImageButton)e.Row.Cells[0].FindControl("ImageButton1");
            //set CommandArgument ให้ ImageButton
            im.CommandArgument = index.ToString();
            index = index + 1;
        }
    }
}

 Source Code

GridViewMasterDetail.zip สาธารณะ

ดาวน์โหลด

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Web Application
2 comments on “GridView Master Detail
  1. Mui พูดว่า:

    เป็นแบบฝึกหัดที่ดีมากเลยคะ ขอบคุณค่ะ แต่ว่าสงสัยนิดหนึ่งค่ะว่า เราจะ findcontrol ของ gridview2 ได้มั้ย

  2. Nuchit พูดว่า:

    ได้เช่นเดียวกับ GridView1 ครับ แต่เราต้องดึงอ็อบเจ็กต์ของ GridView2 ออกมาจาก GridView1 ออกมาก่อน แล้วจึงทำการค้นหาคอนโทรลจากอ็อบเจ็กต์ GridView2 ดังกล่าวครับ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: