ASP.NET เลือก item จาก GridView แบบ Paging

ความต้องการ …

เมื่อต้องการแสดง items แบบ table ใน ASP.NET ด้วย GridView แล้วทำ Paging เพื่อแสดง items แบ่งเป็นหน้าๆ พร้อมทั้งสามารถเลือก item ในแต่ละหน้า และเมื่อกดปุ่ม operation แล้ว ให้ดำเนินการกับ items ที่เลือกไว้ได้

ลงมือทำ …

บทความนี้จะไม่ใช้เทคนิค javascript ใดๆทั้งสิ้น

OK เรามาเริ่มต้นด้วยการสร้าง project ASP.NET Empaty Web Application ขึ้นมาก่อน ตั้งชื่อตามภาพ

ผมสมมติ model Food ไว้เก็บ information ของอาหาร และ model FoodStore เป็นที่เก็บ Food และช่วยค้นหา Food เพื่อนำมาแสดงบนหน้า web page ด้วย GridView ทำไปตามผมไปทีละขั้นตอนตามนี้ครับ

1. เพิ่ม Folder Models เข้าไปที่ projects web ที่เราสร้างไว้แล้วข้างต้น

2. เพิ่ม class Food และ FoodStore ไว้ใน folder Models เพื่อความเป็นระเบียบ จะได้ file Food.cs และ FoodStore.cs เขียน code ตามข้างล่างนี้ครับ

namespace SelectedGridViewPaging.Models

{

public class Food

{

public string Code { get; set; }

public string Name { get; set; }

public string Description { get; set; }

}

public class FoodStore

{

public static List<Food> MenuSeafood

{

get

{

//ขอขอบคุณข้อมูลอาหาร seafood จาก: http://www.enjoythaifood.com/picturemenu/seafood.php

var menu = new List<Food>();

menu.AddRange(new Food[]{

new Food { Code = “SF001”, Name = ยำปลาดุกฟู, Description = “Fried Crispy Catfish served with Spicy Mango Salad” },

new Food { Code = “SF002”, Name = กุ้งทอดตะกร้าเผือก, Description = “Fried Shrimp in an Edible Basket” },

new Food { Code = “SF003”, Name = ปูนิ่มผัดผงกะหรี่, Description = “Stir-fried Soft-shelled Crab in Curry Powder” },

new Food { Code = “SF004”, Name = แกงเขียวหวานผัดแห้ง, Description = “Green Dry Curry with Fish Balls” },

new Food { Code = “SF005”, Name = ห่อหมกทะเลมะพร้าวอ่อน, Description = “Curry Steamed Seafood in Coconut” },

new Food { Code = “SF006”, Name = หอยนางรม, Description = “Oyster” },

new Food { Code = “SF007”, Name = ผัดโป๊ะแตกแห้ง, Description = “Spicy Stir-fried Seafood “ },

new Food { Code = “SF008”, Name = กุ้งผัดผงกะหรี่, Description = “Fried Shrimps with Curry Powder “ },

new Food { Code = “SF009”, Name = กุ้งกระเบื้อง, Description = “Shrimp in Hard Batter” },

new Food { Code = “SF010”, Name = ปลาหมึกผัดไข่เค็ม, Description = “Stir-fried Squid with Salted Egg” },

new Food { Code = “SF011”, Name = ห่อหมกปู, Description = “Steamed Crab Curry in a Banana Leaf Cup” },

new Food { Code = “SF012”, Name = ต้มยำกุ้ง, Description = “Lemon Grass Soup with Prawns” },

new Food { Code = “SF013”, Name = กุ้งชุบแป้งทอด, Description = “Deep-fried Shrimps in Flour” },

new Food { Code = “SF014”, Name = ทอดมันกุ้ง, Description = “Prawn cakes” },

new Food { Code = “SF015”, Name = ปลากะพงอบเกลือ, Description = “Grilled Salty Sea Bass “ },

new Food { Code = “SF016”, Name = ออส่วนทะเล, Description = “Fried Mussels, Shrimps and Crabs fried in Flour “ },

});

return menu;}}}}

3. เพิ่ม web page เข้าไป ครับเพื่อใช้แสดง model food ของเรา และเพิ่ม GridView กับ Buttom เข้าไป ตามนี้ครับ

<%@Page Language=”C#” AutoEventWireup=”true” CodeBehind=”WebForm1.aspx.cs” Inherits=”SelectedGridViewPaging.WebForm1″ %>

<!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head runat=”server”>

<title></title>

</head>

<body>

<form id=”form1″ runat=”server”>

<asp:GridView ID=”SeafoodMenuGridView” runat=”server”

AutoGenerateColumns=”false” AllowPaging=”true” DataKeyNames=”Code” PageSize=”5″ PagerSettings-Mode=”Numeric”

onpageindexchanging=”SeafoodMenuGridView_PageIndexChanging”

onrowdatabound=”SeafoodMenuGridView_RowDataBound”>

<Columns>

<asp:TemplateField HeaderText=”Select”>

<ItemTemplate>

<asp:CheckBox ID=”CheckSelect” runat=”server”/>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField HeaderText=”รหัสDataField=”Code”/>

<asp:BoundField HeaderText=”ชื่ออาหาร DataField=”Name”/>

<asp:BoundField HeaderText=”Description” DataField=”Description”/>

</Columns>

</asp:GridView>

<p><asp:ButtonID=”GetSelectedCommand” runat=”server”

Text=”สั่งอาหารที่เลือกonclick=”GetSelectedCommand_Click”/></p>

</form>

</body>

</html>

4. เข้าไปที่ Page_Load ของ codebehide file WebForm1.aspx.cs เขียน code เพิ่ม load Food เพื่อ แสดงบน SeafoodMenuGridView พร้อมกับ สร้าง ViewState ไว้เก็บ Food ที่เราเลือกไว้ด้วยครับ

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

LoadMenu();

}

}

private void LoadMenu()

{

SeafoodMenuGridView.DataSource = FoodStore.MenuSeafood;

SeafoodMenuGridView.DataBind();

}

List<string> SelectedRecords

{

get

{

if (ViewState[“SelectedRecords”] == null)

ViewState[“SelectedRecords”] = new List<string>();

return ViewState[“SelectedRecords”] as List<string>;

}

}

5. ที่ GridView  เราได้ bind event onpageindexchanging กับ SeafoodMenuGridView_PageIndexChanging ซึ่งจะเกิดเหตุการณ์นี้เมื่อ ผู้ใช้ click ที่ GridView ที่ paging หน้าใดๆ เมื่อเกิดขึ้นแล้ว page จะ postback ไปยัง server ที่ codebehide ให้เราเขียน code ที่จะแสดง item หน้าถัดไป พร้อมทั้งเก็บ ผลลัพย์จากการ เลือก item ที่ gridview ไว้ด้วย ดังนี้ครับ

protected void SeafoodMenuGridView_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

RefreshSelectedItems();

SeafoodMenuGridView.PageIndex = e.NewPageIndex;

LoadMenu();

}

private void RefreshSelectedItems()

{

foreach (GridViewRow row in SeafoodMenuGridView.Rows)

{

CheckBox chk = (CheckBox)row.FindControl(“CheckSelect”);

var selectedKey = Convert.ToString(SeafoodMenuGridView.DataKeys[row.RowIndex].Value);

if (chk.Checked)

{

if (!SelectedRecords.Contains(selectedKey))

{

SelectedRecords.Add(selectedKey);

}

}

else

{

if (SelectedRecords.Contains(selectedKey))

{

SelectedRecords.Remove(selectedKey);

}

}

}

}

6. ไปดูที่ GridView onrowdatabound ครับเหตุการณ์นี้จะเกิดเมื่อ data row (ที่ถูกแทนด้วย GridViewRow) ถูกผูกกับข้อมูลใน GridView control ดังนั้นหน้าที่ของเราคือเขียน code เพื่อแสดงการ check item เมื่อ item นั้นถูกเลือกไว้แล้ว ดังนี้ครับ

protected void SeafoodMenuGridView_RowDataBound(object sender, GridViewRowEventArgs e)

{

var list = SelectedRecords;

if (e.Row.RowType == DataControlRowType.DataRow)

{

var code = Convert.ToString((SeafoodMenuGridView.DataKeys[e.Row.RowIndex].Value));

if (list.Contains(code))

{

CheckBox chk = (CheckBox)e.Row.FindControl(“CheckSelect”);

chk.Checked = true;

}

}

}

7. สุดท้ายเราก็แสดงผลการเลือกออกมาแบบง่าย เขียน code รับ event จากปุ่ม GetSelectedCommand ครับ

protected void GetSelectedCommand_Click(object sender, EventArgs e)

{

Response.Write(“<h3>คุณได้เลือก Menu อาหารตามนี้:</h3>”);

RefreshSelectedItems();

SelectedRecords.ToList().ForEach(code => Response.Write(code + “<br />”));

}

เสร็จแล้วครับ ลองทดสอบจะได้ตามภาพ

ผมขอจบบทความเพียงเท่านี้

ขอบคุณครับ

SourceCode

Advertisements

#asp-net