النسخة الإنجليزية: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html
في هذه السلسلة، سأقدم بعض عناصر التحكم الأكثر تقدمًا في Atlas Sys.UI.Data، بما في ذلك:
Sys.UI.Data.ListView : عرض بيانات القائمة باستخدام عنصر التحكم ASP.NET Atlas ListView
Sys.UI.Data.ItemView: للمتابعة
Sys.UI.Data.DataNavigator: للمتابعة
Sys.UI.Data.XSLTView: يتبع هذه المقالة هي أولها: استخدام عنصر التحكم ASP.NET Atlas ListView لعرض بيانات القائمة
في معظم برامج الويب الحالية، نحتاج إلى عرض بعض بيانات القائمة للمستخدم. يوفر عنصر تحكم خادم GridView في ASP.NET هذه الوظيفة، كما يمكن لعنصر تحكم العميل ListView في Atlas أيضًا توفير وظائف مماثلة من جانب العميل وتشغيلها في وضع AJAX. على الرغم من أنه يمكنك استخدام عنصر تحكم GridView التقليدي بالإضافة إلى UpdatePanel الخاص بـ Atlas لتوفير نفس عملية AJAX، إلا أن هذا التنفيذ أقل كفاءة ولا يمثل أسلوب Atlas "الخالص". الطريقة الموصى بها هي استخدام ListView للتحكم في عميل Atlas بدلاً من ذلك. لا تقلق، فعنصر تحكم ListView في Atlas بسيط مثل GridView، وكلاهما متشابهان في العديد من المفاهيم، مثل ItemTemplate. ومع ذلك، تجدر الإشارة إلى أن IDE الحالي لا يوفر وظيفة إدراك ذكية لنصوص Atlas النصية، بالإضافة إلى ذلك، لا تحتوي نصوص Atlas النصية على فحوصات وقت الترجمة، لذا يجب أن تكون أكثر حذرًا عند كتابة التعليمات البرمجية.
عند استخدام ListView، يجب عليك تزويده ببعض القوالب الضرورية (القالب) لإخبار Atlas بكيفية عرض المحتوى الخاص بك. توجد القوالب التالية في ListView:
LayoutTemplate: يُستخدم هذا القالب لعرض الحاوية التي تحتوي على عناصر القائمة (على سبيل المثال، باستخدام علامة <table>)، ورأس القائمة (على سبيل المثال، باستخدام علامة <thead>)، ورأس القائمة (على سبيل المثال، باستخدام علامة <thead>)، الذيل ، إلخ. يجب عليك تحديد قالب تخطيط لـ ListView. ويجب أن يحتوي هذا القالب على قالب itemTemplate، واختياريًا قالب separatorTemplate.
itemTemplate: يُستخدم هذا القالب لعرض عنصر في القائمة (على سبيل المثال، باستخدام العلامة <tr>). يجب وضع هذا القالب في LayoutTemplate.
separatorTemplate: يُستخدم هذا القالب لعرض العنصر الفاصل بين العناصر الموجودة في القائمة (على سبيل المثال، باستخدام علامة <hr>). يجب وضع هذا القالب في LayoutTemplate.
emptyTemplate.: يُستخدم هذا القالب لعرض ListView في حالة عدم وجود عناصر. في الوقت الحالي، قد لا يكون هناك أي عناصر في كائن DataSource مرتبطة بـ ListView، أو قد يكون قيد الحصول عليه من الخادم.
هناك أيضًا بعض الخصائص في ListView:
itemCssClass: يحدد فئة CSS لعنصر العنصر.
ternatingItemCssClass: فئة CSS لعنصر العنصر الذي يحدد الفاصل الزمني.
SelectedItemCssClass: يحدد فئة CSS لعنصر العنصر المحدد.
separatorCssClass: يحدد فئة CSS التي تفصل العناصر.
itemTemplateParentElementId: تحدد هذه السمة العنصر الأصلي لـ itemTemplate وseparatorTemplate. بهذه الطريقة يمكن عرض عناصر itemTemplate وseparatorTemplate بشكل متكرر.
حسنًا، دعونا نستخدم مثالاً لتوضيح كيفية استخدام عنصر تحكم ListView:
أولاً، نكتب خدمة ويب تقوم بإرجاع DataTable في .NET. لاحظ أننا هنا سوف نرث من الفئة الأساسية Microsoft.Web.Services.DataService، ونضيف السمة DataObjectMethod المحددة في مساحة الاسم System.ComponentModel إلى أسلوب الخدمة. في بداية طريقة الخدمة، نستخدم System.Threading.Thread.Sleep(2000) لمحاكاة تأخير الشبكة لمدة ثانيتين حتى يمكن رؤية محتويات القالب الفارغ.
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
الفئة العامة MyService: Microsoft.Web.Services.DataService {
[DataObjectMethod(DataObjectMethodType.Select)]
DataTable العامة GetListData()
{
System.Threading.Thread.Sleep(2000);
DataTable dt = new DataTable("MyListData");
dt.Columns.Add("Name"، typeof(string));
dt.Columns.Add("البريد الإلكتروني"، typeof(string));
DataRow newRow;
لـ (int i = 0; i < 5; ++i)
{
newRow = dt.NewRow();
newRow["Name"] = string.Format("Dflying {0}", i);
newRow["Email"] = string.Format(" Dflying{0}@dflying.net ", i);
dt.Rows.Add(newRow);
}
العودة د.ت.
}
}
ثم قم بإضافة بعض عناصر التحكم/العلامات الضرورية في صفحة ASP.NET: <atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- عنصر قائمتي (الحاوية) -->
<div id="myList"></div>
<!-- عناصر التخطيط -->
<div style="display: لا شيء;">
</div>
في العلامة أعلاه، أضفنا ثلاث علامات: عنصر تحكم ScriptManager مطلوب. يتم استخدام div بالمعرف myList للسماح لـ Atlas بوضع ListView المعروض هنا. قسم مخفي يحدد القالب الخاص بنا. العناصر الموجودة في هذا القسم المخفي غير مرئية على الصفحة ويتم استخدامها فقط لتزويد Atlas بالقوالب الضرورية.
نضيف قالب ListView التالي إلى القسم المخفي هذا:
<!-- Layout Template -->
<معرف الجدول = "myList_layoutTemplate" الحدود = "1" خلية الحشو = "3">
<الرأس>
<تر>
<td><span>لا.</span></td>
<td><span>الاسم</span></td>
<td><span>البريد الإلكتروني</span></td>
</tr>
</الرأس>
<!--كرر القالب -->
<tbody id="myList_itemTemplateParent">
<!-- قالب تكرار العنصر -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
<!-- قالب العنصر الفاصل -->
<tr id="myList_separatorTemplate">
<td colspan="3">الفاصل</td>
</tr>
</tbody>
</الجدول>
<!--نموذج فارغ -->
<div id="myList_emptyTemplate">
لا توجد بيانات
</div>
في الكود أعلاه يمكنك رؤية القوالب الأربعة التي ذكرتها. حدد أيضًا معرفًا لكل قالب، والذي سيتم استخدامه في إعلان برنامج Atlas النصي أدناه. في هذا المثال سأقوم بعرض ListView كجدول HTML، ولسوء الحظ فإن العناصر المنفصلة ستكون قبيحة (سطر فارغ).
أخيرًا، قم بإضافة بيان برنامج Atlas النصي إلى الصفحة:
<dataSource id="listDataSource" autoLoad="true"serviceURL="MyService.asmx" />
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
<الارتباطات>
<binding dataContext = "listDataSource" dataPath = "data" property = "data" />
</الربط>
<قالب التخطيط>
<template LayoutElement="myList_layoutTemplate" />
</layoutTemplate>
<قالب العنصر>
<template LayoutElement="myList_itemTemplate">
<معرف التسمية = "lblIndex">
<الارتباطات>
<binding dataPath = "$index" تحويل = "إضافة" خاصية = "نص"/>
</الربط>
</التسمية>
<معرف التسمية = "lblName">
<الارتباطات>
<binding dataPath="Name" property="text" />
</الربط>
</التسمية>
<معرف التسمية = "lblEmail">
<الارتباطات>
<binding dataPath="Email" property="text" />
</الربط>
</التسمية>
</قالب>
</itemTemplate>
<فاصل القالب>
<template LayoutElement="myList_separatorTemplate" />
</separatorTemplate>
<فارغة القالب>
<template LayoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
أضفت هنا كائن DataSource لعميل Atlas للحصول على البيانات من خدمة الويب. لن نتحدث كثيرًا عن DataSource هنا (قد يتم تقديمه في مقالات لاحقة). دعونا نلقي نظرة على التعريف المتعلق بـ ListView: في تعريف ListView، نحدد سمة itemTemplateParentElementId. ثم يتم تعريف مقطع الربط داخل ListView لربط البيانات التي تم الحصول عليها من DataSource إلى ListView. لقد قمنا أيضًا بتحديد أربعة أجزاء من القالب، كل منها يستخدم LayoutElement لربطها بالقوالب الأربعة المحددة أعلاه. لاحظ أنه بالنسبة لعنصر تحكم التسمية الأول في قالب LayoutTemplate، قمنا بتحديد إضافة محول في ربطه لتغيير الترتيب بدءًا من 0 إلى البدء من 1 (بالنسبة إلى Atlas Transformer، يرجى الرجوع إلى مقالتي: http://dflying.cnblogs. com/archive/2006/04/05/367908.html ).
لقد انتهيت، فلنقم بتشغيله.