الجزء الثالث : الإتصال بدوال Server-Side من خلال Client-Side

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

الجزء الثالث

Calling HttpHandler using Jquery.get () function

تذكير : من الدرس الأول والثانى تتضح الكثير من المفاهيم ولى أين نتجه وماذا أنهينا وماذا تبقى فيرجى العودة للمزيد .

مقدمة :

تتمتع Jquery بطريقة عمل خاصة مع Server وكذلك قواعد البيانات بأنواعها من خلال دوال Ajax .مثال get ,Ajax,Post,Load,getjson,getscript

ما ستعرفه فى درس اليوم :

- العمل مع HttpHandler وإسترجاع بيانات منه .

- كيفية الحصول على كود Html لأى أداة أثناء وقت التشغيل من خلال العمل مع دالة RenderControl .

-نقل اداة من ملف لملف آخر .

- المزيد من Linq

- الخوض قليلا فى Jquery .

أدوات درس اليوم :

- HttpHandler

- Linq to Sql

- Jquery

- C#

ونبدأ بالدالة الأولى وهى : get()

وظيفتها : الإتيان ببيانات من الخادم بإستخدام HTTP Get Request .وتعود ببيانات من نوع XMLHttpRequest .

ولك أن تعلم أنها حين تستخدم مع الصفحة من نوع aspx فإنها تعود بكامل محتويات الصفحة وكذلك ما يوجد فى حدث page load فقط . مما قد يدخل بيانات لا حاجة فيها .والإستخدام الأمثل لها هو إستخدامها مع HttpHandler .

ومثال مبسط لها كما يلى :

$.get(url);

بالطبع هى تعود بالناتج ولكن أين تضعه ؟ ليس فى أى مكان . وإنما نحتاج ان نستقبل الناتج هكذا :

$.get(url,function(result){
alert(result);
});

وبالطبع إن وجد هناك Parameters فإنها تكتب على هذا النحو :

$.get ( url , { param1 : value1 }, function(result){
alert(result);
});

تمرين :

ما ر أيك أن ننفذ التمرين السابق بإستخدام دالة get ولكن هذة المرة سنرى أشياء جديدة سنقوم بنقل GridView من HttpHandler إلى صفحة aspx وذلك من خلال هذة الدالة ولا حظ أن هذة GridView ستكون ممتلئه بالبيانات .

النتائج النهائية التى نريد الحصول عليها :

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

الجيد فى هذا الأمر أنه عند عرض مصدر الكود View Source فلن تجد فى الأصل أى محتويات ستجد الصفحة ليس بها GridView ولكن ستجد بها DropDownList ولكن فارغة وكذلك التنسقيات ليس لها أثر إلا فى ملف CSS . أما عن أكواد HTML الخاصة بأداتى DropDownlist و GridView فيتم الإتيان بهم من HttpHandler وإدراجهم للعرض فى الصفحة كما ترى أما عن حدث التحكم فى عرض التفاصيل عند إختيار أحد عناصر القائمة تمت معالجته بـ Jquery وكذلك تم حجز مكان فقط لأداة GridView بإستخدام Div ليشير فقط إلى مكان وضع هذة الأداة .

العمل فى خطوات : -

قم بإنشاء صفحة aspx وضع بها أداة DropDownlist وكذلك Div وأعطهم إسمائهم .

- قم بإنشاء HttpHandler وسنضع به شرطين إما أن نطلب منه إمددنا بيبيانات تخص اداة DropDownlist أو GridView وهى هى وظيفته معنا .

- قم بإنشاء LINQ to SQL وهذة من المفترض أن تكون لديك منذ الدرس السابق .

- قم بإنشاء ملف JavaScript والذى سنضع به دوال العمل مع Jquery .

- قم بإنشاء ملف CSS لتنسيق أداة GridView .

محتويات الصفحات السابق ذكرها : Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryGetMethod.aspx.cs" Inherits="JqueryGetMethod" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page </title>
     <link href="Style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="JqueryScripts.js" type="text/javascript"></script>
</head>
<body onload="FillDropDownList();">
    <form id="form1" runat="server">
    <div>
    <h3>Please Select your Category</h3>
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
    <br />
   <br />
    <div id="GridViewDiv"></div>
    </div>
    </form>
</body>
</html>

لاحظ ان هذة المحتويات هى التى ستراها عند عرض View Source أثناء تشغيل الصفحة كما سبق الذكر .

محتويات ملف JQueryScripts.js

$(document).ready(function () {

    $("#DropDownList1").change(function () {
        $.get("DataHandler.ashx", 
 { Name: "Details", ID: $(this).val() },
 function (data) {
          		  $("#GridViewDiv").html(data);
       	 });
    });
});
function FillDropDownList() {
    $.get("DataHandler.ashx?Name=DDL", function (result) {
        $("#DropDownList1").html(result);
    });
}

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

إلا انه يوجد إختلاف بسيط فى طريقة كتابة دالة get فى الملف حيث أنك ستجد اننا فى الدالة FillDropDownList تم الإعلان عن Parameters على أنها QueryString . وهى فى واقع الامر أياً كان شكلها فهى فى النهاية تمرر على انها QueryString . وستجد اننا فى حدث Change قد قمنا بتمرير هذة الـParameters بهذا الشكل : { Name: "Details", ID: $(this).val() } والواقع كما ذكرنا أنها ستمرر فى النهاية على أنها QueryString.

وكما رأيت إرسال الـParameters فهيا لنرى كيف تستقبل فى ملف HttpHandler وإليك محتوياته :

<%@ WebHandler Language="C#" Class="DataHandler" %>

using System;
using System.Web;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.IO;
using System.Web.UI.WebControls;
public class DataHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string Name = "";
        int ID = 0;
        if (context.Request["Name"] != null)
        {
            Name = context.Request["Name"];
        }
        if (context.Request["ID"] != null)
        {
            ID = Convert.ToInt32(context.Request["ID"]);
        }
        context.Response.ContentType = "text/plain";
        if (Name == "DDL")
        {
            var query = from q in new DataClassesDataContext().Categories
                        select new
                        {
                            CatergoyID = q.CategoryID,
                            CategoryName = q.CategoryName
                        };
            StringBuilder sb = new StringBuilder();
            foreach (var cat in query)
            {
                string option ="<option value=" + cat.CatergoyID + ">" + cat.CategoryName + "</option>";
                sb.Append(option);
            }
            context.Response.Write(sb.ToString());
        }
        else if (Name == "Details")
        {
            var query = from q in new DataClassesDataContext().Categories
                        where q.CategoryID == ID
                        select q;
            GridView gv = new GridView();
            gv.DataSource = query;
            gv.DataBind();

            StringBuilder sb = new StringBuilder();
            HtmlTextWriter htw = new HtmlTextWriter(new StringWriter(sb));
            gv.RenderControl(htw);

            context.Response.Write(sb.ToString());
        }
        else
        {
            context.Response.Write("Nothing");
        }
    }
    public bool IsReusable
    {
        get  {  return true;  }
    }
}

ليس به شئ جديد إلا فكرة بسيطة وهى إنشاء GridView إثناء وقت التشغيل وملئها بالبيانات ثم الحصول على اكواد HTML الخاصة بها ومن ثم تمريرها إلى الصفحة حسب الطلب وأقصد هذة الأسطر :

 StringBuilder sb = new StringBuilder();
HtmlTextWriter htw = new HtmlTextWriter(new StringWriter(sb));
gv.RenderControl(htw);

ومن ثم الإرسال بهذة الأمر :

context.Response.Write(sb.ToString());

أما عن عرض التنسيقات لهذة الآداة وأقصد GridView فهى تاتى كأى تنسيقات عادية فى ملف CSS كالتالى :

th
{
    background-color: Maroon;
    color: White;
    font-size: medium;
}
tr
{
    background-color: Olive;
}

من هذا : هل تعلم ان أداة GridView يتم عمل Render لها على انها Table كأى جدول عادى فهنا نحدد Table Heading و Table Row .

الخلاصة :

تعرفت على الدالة get وما تقدمه من الإتصال بالخادم والعودة ببيانات منه ومن ثم عرضها فى الصفحة للمستخدم , وأيضاً تعرفت على كيفية الحصول على أكواد Html لأى أداة من خلال إستخدام الدالة RenderControlويجب عليك التمرين علبها أكثر وأكثر فسيأتى يوم تريد أن ترسل GridView إلى البريد الإلكترونى أو تقوم بتصديرها إلى PDF أو أى نوع ملف آخر .كذلك إقتربنا اكثر من HttpHandler بعد أن أشرنا إليه فى الدرس الأول فقط . أيضاً قد تكون لاحظت المرونة التى تقدمها Jquery.

لاشك أن رأيك يهمنى كثيراً وربما يضيف جديد . أرنا تفاعلك مع الدرس هل قمت بالتطبيق ؟ .

ونكمل إن شاء الله المرة القادمة لمعرفة باقى الدوال والفرق بينهم وبعض الحيل

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