السلام عليكم ورحمة الله
الجزء الثانى
العمل مع Web Service وكيفية العمل معها من خلال Ajax
كنا قد رأينا الدرس الأول من هذة السلسلة من هنـــــــــــــــــــــــــــا
للتذكير:
فى الدرس الأول تم التقديم لهذة الدروس على انها للأتصال بالـServer من خلال Client وذلك لمنع حدوث رحلة العودة من وإلى الخادم/العميل وهى ما نسمية PostBack مما قد يحسن أداء وجودة العمل مع الموقع الذى يعمل بهذة الطريقة فى الإتصال بقواعد البيانات .
المقدمة : هنا سنتعامل مع 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 << دالة توجد فى ملف Web Service .
onsuccessFunction >> دالة توجد فى نفس الملف فى كود 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.CategoryName, data.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 .
