الجزء الثانى : إستدعاء دالة Server-side من خلال Client -Side

السلام عليكم ورحمة الله

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

للتذكير:
فى الدرس الأول تم التقديم لهذة الدروس على انها للأتصال بالـServer من خلال Client وذلك لمنع حدوث رحلة العودة من وإلى الخادم/العميل وهى ما نسمية PostBack مما قد يحسن أداء وجودة العمل مع الموقع الذى يعمل بهذة الطريقة فى الإتصال بقواعد البيانات .

يمكنك تحميل الدرس بصيغة PDF من هنــــــــــــــــا

المقدمة : هنا سنتعامل مع Web Service وكيفية العمل مع قواعد البيانات من خلال LINQ to SQL وكذلك فصل الأكواد عن بعضها البعض

الدرس :

لا تحتاج 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 التى تخدمها وتديرها هذة الاداة كما ترى بالشكل:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebService.asmx" />
        </Services>
    </asp:ScriptManager>

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

<asp:ServiceReference Path="~/WebService.asmx" InlineScript ="true"  />

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

مثال مبسط :


WebService.HelloWorld(onsuccessFunction , onFailedFunction );

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

إليك تمرين :

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

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

مبدئياً سنعمل على فصل الاكواد عن بعضها فى ملفات منفصلة فسيكون لدينا ثلاث ملفات :
– ملف Web service .
o وبه سنجد عملية الاتصال بقاعدة البيانات من خلال إستخدام LINQ to SQL
 دالتين : احدهما لعرض بيانات فى DropDownList والآخرى لعرض التفاصيل.
– ملفات التعامل مع قاعدة البيانات Linq to Sql .
o يتم إدراج جدول واحد لتيسير العمل فى هذا الدرس وهو جدول Categories من قاعدة البيانات الشهيرة Northwind .
– ملف صفحة ASPX
o بها اداة بالطبع أداة ScriptManager وكذلك DropDownlist وأيضاً Div ليكون هو المساحة المستخدمه لعرض التفاصيل .
– ملف 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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebServiceTest.aspx.cs" Inherits="WebServiceTest" %>

<!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">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebService.asmx" />
        </Services>
        <scripts>
            <asp:ScriptReference Path="~/WebServiceScript.js" />
        </Scripts>
    </asp:ScriptManager>
    <div>
       <br />
       <asp:DropDownList ID="CategoriesDDL" runat="server" 
                          onchange ="GetDetails(this);" >
        </asp:DropDownList>
        <br />
    </div>
    <br />
    <div id="SomeDiv">
    </div>
    </form>
</body>
</html>




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

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


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

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

    public WebService () {
        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

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

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


ملف WebSeriveScripts.js

function pageLoad() {
      FillDropdownlist();
}

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

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

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

إلى هنا إنتهى الجزء الثانى مع AJAX .

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s