تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
الجزء الثانى - إستدعاء دالة Server-Side من خلال Client-Side
#1
كاتب الموضوع : Ahmed Moosa

الجزء الثانى
العمل مع Web Service وكيفية العمل معها من خلال Ajax

لا تحتاج web service إلى الكثير من كتابة الأوامر حتى يتم الإتصال بها وتنفيذ امر ما . فهى نفس طريقة عمل PageMethods وهنا أقصد انه لابد من وجود Proxy كما أشرنا إليه فى الدرس السابق ولكن هذة المرة سيتم تقديم الدعم بما يعرف بــ Intel sense وستعمل مع web service وكانك تكتب كود C# او VB . كما بالشكل :




وذلك لإن Web service تدعم خاصية تسمى ScriptService والتى تسمح برؤية إسم
Web service class فى نطاق العمل مع اكواد JavaScript وبالتالى رؤية الدوال التى تم إنشائها داخل web service. وذلك عند تعريف ScriptService Attribute كما بالشكل :




وكما أشرنا إلى Proxy فسيتم إدراج الأوامر الخاصة به وإن شئت قل إدراج إعداداته بإستخدام أداة
Script Manager . وتعريف ملف Web service ضمن مجموعة Services التى تخدمها وتديرها هذة الاداة كما ترى بالشكل:


كود :
[color=#000000][COLOR=#0000bb]    [/color][color=#007700]<[/color][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]ScriptManager ID[/color][color=#007700]=[/color][color=#dd0000]"ScriptManager1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server"[/color][COLOR=#007700]>
        <[/COLOR][color=#0000bb]Services[/color][COLOR=#007700]>
            <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]ServiceReference Path[/color][color=#007700]=[/color][color=#dd0000]"~/WebService.asmx" [/color][COLOR=#007700]/>
        </[/COLOR][color=#0000bb]Services[/color][COLOR=#007700]>
    </[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]ScriptManager[/color][COLOR=#007700]>  
[/COLOR][color=#0000bb][/color][/COLOR]

وإذا ما أردت أن ترى أعدادت Proxy ما عليك سوا ان تقوم بتفعيل الخاصية
InlineScript = true ومن ثم رؤية View Source .

كود :
[color=#000000][COLOR=#0000bb][/color][color=#007700]<[/color][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]ServiceReference Path[/color][color=#007700]=[/color][color=#dd0000]"~/WebService.asmx" [/color][color=#0000bb]InlineScript [/color][color=#007700]=[/color][color=#dd0000]"true"  [/color][COLOR=#007700]/>  
[/COLOR][color=#0000bb][/color][/COLOR]

ومنها إلى JavaScript لنستدعيها ونستخدم ما نريد من الدوال المعرفه بها . مثال ذلك الدالة الإفتراضية
HelloWorld . ونجد ان آليه العمل واحدة فى اننا نجد أن لدينا داليتن وهما onsuccess و onfailed .

مثال مبسط :

كود :
[color=#000000][COLOR=#0000bb]WebService[/color][color=#007700].[/color][color=#0000bb]HelloWorld[/color][color=#007700]([/color][color=#0000bb]onsuccessFunction [/color][color=#007700], [/color][color=#0000bb]onFailedFunction [/color][COLOR=#007700]);  
[/COLOR][color=#0000bb][/color][/COLOR]

فى حين أن هناك دالتين بالأسماء السابقة قد تم تعريفهما من قبل ويعودان بالنتائج لعرضها .
فنجد أن :
WebService >> إسم Class المعرفه فى ملف Web Service .
HelloWorld << دالة توجد فى ملف Web Service .
onsuccessFunction >> دالة توجد فى نفس الملف فى كود JavaScript أو ملف منفصل كما سنرى وتعمل على إستقبال النتائج من الدالة HelloWorld فى حالة نجاح عملية الإتصال.
onFailedFunction >> دالة توجد فى نفس الملف فى كود JavaScript أو ملف منفصل كما سنرى وتعمل على إستقبال النتائج من الدالة HelloWorld فى حالة فشل عملية الإتصال .

إليك تمرين :

النتائج التى سنحصل عليها من التمرين :



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

مبدئياً سنعمل على فصل الاكواد عن بعضها فى ملفات منفصلة فسيكون لدينا ثلاث ملفات :
1. ملف Web service .
o وبه سنجد عملية الاتصال بقاعدة البيانات من خلال إستخدام LINQ to SQL
§ دالتين : احدهما لعرض بيانات فى DropDownList والآخرى لعرض التفاصيل.
2. ملفات التعامل مع قاعدة البيانات Linq to Sql .
o يتم إدراج جدول واحد لتيسير العمل فى هذا الدرس وهو جدول Categories من قاعدة البيانات الشهيرة Northwind .
3. ملف صفحة ASPX
o بها اداة بالطبع أداة ScriptManager وكذلك DropDownlist وأيضاً Div ليكون هو المساحة المستخدمه لعرض التفاصيل .
4. ملف Js
o بها pageLoad Event ويعمل هذا الحدث كـحدث onload للصفحة ويعمل فى حالة وجود ScriptManager لإنه من الأحداق التى تقدمه Ajax Life Cycle .
o أيضاً به دالتين :
§ الأولى : الإتصال بـWebService ومن ثم عرض النتائج فى DropDownList.
§ الثانية: الإتصال بـ WebService ومن ثم تمرير Parameter إليها والعودة بالبيانات التى تم إختيارها بناءاً على ما تم تمريره .


العمل فى خطوات :
1- قم بإنشاء صفحة aspx وضع بها DropDownlist وكذلك div وسترى المحتويات بالكامل بالأسفل.
2- قم بإختيار Linq to SQl وأدرج بها الجدول الذى تريد العمل معه .
3- قم بإنشاء Web Service وأنشئ بها دالتين ستجد التركيب الخاص بهم فيما يلى .
4- قم بإنشاء ملف Javascript وبه سنضع حدث pageLoad وكذلك دالتين لمحادثة web Service.
5- قم بضبط Script Manager من حيت تعريف ملفات scripts وكذلك ملفات Services .

والآن مع تركيب الملفات المستخدمة فى هذا التمرين :
صفحة .aspx

كود :
[color=#000000][COLOR=#0000bb][/color][color=#007700]<%@ [/color][color=#0000bb]Page Language[/color][color=#007700]=[/color][color=#dd0000]"C#" [/color][color=#0000bb]AutoEventWireup[/color][color=#007700]=[/color][color=#dd0000]"true" [/color][color=#0000bb]CodeFile[/color][color=#007700]=[/color][color=#dd0000]"WebServiceTest.aspx.cs" [/color][color=#0000bb]Inherits[/color][color=#007700]=[/color][color=#dd0000]"WebServiceTest" [/color][COLOR=#007700]%>

<![/COLOR][color=#0000bb]DOCTYPE html [/color][color=#007700]PUBLIC [/color][color=#dd0000]"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]html xmlns[/color][color=#007700]=[/color][color=#dd0000]"http://www.w3.org/1999/xhtml"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]head runat[/color][color=#007700]=[/color][color=#dd0000]"server"[/color][COLOR=#007700]>
    <[/COLOR][color=#0000bb]title[/color][color=#007700]></[/color][color=#0000bb]title[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]head[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]body[/color][COLOR=#007700]>
    <[/COLOR][color=#0000bb]form id[/color][color=#007700]=[/color][color=#dd0000]"form1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server"[/color][COLOR=#007700]>
    <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]ScriptManager ID[/color][color=#007700]=[/color][color=#dd0000]"ScriptManager1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server"[/color][COLOR=#007700]>
        <[/COLOR][color=#0000bb]Services[/color][COLOR=#007700]>
            <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]ServiceReference Path[/color][color=#007700]=[/color][color=#dd0000]"~/WebService.asmx" [/color][COLOR=#007700]/>
        </[/COLOR][color=#0000bb]Services[/color][COLOR=#007700]>
        <[/COLOR][color=#0000bb]Scripts[/color][COLOR=#007700]>
            <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]ScriptReference Path[/color][color=#007700]=[/color][color=#dd0000]"~/WebServiceScript.js" [/color][COLOR=#007700]/>
        </[/COLOR][color=#0000bb]Scripts[/color][COLOR=#007700]>
    </[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]ScriptManager[/color][COLOR=#007700]>
    <[/COLOR][color=#0000bb]div[/color][COLOR=#007700]>
       <[/COLOR][color=#0000bb]br [/color][COLOR=#007700]/>
       <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]DropDownList ID[/color][color=#007700]=[/color][color=#dd0000]"CategoriesDDL" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][COLOR=#dd0000]"server"  
                          [/COLOR][color=#0000bb]onchange [/color][color=#007700]=[/color][color=#dd0000]"GetDetails(this);" [/color][COLOR=#007700]>
        </[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]DropDownList[/color][COLOR=#007700]>
        <[/COLOR][color=#0000bb]br [/color][COLOR=#007700]/>
    </[/COLOR][color=#0000bb]div[/color][COLOR=#007700]>
    <[/COLOR][color=#0000bb]br [/color][COLOR=#007700]/>
    <[/COLOR][color=#0000bb]div id[/color][color=#007700]=[/color][color=#dd0000]"SomeDiv"[/color][COLOR=#007700]>
    </[/COLOR][color=#0000bb]div[/color][COLOR=#007700]>
    </[/COLOR][color=#0000bb]form[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]body[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]html[/color][COLOR=#007700]>  
[/COLOR][color=#0000bb][/color][/COLOR]



ملفات LINQ to SQL
بعد إدراج جدول Categories


كما سترى فى ملف WebService التالى إستخدام هذا الجدول لعرضه فى DropDownlist .
ملف WebService.asmx


كود :
[color=#000000][COLOR=#0000bb]using System[/color][COLOR=#007700];
[/COLOR][color=#0000bb]using System[/color][color=#007700].[/color][color=#0000bb]Collections[/color][color=#007700].[/color][color=#0000bb]Generic[/color][COLOR=#007700];
[/COLOR][color=#0000bb]using System[/color][color=#007700].[/color][color=#0000bb]Linq[/color][COLOR=#007700];
[/COLOR][color=#0000bb]using System[/color][color=#007700].[/color][color=#0000bb]Web[/color][COLOR=#007700];
[/COLOR][color=#0000bb]using System[/color][color=#007700].[/color][color=#0000bb]Web[/color][color=#007700].[/color][color=#0000bb]Services[/color][COLOR=#007700];

[/COLOR][COLOR=#ff8000]/// <summary>
/// Summary description for WebService
/// </summary>
[/COLOR][color=#007700][[/color][color=#0000bb]WebService[/color][color=#007700]([/color][color=#0000bb]Namespace [/color][color=#007700]= [/color][color=#dd0000]"http://mySite.com/"[/color][COLOR=#007700])]
[[/COLOR][color=#0000bb]WebServiceBinding[/color][color=#007700]([/color][color=#0000bb]ConformsTo [/color][color=#007700]= [/color][color=#0000bb]WsiProfiles[/color][color=#007700].[/color][color=#0000bb]BasicProfile1_1[/color][COLOR=#007700])]
[/COLOR][COLOR=#ff8000]// To allow this Web Service to be called from script, using ASP.NET  //AJAX, uncomment the following line.  
[/COLOR][color=#007700][[/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Web[/color][color=#007700].[/color][color=#0000bb]Script[/color][color=#007700].[/color][color=#0000bb]Services[/color][color=#007700].[/color][color=#0000bb]ScriptService[/color][COLOR=#007700]]
public class [/COLOR][color=#0000bb]WebService [/color][color=#007700]: [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Web[/color][color=#007700].[/color][color=#0000bb]Services[/color][color=#007700].[/color][color=#0000bb]WebService [/color][COLOR=#007700]{

    public [/COLOR][color=#0000bb]WebService [/color][COLOR=#007700]() {
        [/COLOR][COLOR=#ff8000]//Uncomment the following line if using designed components  
        //InitializeComponent();  
    [/COLOR][COLOR=#007700]}

    [[/COLOR][color=#0000bb]WebMethod[/color][COLOR=#007700]]
    public List<[/COLOR][color=#0000bb]Category[/color][color=#007700]> [/color][color=#0000bb]GetCategoriesByID[/color][color=#007700]([/color][color=#0000bb]int SelectedCategoryID[/color][COLOR=#007700])
    {
        [/COLOR][color=#0000bb]DataClassesDataContext dc [/color][color=#007700]= new [/color][color=#0000bb]DataClassesDataContext [/color][COLOR=#007700]();
        var [/COLOR][color=#0000bb]query [/color][color=#007700]= [/color][color=#0000bb]from q in dc[/color][color=#007700].[/color][COLOR=#0000bb]Categories
                    where q[/COLOR][color=#007700].[/color][color=#0000bb]CategoryID [/color][color=#007700]== [/color][COLOR=#0000bb]SelectedCategoryID
                    select q[/COLOR][COLOR=#007700];
        return [/COLOR][color=#0000bb]query[/color][color=#007700].[/color][color=#0000bb]ToList[/color][color=#007700]<[/color][color=#0000bb]Category[/color][COLOR=#007700]>();
    }

    [[/COLOR][color=#0000bb]WebMethod[/color][COLOR=#007700]]
    public List<[/COLOR][color=#0000bb]Category [/color][color=#007700]> [/color][color=#0000bb]GetCategoryName[/color][COLOR=#007700]()
    {
        [/COLOR][color=#0000bb]DataClassesDataContext dc [/color][color=#007700]= new [/color][color=#0000bb]DataClassesDataContext[/color][COLOR=#007700]();
        var [/COLOR][color=#0000bb]query [/color][color=#007700]= [/color][color=#0000bb]from q in dc[/color][color=#007700].[/color][COLOR=#0000bb]Categories
                    select q[/COLOR][COLOR=#007700];      
        return [/COLOR][color=#0000bb]query[/color][color=#007700].[/color][color=#0000bb]ToList[/color][color=#007700]<[/color][color=#0000bb]Category[/color][COLOR=#007700]>();
    }
}  
[/COLOR][color=#0000bb][/color][/COLOR]



ملف WebSeriveScripts.js


كود :
[color=#000000][COLOR=#0000bb][/color][color=#007700]function [/color][color=#0000bb]pageLoad[/color][COLOR=#007700]() {
      [/COLOR][color=#0000bb]FillDropdownlist[/color][COLOR=#007700]();
}

[/COLOR][COLOR=#ff8000]// Fill Drop Down list  
[/COLOR][color=#007700]function [/color][color=#0000bb]FillDropdownlist[/color][COLOR=#007700]() {
    var [/COLOR][color=#0000bb]DDl [/color][color=#007700]= [/color][color=#0000bb]document[/color][color=#007700].[/color][color=#0000bb]getElementById[/color][color=#007700]([/color][color=#dd0000]"CategoriesDDL"[/color][COLOR=#007700]);
    [/COLOR][color=#0000bb]WebService[/color][color=#007700].[/color][color=#0000bb]GetCategoryName[/color][color=#007700](function ([/color][color=#0000bb]data[/color][COLOR=#007700]) {
        for (var [/COLOR][color=#0000bb]i [/color][color=#007700]= [/color][color=#0000bb]0[/color][color=#007700]; [/color][color=#0000bb]i [/color][color=#007700]< [/color][color=#0000bb]data[/color][color=#007700].[/color][color=#0000bb]length[/color][color=#007700]; [/color][color=#0000bb]i[/color][COLOR=#007700]++) {
            var [/COLOR][color=#0000bb]myoption [/color][color=#007700]= new [/color][color=#0000bb]Option[/color][color=#007700]([/color][color=#0000bb]data[/color][color=#007700][[/color][color=#0000bb]i[/color][color=#007700]].[/color][color=#0000bb]CategoryName[/color][color=#007700], [/color][color=#0000bb]data[/color][color=#007700][[/color][color=#0000bb]i[/color][color=#007700]].[/color][color=#0000bb]CategoryID[/color][COLOR=#007700]);
            if ([/COLOR][color=#0000bb]DDl [/color][color=#007700]!= [/color][color=#0000bb]null[/color][COLOR=#007700]) {
                [/COLOR][color=#0000bb]DDl[/color][color=#007700].[/color][color=#0000bb]options[/color][color=#007700].[/color][color=#0000bb]add[/color][color=#007700]([/color][color=#0000bb]myoption[/color][COLOR=#007700]);
            }
            else {
                [/COLOR][color=#0000bb]alert[/color][color=#007700]([/color][color=#dd0000]"I have an Erro in DropDownlist Method"[/color][COLOR=#007700]);
            }
        }
        [/COLOR][color=#0000bb]GetDetails[/color][color=#007700]([/color][color=#0000bb]DDl[/color][COLOR=#007700]);
    },
    function ([/COLOR][color=#0000bb]err[/color][COLOR=#007700]) {
        [/COLOR][color=#0000bb]alert[/color][color=#007700]([/color][color=#0000bb]err[/color][color=#007700].[/color][color=#0000bb]get_message[/color][COLOR=#007700]());
    });
}

[/COLOR][COLOR=#ff8000]// Fill FillGridView list
[/COLOR][color=#007700]function [/color][color=#0000bb]GetDetails[/color][color=#007700]([/color][color=#0000bb]obj[/color][COLOR=#007700]) {
    var [/COLOR][color=#0000bb]SomeDiv [/color][color=#007700]= [/color][color=#0000bb]document[/color][color=#007700].[/color][color=#0000bb]getElementById[/color][color=#007700]([/color][color=#dd0000]"SomeDiv"[/color][COLOR=#007700]);
    var [/COLOR][color=#0000bb]val [/color][color=#007700]= [/color][color=#0000bb]obj[/color][color=#007700][[/color][color=#0000bb]obj[/color][color=#007700].[/color][color=#0000bb]selectedIndex[/color][color=#007700]].[/color][color=#0000bb]value[/color][COLOR=#007700];
    [/COLOR][color=#0000bb]WebService[/color][color=#007700].[/color][color=#0000bb]GetCategoriesByID[/color][color=#007700]([/color][color=#0000bb]val[/color][color=#007700], function ([/color][color=#0000bb]result[/color][COLOR=#007700]) {
        [/COLOR][color=#0000bb]SomeDiv[/color][color=#007700].[/color][color=#0000bb]innerHTML [/color][color=#007700]= [/color][color=#dd0000]"<span><b>Category ID </b>: " [/color][color=#007700]+ [/color][color=#0000bb]result[/color][color=#007700][[/color][color=#0000bb]0[/color][color=#007700]].[/color][color=#0000bb]CategoryID [/color][color=#007700]+ [/color][color=#dd0000]"</span><br/><span><b>Category Name </b>: " [/color][color=#007700]+ [/color][color=#0000bb]result[/color][color=#007700][[/color][color=#0000bb]0[/color][color=#007700]].[/color][color=#0000bb]CategoryName [/color][color=#007700]+ [/color][color=#dd0000]"</span>"[/color][COLOR=#007700];
    },
     function ([/COLOR][color=#0000bb]err[/color][COLOR=#007700]) {
         [/COLOR][color=#0000bb]alert[/color][color=#007700]([/color][color=#0000bb]err[/color][color=#007700].[/color][color=#0000bb]get_message[/color][COLOR=#007700]());
     });
}  
[/COLOR][color=#0000bb][/color][/COLOR]

إن واجهك شئ غامض فى الملفات السابقة قم بالعودة إلى أعلى لترى الوصف لهذة الملفات .

إلى هنا إنتهى الجزء الثانى مع
AJAX
}}}
تم الشكر بواسطة:


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  الفرق بين Response.Redirect و Server.Transfer eng_mohammed190 2 3,799 10-12-17, 12:49 PM
آخر رد: eng_mohammed190
  معرض صور ديناميكي بJquery و Asp.net وقاعدة البيانات Sql Server ….. محمد الساعدي 5 5,028 03-06-13, 12:29 PM
آخر رد: محمد الساعدي
  الجزء الأول- إستدعاء دالة Server-Side بإستخدام Client-Side RaggiTech 0 2,572 15-10-12, 11:16 AM
آخر رد: RaggiTech
  مقدمة تعريفية بـ ASP.Net- الجزء السادس - Page Class RaggiTech 0 2,119 15-10-12, 10:43 AM
آخر رد: RaggiTech
  مقدمة تعريفية بـ ASP.Net - الجزء الخامس--ِASP.Net Compilation RaggiTech 0 2,389 15-10-12, 10:41 AM
آخر رد: RaggiTech
  مقدمة تعريفيه بـ ASP.Net - الجزء الرابع-- Global.asax-Modules-Handlers RaggiTech 0 2,415 15-10-12, 10:39 AM
آخر رد: RaggiTech
  مقدمة تعريفيه بـ ASP.Net - الجزء الثالث-HttpContext -HttpApplication RaggiTech 0 2,300 15-10-12, 10:36 AM
آخر رد: RaggiTech
  مقدمة تعريفيه بـ ASP.Net - الجزء الثانى - ASP.Net Patterns RaggiTech 0 2,372 15-10-12, 10:34 AM
آخر رد: RaggiTech
  مقدمة تعريفية بـ ASP.Net - الجزء الأول RaggiTech 0 2,209 15-10-12, 10:30 AM
آخر رد: RaggiTech
  عمل Web Service خاصة بك من خلال .net - الجزء الثاني RaggiTech 0 2,554 14-10-12, 03:14 PM
آخر رد: RaggiTech

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم