السلام عليكم و رحمة الله و بركاته ..........
سلأقدم لكم اليوم شرحا" لكيفية ترتيب أعمدة الداتاجريد لكي تُعرض حسب الشكل الذي ترغبه،فمن المعروف ان الداتا جريد تعرض البيانات متجاورة و هذا احيانا" كثيرة لا يبدو مرضيا" للمستخدم،لذا فسنقوم اليوم بإنشاء داتا جريد لعرض بياناتها وفق ترتيب معين، مثل ما يحدث في المواقع الاخبارية أو حتى في هذا المنتدى، حيث تجد أن المشاركة تحوي صورة العضو و أسفلها عدد مشاركاته ثم الى جانبهما المشاركة و تاريخها ... الخ. يمكن القيام بهذا عن طريق إنشاء Template داخل الداتا جريد و نرتب داخل هذا ال Template الأعمدة كما نشاء
سنبدأ الآن....
1- نقوم بإنشاء قاعدة بيانات جديدة في sql server و نسميها Template_DataBase ثم ننشئ بداخلها جدول نسميه News ونضع فيه الحقول التالية:
ID,Int
Title,Nvarchar(200
Summary,Nvarchar(max
My_Image,image
2- نفتح visual studio ثم ننشئ مشروع asp جديد ونضيف للمشروع صفحتين هما Default.aspx,Insert_News.aspx
3-نضيف صندوقي نص و اداة fileuploader إلى الصفحة Insert_News.aspx كما في الصورة التالية:
4-ثم نكتب هذا الكود لإضافة الخبر لقاعدة البيانات تحت زر الإضافة:
SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Template_Database;Integrated Security=True");
byte[] image_bytes = new byte[FileUpload1.FileContent .Length];
SqlCommand Insert_com = new SqlCommand("Insert into news values(@txt_title,@txt_summary,@img)", con);
Insert_com.Parameters.Add("@txt_title", SqlDbType.NVarChar).Value = Text_title.Text;
Insert_com.Parameters.Add("@txt_summary", SqlDbType.NVarChar).Value = Text_summary.Text;
Insert_com.Parameters.Add("@img", SqlDbType.Image).Value = FileUpload1 .FileBytes ;
Insert_com.CommandType = CommandType.Text;
con.Open();
Insert_com.ExecuteNonQuery();
con.Close();5-نذهب الى صفحة Default.aspx ونضع فيها داتا جريد عادية ثم ننشئ datasource جديد يقوم بجلب جميع الأعمدة من جدول News و نربط الداتا جريد مع الداتا سورس كما هو معروف.
6-نختار Edit columns من قائمة GridView Tasks ، نلاحظ عدم وجود العمود My_Image الذي سيقوم بعرض الصورة، نضيف من خلال Available fields حقل خاص لعرض الصور لذا نختار Imagefield. نعين خاصية DataImageUrlField الى My_Image
7-ننشئ ملف handler جديد ، هذا الملف يقوم بتحويل الصورة المخزنة في قاعدة البيانات الى بايتات لعرضها في الصفحة و نكتب فيه كود استدعاء الصورة داخل الحدث ProcessRequest(HttpContext):
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings[1].ConnectionString);
string sql = "Select My_Image from News where="ID=@ImageId"]ID=@ImageId]";
SqlCommand cmd = new SqlCommand(sql, myConnection);
myConnection.Open();
cmd.Parameters.Add("@ImageId", SqlDbType.Int);
cmd.Parameters[0].Value = Convert.ToInt32(context.Request.QueryString["ID"]);
cmd.Prepare();
SqlDataReader dr;
dr = cmd.ExecuteReader();
while (dr.Read())
{
context.Response.ContentType = "jpeg";
context.Response.BinaryWrite((byte[])dr["My_Image"]);
}
myConnection.Close();ثم داخل كود aspx نعين الخاصية ImageUrl الخاصة بImagefield الذي اضفناه الى القيمة التالية:
'<%# "Handler.ashx?id=" + Eval("ID") %>'7-كما قلنا في البداية أننا نريد عمل template معين للداتا جريد و من خلال هذا ال template سنرتب الصورة و العنوان و ملخص الخبر بالكيفية التي نريدها ، لذا نذهب الى Gridview_Tasks و نختار Edit Templates
8- نلاحظ تحول الداتاجريد الى مربع خال و بجانبه قائمة المفترض ان بها الحقول التي نرغب بإضافنها و لكنها خالية، لماذا؟ لأن الأعمدة بوضعها الحالي مخصصة للعرض بالطريقة النمطية فقط، لذا علينا أن نقوم بتعديل وضعها لكي تقبل الاضافة الى template
9-نعود الى Edit columns و نقوم بإختيار العمود الذي نرغب في ظهوره في template ثم نضغط convert this field into template field
10-قمنا هنا بإختيار أعمدة الصورة و العنوان و الملخص و أهملنا ID لأننا لا نريد ظهوره.
11-نذهب مرة أخرى Edit Templates و نضغط على القائمة المنسدلة نلاحظ ظهور الأعمدة الثلاثة و اسفل كل منهم عناصر مثل Item Template و Header Template و Footer Template و عناصر أخرى ، و هي عناصر مخصصة لضبط مثلا" رأس العمود و أسفله و ضبط الصف التالي له(AlternatingItem Template)
12-نختار Item Template الخاص ب العمود title نلاحظ ظهور label ، هذه label مسؤلة عن عرض العنوان , و عند إختيار Item Template الخاصة بكل عمود سنجد label آخر لعرض الملخص ,و Image لعرض الصورة
13-نختار Item template الخاصة بtitle و نضيف اليها html table ثم نذهب الى Item template الخاصة بالعمود summary و نختار ال label و نقصه ثم نعود لوضعه في html table.
14- نكرر الخطوة السابقة مع item template الخاصة بعمود الصورة
15-نقوم بترتيب الlabels و image كما نشاء ، لاحظ اننا بهذه الطريقة قد جعلنا الأعمدة كلها تحت عمود واحد هو عمود title
16-نقوم بتشغيل الصفحة نلاحظ ظهور الأعمدة كما نريد و لكن سيظهر حقلي summary و Imagefield خاليان لذا نذهب الى Edit columns و نقوم بحذفهما و أيضا" قم بتعيين الخاصية Show Header الخاصة بالداتا جريد إلى false
17- نقوم يتشغيل الصفحة ، سنجد ان الداتا جريد قد ظهرت بالشكل المطلوب و قد عرضت البيانات بالطريقة التي نريدها
و بالهناء و الشفاء 
