PDA

View Full Version : روش صفحه بندی GridView و خواندن مقدار ستون Hide شده



Developer Programmer
سه شنبه 02 شهریور 1389, 18:46 عصر
امروز، به قسمتی از پروژه رسیدم که لازم بود با کدنویسی، یک ستون از GridView رو مخفی کنم و البته با هربار کلیک کاربر، بفهمم مقدار اون ستون چی بوده...!

یه چند ساعت علاف شدم تا فهمیدم کار با GridView زمانیکه به صورت Design کار میکنین متفاوت از زمانیه که بصورت کدنویسی کار میکنین.

تصمیم گرفتم نتیجه تلاش، تقدیم حضور بشه تا شاید به درد کسی بخوره! :لبخندساده:

به صورت کد نویسی:

یک TextBox و یک GridView روی فرم بندازین. هدف اینه که یک ستون رو مخفی کنیم و با انتخاب یک سطر، مقدار اون ستون رو بخونیم:


<asp:Label ID="Label1" runat="server" Text="ProductID:"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" onrowcommand="GridView1_RowCommand"
onrowcreated="GridView1_RowCreated" AllowPaging=true
onpageindexchanging="GridView1_PageIndexChanging">
</asp:GridView>


OnRowCommand :که هربار شما گزینه ای مانند Select,Edit ویا یک Button و ... رو انتخاب کنین، فعال میشه و میتونین پردازش کنین که چه دکمه ای کلیک شده و توسط اون سطر موردنظر رو پردازش کنین.
OnRowCreated: هربار که سطری در گرید ساخته میشه، این Event فعال میشه. ما از این Event استفاده میکنیم تا ستون دلخواه رو Hide کنیم.
OnPageIndexChanging:اگه GridView رو صفحه بندی(Paging)کنید. هر بار که برروی شماره صفحه جدید کلیک کنید. این Event فراخوانی میشه.برای صفحه بندی، باید پراپرتی AllowPaging=true تنظیم شده باشه.


protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[1].Visible = false;
}

if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[1].Visible = false;
}
}

در رویداد بالا تعریف میکنیم که ستون شماره یک از هر سطر باید مخفی باشه و برای این منظور Visuble رو False کردم


protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Select")
{
int index = Convert.ToInt32(e.CommandArgument);
TextBox1.Text = GridView1.Rows[index].Cells[1].Text;
}
}

در رویداد بالا، تعریف کردیم که هربار که برروی گزینه Select در یک ستون و سطر معین کلیک شد، مقدار ستون شماره یک از اون سطر رو به TextBox پاس بده.

حال میخوام GridView رو به دیتابیس Bind کنم. من برای این منظور از کلاس SqlDataSource استفاده میکنم. ( اونجوری که من تست کردم، DataReader امکان Paging نداره)


string cnn = "Data Source=AFSHIN-PC;Initial Catalog=Northwind;Persist Security Info=True;User ID=sa;Password=123";
string Query = "Select ProductID,ProductName,UnitPrice from Products";

public SqlDataSource FillDataSource()
{
SqlDataSource DS = new SqlDataSource();
DS.ConnectionString = cnn;
DS.SelectCommand = Query;
DS.DataBind();
return DS;
}

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GridView1.DataKeyNames = new string[] { "ProductID" };

GridView1.AllowPaging = true;
GridView1.AutoGenerateSelectButton = true;
GridView1.DataSource = FillDataSource();
GridView1.DataBind();
}
}

یک Connection String تعریف کردم و توسط DataSource بهش کانکت میشم.
یک Query تعریف کردم که DataSource همواره اون Query رو اجرا و نتیجه اون رو به GridView پاس میده.

الان همه چیز تموم شده فقط کافیه به GridView بفهمونیم که با انتخاب شماره صفحه ، به صفحه جدید بره.

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
GridView1.DataSource = FillDataSource();
GridView1.DataBind();
}

برای این منظور شماره صفحه ای رو که کاربر انتخاب کرده به عنوان صفحه جدید در نظر میگیریم و Grid رو دوباره Bind میکنیم.(با دیتاست نتونستم به صفحه جدید برم)

روش Design:

مشابه روش بالا یک GridView و یک TextBox روی فرم بندازین و بصورت دستی GridView رو به دیتابیس Bind کرده و گزینه های Enable Paging و Enable Selection رو هم ست کنین.

یکبار پروژه رو Run کنین. می بینین که با کلیک بروی شماره صفحه، به راحتی، GridView وارد صفحه جدید میشه بدون اینکه کدی براش نوشته باشیم!!

الان میخوام ستون شماره یک رو مخفی کنم:
برای این منظور، در محیط Design برروی GridView کلیک کرده و روی علامت < کلیک کنید. از پنچره باز شده، گزینه Edit Columns رو انتخاب کنین.
در پنجره باز شده ، در پایین صفحه (Selected Fields) روی ستون شماره یک (ProductID) کلیک کنین و قسمت Properties رو Scroll کنین تا به قسمت Styles برسین و cssClass همه Style ها رو برابر یک اسم دلخواه مثل ab بذارین.

حال StyleSheet کلاس ab رو باید تعریف کرده و پراپرتی Display رو برابر none کنید تا ستون انتخاب شده مخفی بشه ولی به Event ها پاسخ بده.


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
.ab
{
display:none;
}
</style>
</head>

پس HTML باید به این شکل شده باشه:
<%@ Page Language="C#‎" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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">
<style type="text/css">
.ab
{
display:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label" runat="server" Text="ProductID:"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <br />
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="SqlDataSource1"
onselectedindexchanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False" ReadOnly="True" SortExpression="ProductID">
<ControlStyle CssClass="ab" />
<FooterStyle CssClass="ab" />
<HeaderStyle CssClass="ab" />
<ItemStyle CssClass="ab" />
</asp:BoundField>
<asp:BoundField DataField="ProductName" HeaderText="ProductName"
SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
SortExpression="UnitPrice" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice] FROM [Alphabetical list of products]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>

دقت کنین وقتی به جای StyleSheet از دستور

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GridView1.Columns[1].Visible = false;
}
}

استفاده کنین. ستون شماره یک مخفی میشه اما دیگه نمیشه مقدار ProductID رو در اون سطر خوند.

حالا باید کاری کنیم که با انتخاب هر سطر، مقدار ProductID رو به TextBox پاس بدیم. برای این منظور از رویداد SelectedIndexChanged استفاده میکنیم:


protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
TextBox1.Text= (string) GridView1.SelectedRow.Cells[1].Text;
}


می بینین که در 2 روش گفته شده حتی Event ها تفاوت میکنن!!