[RaggiTech]

كاتب الموضوع : Ahmed Moosa


بسم الله الرحمن الرحيم

الصور النهائية للعمل

وعند الضغط على تفاصيل يعرض لك الآتى :-

فكرة العمل :-
- إختيارعنصر من القائمة فى الصفحة الأولى وعرض التفاصيل الخاصة به فى الصفحة الثانية .
الأدوات المستخدمة :-
- DataList فى الصفحة الأولى .
- DetailsView فى الصفحة الثانية .
العملية المتبعة:-
- إرسال قيمة مع إسم الصفحة أو ما يسمى بـ URL مع QueryString.
(لاحظ انه سيتم حذف أكواد التنسيق )

كود تصميم الصفحة الأولى

كود :

[color=#000000][COLOR=#007700]<[/color][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]DataList ID[/color][color=#007700]=[/color][color=#dd0000]"DataList1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]DataSourceID[/color][color=#007700]=[/color][color=#dd0000]"SqlDataSource1"[/color][COLOR=#007700]>
                <[/COLOR][color=#0000bb]ItemTemplate[/color][COLOR=#007700]>
                    [/COLOR][color=#0000bb]Name[/color][COLOR=#007700]:
                    <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]Label ID[/color][color=#007700]=[/color][color=#dd0000]"NameLabel" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]Text[/color][color=#007700]=[/color][color=#dd0000]'<%# Eval("Name") %>' [/color][COLOR=#007700]/>
                    <[/COLOR][color=#0000bb]br [/color][COLOR=#007700]/>
                    <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]HyperLink ID[/color][color=#007700]=[/color][color=#dd0000]"HyperLink1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]NavigateUrl[/color][color=#007700]=[/color][COLOR=#dd0000]'<%# "default2.aspx?id="+Eval("Id") %>'
                        [/COLOR][color=#0000bb]Text[/color][color=#007700]=[/color][color=#dd0000]"تفاصيل"[/color][COLOR=#007700]>
                    </[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]HyperLink[/color][COLOR=#007700]>
                </[/COLOR][color=#0000bb]ItemTemplate[/color][COLOR=#007700]>
                <[/COLOR][color=#0000bb]HeaderTemplate[/color][COLOR=#007700]>
                    <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]Label ID[/color][color=#007700]=[/color][color=#dd0000]"Label1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]Text[/color][color=#007700]=[/color][color=#dd0000]"Names"[/color][color=#007700]></[/color][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]Label[/color][COLOR=#007700]>
                </[/COLOR][color=#0000bb]HeaderTemplate[/color][COLOR=#007700]>
            </[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]DataList[/color][color=#007700]></[/color][color=#0000bb]div[/color][COLOR=#007700]>
        <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]SqlDataSource ID[/color][color=#007700]=[/color][color=#dd0000]"SqlDataSource1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]ConnectionString[/color][color=#007700]=[/color][COLOR=#dd0000]"<%$ ConnectionStrings:ConnectionString %>"
            [/COLOR][color=#0000bb]SelectCommand[/color][color=#007700]=[/color][color=#dd0000]"SELECT * FROM [MyTbl]"[/color][color=#007700]></[/color][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]SqlDataSource[/color][COLOR=#007700]>  
[/COLOR][/COLOR]

تحليل الكود السابق

- تم إدراج أداة DataList . وتم إدراج Label لعرض الأسماء من قاعدة البيانات .
* لعرض البيانات فى Label تم إستخدام طريقة inLine Server Tags لمزيد من المعلومات تفضل بزيارة هذا الموضوع
InLine Server Tags
- تم أيضاً إدراج أداة Hyperlink التى بدورها ستنفذ عملية الإنتقال للصفحة الثانية وكذلك نقل المتغير الذى ستتلقاه الصفحة الثانية وتدخله فى جملة الإستعلام وبناءاً عليه سيتم عرض البيانات
- وكذلك إدراج Label فى Header وذلك لتحسين المظهر ليس أكثر.
- كما تم إدارج اداة SqlDataSource لتكون مصدر البيانات للـ DataList .
بهذا نكون قد إنتهينا من العمل فى الصفحة الأولى .

الصفحة الثانية :-

كود تصميم الصفحة الثانية

كود :

[color=#000000][COLOR=#007700]<[/color][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]DetailsView ID[/color][color=#007700]=[/color][color=#dd0000]"DetailsView1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"50px" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"125px"[/color][COLOR=#007700]>
        </[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]DetailsView[/color][COLOR=#007700]>  
[/COLOR][/COLOR]

ضع فقط أداة DetailsView لعرض التفاصيل .

كود c#

تأكد أولاً أنك قد أضفت الآتى :-

كود :

[color=#000000][COLOR=#0000bb]using System[/color][color=#007700].[/color][color=#0000bb]Data[/color][COLOR=#007700];
[/COLOR][color=#0000bb]using System[/color][color=#007700].[/color][color=#0000bb]Data[/color][color=#007700].[/color][color=#0000bb]SqlClient[/color][COLOR=#007700];  
[/COLOR][/COLOR]

كود :

[color=#000000][COLOR=#007700]protected [/color][color=#0000bb]void Page_Load[/color][color=#007700]([/color][color=#0000bb]object sender[/color][color=#007700], [/color][color=#0000bb]EventArgs e[/color][COLOR=#007700])
    {
        if ([/COLOR][color=#0000bb]Request[/color][color=#007700].[/color][color=#0000bb]QueryString[/color][color=#007700][[/color][color=#dd0000]"id"[/color][color=#007700]]!= [/color][color=#0000bb]null [/color][COLOR=#007700])
        {
            [/COLOR][color=#0000bb]SqlConnection conn [/color][color=#007700]= new [/color][color=#0000bb]SqlConnection[/color][COLOR=#007700]();
            [/COLOR][color=#0000bb]conn[/color][color=#007700].[/color][color=#0000bb]ConnectionString [/color][color=#007700]= [/color][color=#0000bb]ConfigurationManager[/color][color=#007700].[/color][color=#0000bb]ConnectionStrings[/color][color=#007700][[/color][color=#dd0000]"ConnectionString"[/color][color=#007700]].[/color][color=#0000bb]ConnectionString[/color][COLOR=#007700];
            [/COLOR][color=#0000bb]SqlCommand comm [/color][color=#007700]= new [/color][color=#0000bb]SqlCommand[/color][COLOR=#007700]();
            [/COLOR][color=#0000bb]comm[/color][color=#007700].[/color][color=#0000bb]CommandText [/color][color=#007700]= [/color][color=#dd0000]"select * from MyTbl where Id = @id"[/color][COLOR=#007700];
            [/COLOR][color=#0000bb]comm[/color][color=#007700].[/color][color=#0000bb]Connection [/color][color=#007700]= [/color][color=#0000bb]conn[/color][COLOR=#007700];
            [/COLOR][color=#0000bb]comm[/color][color=#007700].[/color][color=#0000bb]Parameters[/color][color=#007700].[/color][color=#0000bb]AddWithValue[/color][color=#007700]([/color][color=#dd0000]"@id"[/color][color=#007700], [/color][color=#0000bb]Request[/color][color=#007700].[/color][color=#0000bb]QueryString[/color][color=#007700][[/color][color=#dd0000]"id"[/color][COLOR=#007700]]);
            [/COLOR][color=#0000bb]DataTable dt [/color][color=#007700]= new [/color][color=#0000bb]DataTable[/color][color=#007700]([/color][color=#dd0000]"MyTbl"[/color][COLOR=#007700]);
            [/COLOR][color=#0000bb]SqlDataAdapter SDA [/color][color=#007700]= new [/color][color=#0000bb]SqlDataAdapter[/color][color=#007700]([/color][color=#0000bb]comm[/color][COLOR=#007700]);
            [/COLOR][color=#0000bb]SDA[/color][color=#007700].[/color][color=#0000bb]Fill[/color][color=#007700]([/color][color=#0000bb]dt[/color][COLOR=#007700]);
            [/COLOR][color=#0000bb]DetailsView1[/color][color=#007700].[/color][color=#0000bb]DataSource [/color][color=#007700]= [/color][color=#0000bb]dt[/color][COLOR=#007700];
            [/COLOR][color=#0000bb]DetailsView1[/color][color=#007700].[/color][color=#0000bb]DataBind[/color][COLOR=#007700]();
       }
    }  
[/COLOR][/COLOR]

المصاعب التى واجهتنا :-
- كيف تجعل القيمة تتغير مع كل عنصر فى القائمة . أى أنك إذا قمت بتحديد العنصر الأول يعطيك بيانات الأول والثانى يعطيك بيانات الثانى وهكذا الحال مع بقية العناصر الموجودة فى القائمة.

ونرى هذا الأمر فى هذة الصورة

وكان الحل ان نضع مسار الصفحة الثانية ومعها قيمة الـ Id من القاعدة وبالتالى سيتغير مع تغير العنصر المختار من القائمة .
إلى هنا ننتهى من الدرس . ونسأل الله العون والتوفيق