ASP.NET กับ jQuery: การทำงานกับ GridView Control เริ่มต้น

แนะนำให้รู้จัก GridView Control

ASP.NET GridView control มันคือ objects เพื่อนำเสนอรายการข้อมูลในรูปแบบของ grid หรือแบบตาราง ที่มี column แสดงชื่อ field ข้อมูล และ ใช้ row แทนข้อมูล 1 รายการ บทความชุด jQuery ทำงานกับ ASP.NET GridView นี้ผมจะใช้รายการข้อมูล และ GridView เดียวกันทั้งหมด ผมจะแสดงวิธีการสร้าง GridView และ mockup data ง่ายๆไว้ในบทความแรกนี้ เพื่อแสดงวิธีการใช้ jQuery ทำงานกับ GridView ในบทความต่อๆไป อันได้แก่

เริ่มต้นสร้าง GridView control เพื่อแสดงรายการข้อมูล

1. สร้าง projects web ว่างๆขึ้นมา ตามภาพ

2. เพิ่ม web page เข้าไป ตามภาพ

3. เปิด ToolBox window ใน Visual Studio

4. ไปที่ Data Controls section แล้วลาก GridView มาวางบน form

5. ไปที่ code behide ของ form เขียน code เล็กน้อยเพื่อสร้าง mockup data ไว้แสดงบน GridView เป็นตัวอย่าง ตามนี้ครับ

    public DataTable BuildDataTable()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ISBN-10", typeof(string));
        dt.Columns.Add("Title", typeof(string));
        dt.Columns.Add("Author", typeof(string));
        dt.Columns.Add("Publisher", typeof(string));
        dt.Columns.Add("Hardcover", typeof(string));
        dt.Rows.Add("0321712943", "Domain-Specific Languages", "Martin Fowler", "Addison-Wesley Professional", "640 pages");
        dt.Rows.Add("0321503627", "Growing Object-Oriented Software, Guided by Tests", "Steve Freeman, Nat Pryce", "Addison-Wesley Professional", "384 pages");
        dt.Rows.Add("0321601912", "Continuous Delivery: Reliable Software Releases through Build, Test, and Deployment Automation", "Jez Humble, David Farley", "Addison-Wesley Professional", "512 pages");
        dt.Rows.Add("0321712471", "Management 3.0: Leading Agile Developers, Developing Agile Leaders", "Jurgen Appelo", "Addison-Wesley Professional", "464 pages");
        dt.Rows.Add("9780321205681", "User Stories Applied: For Agile Software Development", "Mike Cohn", "Addison-Wesley Professional", "304 pages");
        dt.Rows.Add("0132350882", "Clean Code: A Handbook of Agile Software Craftsmanship", "Robert C. Martin", "Addison-Wesley Professional", "464 pages");
        return dt;
    }

6. เพิ่ม code ที่ page load เพื่อแสดง mockup data ตามนี้ครับ

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            GridView1.DataSource = BuildDataTable();
            GridView1.DataBind();
        }
    }

7. เมื่อ run form แล้วจะมีหน้าตาคล้ายแบบนี้

คุณจะเห็นว่าหน้าตา GridView ยังไม่สวยงามน่าใช้ ขั้นตอนต่อไปนี้ ผมจะใส่ style ให้ GridView นี้เพื่อเพิ่มความสวยงามน่าใช้ โดยใช้ skin file

เพิ่มความสวยงามให้ form ด้วย skin file

1. click ขวาบน project และเพิ่ม new folder App_Themes

2. click ขวา ที่ App_Themes folder และเลือก Add New Item

3. เลือก Skin file จาก templates ตามภาพนี้

4. จะได้ folder SkinFile และ SkinFile.skin ให้เปลี่ยนชื่อ SkinFile.skin ไปเป็น GridView.skin ตามภาพนี้

5. copy content ที่อยู่ข้างล่างนี้ ไปวางที่ GridView.skin แล้วกด Save ครับ

<asp:GridView ID="GridView1" runat="server" SkinID="Professional" Font-Name="Verdana" Font-Size="10pt" Cellpadding="4" HeaderStyle-BackColor="#444444" HeaderStyle-ForeColor="White"/>

6. เพื่อที่จะใช้ theme นี้ที่ web page เราจำเป็นที่จะต้องเพิ่ม property StylesheetTheme ที่ page directive ส่วนบนสุดของ ASPX page ครับกลับไปแก้ไข web page แบบนี้

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimpleGridView.aspx.cs" Inherits="GridViewSpikeWeb.SimpleGridView" StylesheetTheme="SkinFile"%>

7. จากนั้นก็กำหนด skin ให้ที่ GridView control  โดยกำหนดที่ SkinID ของ control ตามแบบนี้

<asp:GridView ID="GridView1" runat="server" SkinID="Professional">
</asp:GridView>

8. เรียบร้อยแล้วครับ พอ run form ขึ้นมาก็จะเห็นหน้าตา Grid สวยๆแบบนี้

OK แล้วครับ… ผมขอจบบทความนี้ โดยเปิด web projects GridView เพื่อแสดง mockup data ง่ายๆ ค้างไว้เพียงเท่านี้ครับ แล้วเดี๋ยวมาต่อกันใหม่

download this SourceCode

ขอบคุณครับ 🙂

ไม่มีอะไรยากเกินไป กว่าความพยายาม

ไม่มีความสำเร็จใด ได้มาง่ายเกินไป

— Chav:P–

Advertisements

#asp-net, #javascript, #jquery