معرفی کنترل ها و تکنیک های موجود در ASP.NET Ajax

[moji5]

مقدمه :

کنترل MutuallyExclusiveCheckBoxExtender يکي از ساده ترين کنترل هاي موجود در AjaxControlToolkit مي باشد.
همانطور که مي دانيد، يکي از راه هايي که مي توان به کاربر امکان انتخاب يک گزينه از ميان چندين گزينه را داد، استفاده ازدکمه هاي راديويي (Radio Buttons) مي باشد. دکمه هاي راديويي هنگامي که صفحه براي اولين بار بارگذاري مي شود، مي توانند انتخاب نشده باشند يعني هيچ گزينه اي از ميان گزينه ها انتخاب نشده باشد.
ولي پس از اينکه يکي از گزينه ها انتخاب شود ديگر امکان عدم انتخاب آن وجود ندارد و حتما بايد يکي از گزينه ها، انتخاب شده باقي بماند. اگر بتوان اين موضوع را يکي از محدوديت هاي مربوط به دکمه هاي راديويي دانست پس کنترل MutuallyExclusiveCheckBoxExtender براي رفع اين مشکل به وجود آمده است.
کنترل MutuallyExclusiveCheckBoxExtender همان طور که از نامش پيداست، يک Extender مي باشد و خود به تنهايي داراي شکل فيزيکي نمي باشد.
عملکرد اين کنترل از اينجا قابل مشاهده مي باشد.
شروع :

در اين مقاله قصد داريم صفحه اي ايجاد کنيم که چند عدد CheckBox در آن وجود داشته باشد و امکان انتخاب فقط يکي از آن ها در هر لحظه امکان پذير باشد.
به قطعه کد زير توجه فرماييد.

<asp:CheckBoxID="CheckBox1"runat="server"Text="CheckBox1"/>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtenderID="Mutually1"runat="server"
TargetControlID="CheckBox1"Key="MyKey"/>
<br/>
<asp:CheckBoxID="CheckBox2"runat="server"Text="CheckBox2"/>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtenderID="Mutually2"runat="server"
TargetControlID="CheckBox2"Key="MyKey"/>
<br/>
<asp:CheckBoxID="CheckBox3"runat="server"Text="CheckBox3"/>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtenderID="Mutually3"runat="server"
TargetControlID="CheckBox3"Key="MyKey"/>
<br/>
<asp:CheckBoxID="CheckBox4"runat="server"Text="CheckBox4"/>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtenderID="Mutually4"runat="server"
TargetControlID="CheckBox4"Key="MyKey"/>
همانطور که از قطعه کد بالا مشخص مي باشد، هر کنترل MutuallyExclusiveCheckBoxExtender به يک کنترل CheckBox اعمال مي شود و به ازاي هر يک CheckBox که قصد داريم در يک گروه قرار بگيرد(يعني يکي از گزينه هاي اين گروه را بتوان انتخاب نمود)، بايد يک کنترل MutuallyExclusiveCheckBoxExtender نيز به صفحه اضافه نمود.
در مثال بالا ما چهار عدد CheckBox داريم که قصد داريم به کاربر اين امکان را بدهيم تا فقط يکي از گزينه ها را انتخاب نمايد. ضمنا کاربر پس از انتخاب يکي از گزينه ها مي تواند از اين کار منصرف شده و گزينه انتخاب شده را از حالت انتخاب خارج سازد.
کنترل MutuallyExclusiveCheckBoxExtender داراي دو صفت مهم مي باشد که به معرفي آن ها مي پردازم.
TargetControlID : همانطور که از نام اين صفت مشخص مي باشد، اين صفت ID ي کنترل CheckBox ي را که قصد داريم اين کنترل به آن اعمال شود را نگهداري مي کند.
Key : براي اينکه بتوانيم چند عدد CheckBox را در يک گروه قرار دهيم، يعني فقط امکان انتخاب يکي از CheckBox هاي موجود در گروه را بدهيم، بايد يک نام به اين گروه نسبت دهيم. در اين صورت عملکرد MutuallyExclusiveCheckBoxExtender فقط به CheckBox هايي که داراي نام گروه مشابه هستند اعمال مي شود و به ساير CheckBox هاي موجود در صفحه اعمال نمي شود. صفت Key نام گروه را مشخص نگهداري مي کند. چهار کنترل MutuallyExclusiveCheckBoxExtender ي که در مثال بالا ما استفاده نموده ايم داراي صفت Key مي باشند که مقدار تمام آنها MyKey است. در حقيقت نام گروه MyKey مي باشد.

[moji5]

مقدمه :

معرفی این کنترل را با یک مثال آغاز می کنم. فرض کنید شما از یک فروشگاه کامپیوتری، یک قطعه سخت افزاری مانند کیبورد خریداری کرده اید و اکنون قصد دارید به وب سایت شرکت سازنده کیبور مراجعه و محصول خود را ثبت نموده و درایور آن رو دانلود کنید.
فرض کنید که شرکت سازنده کیبورد، محصولات دیگری را نیز مانند مانیتور، اسپیکر، ماوس و غیره در مدل های مختلف تولید می کند.
در نتیجه در سایت شرکت سازنده، شما باید ابتدا نوع محصول (برای شما کیبورد) و سپس مدل آن و در نهایت رنگ محصول را انتخاب نمایید تا محصول مورد نظر خود را ثبت نموده یا درایور مربوط به آن را دانلود نمایید.
شرکت سازنده محصول نیز قصد دارد که بهترین و راحت ترین روش را برای ثبت کردن محصولات خود به کاربران ارایه دهد.
یکی از بهترین و موثرترین روش های موجود استفاده از کنترل CascadingDropDown (و یا روش های مشابه) می باشد.
اگر به وب سایت شرکت فراسو مراجعه نمایید، خواهید دید که این شرکت نیز از این تکنیک استفاده نموده است.
در این مقاله من قصد داریم که این تکنیک را با استفاده از CascadingDropDown پیاده سازی کنیم.
همانطور که از نام کامل CascadingDropDownExtender مشخص می باشد، این کنترل یک Extender می باشد .
Extender ها در حقیقت یک کنترل مستقل نمی باشند ولی توانایی این را دارد که قابلیت هایی را به کنترل های موجود در ASP.NET بیفزایند.
CascadingDropDown نیز از این قاعده مستثنا نمی باشد و می تواند قابلیت هایی را به کنترل DropDown اضافه نماید.
در این مقاله قصد داریم مثالی را که ذکر شد، پیاده سازی کنیم.
در صفحه محصولات شرکت 3 عدد کنترل DropDown موجود می باشد که اولین کنترل لیست محصولات شرکت را نگهداری می کند. هنگامی که محصول مورد نظر انتخاب شد، کنترل DropDown پایینی از مدل های محصول انتخاب شده پر می شود.
و در نهایت هنگامی که مدل محصول نیز توسط کاربر انتخاب شد، DropDown پایینی آن، رنگ های مربوط به مدل انتخاب شده را نمایش می دهد. و بدین ترتیب کاربر می تواند در کمترین زمان و با بیشترین سهولت محصول مورد نظر خود را انتخاب نموده و سایر اعمال مورد نظر خود را انجام دهد.
شروع :

ابتدا بانک اطلاعاتی مربوط به محصولات را ایجاد خواهیم کرد. بانک اطلاعاتی ما شامل سه جدول می باشد.
جدول اول، نام و مشخصات انواع محصولات را نگهداری می کند (Products).
جدول دوم، مدل های مربوط به محصولات را نگهداری می کند (ProductModels).
جدول سوم، رنگ های مدل های محصولات را نگهداری می کند(ModelColors).
قبل از اینکه به تشریح مثال بپردازم ، ابتدا یک نگاه سطح بالا به نحوه انجام کار خواهم داشت .
اگر بخواهیم بدون استفاده از تکنیک های AJAX به پیاده سازی تکنیک فوق بپردازیم، سناریوی انجام کار به شکل زیر می باشد.

1. ابتدا اولین DropDown هنگام لود صفحه پر می شود که شامل نام محصولات تولید شده توسط شرکت می باشد. (این عمل با استفاده از یک دستور Select روی جدول Products انجام می شود)
2. کاربر از اولین DropDown، محصول مورد نظر خود را انتخاب می کند. پس از اینکه نام محصول مورد نظر کاربر انتخاب شد، یک دستور Select روی جدول حاوی مدل ها (ProductModels) اجرا می شود و DropDown دوم از لیست مدل های مربوط به محصول انتخاب شده، پر می شود.
3. کاربر از دومین DropDown ، مدل مربوط به محصول خود را انتخاب می کند و سپس یک دستور Select روی جدول حاوی رنگ ها (ModelColors) با توجه به مدل انتخاب شده زده می شود و DropDown سوم از رنگ های موجود پر می شود.
4. کاربر از سومین DropDown ، رنگ محصول خریداری شده توسط خود را انتخاب می کند و کار تمام است.

در CascadingDropDown نیز این مراحل اتفاق می افتد و فقط نحوه انجام کار تفاوت دارد که در ادامه مقاله به بررسی آن می پردازم.
اکنون به پیاده سازی تکنیک فوق می پردازم.
سه عدد کنترل DropDown به صفحه اضافه نموده و شکل ظاهری آن ها را مرتب می کنیم.
اولین کنترل DropDown ، مشخصات محصولات را نگهداری می کند. دومین کنترل مشخصات مدل های محصول انتخاب شده و سومین کنترل، مشخصات رنگ مدل انتخاب شده را نگهداری می کند.
قطعه کد مربوط به DropDown به شکل زیر می باشد.

<asp:DropDownListID="ddlProducts"runat="server"Width="240px"/>
<asp:DropDownListID="ddlModels"runat="server"Width="240px"/>
<asp:DropDownListID="ddlColors"runat="server"Width="240px"/>
خوب، اکنون نوبت به اضافه کرده کنترل های CascadingDropDown می باشد. با توجه به اینکه ما سه عدد DropDown در صفحه داریم که قرار است تکنیک را روی آن ها اجرا کنیم، باید سه عدد CascadingDropDown به صفحه اضافه کنیم.
اولین CascadingDropDown را به صفحه اضافه نموده و به شکل زیر تغییر می دهیم.

<ajaxToolkit:CascadingDropDownID="cddProducts"
runat="server"
TargetControlID="ddlProducts"
Category="Product"
PromptText="Choose a Product ...."
LoadingText="Please wait ..."
ServicePath="ProductsService.asmx"
ServiceMethod="GetProducts">
</ajaxToolkit:CascadingDropDown>
این کنترل CascadingDropDown مربوط به ddlProducts می باشد.
اکنون به معرفی صفات مهم CascadingDropDown می پردازم.
TargetControlID : نام کنترل DropDown هدف را که قرار است قابلیت های این CascadingDropDown به آن اعمال شود را نگهداری می کند ( در اینجا ddlProducts) .
Category: کاربرد این صفت را در ادامه مقاله خواهیم دید. هنگام فراخوانی متدی که عملیات بازیابی اطلاعات از بانک اطلاعاتی را انجام می دهد، مقدار این صفت به عنوان یکی از پارامتر ها ارسال می شود.
PromptText : قبل از اینکه کنترل های DropDown با داده های مربوط به خود پر شوند، متن این صفت در آن ها نمایش داده می شود.
LoadingText : با توجه به اینکه بازیابی اطلاعات از بانک اطلاعاتی، عملی زمانبر می باشد، در این مدت زمان، متنی که در این صفت وارد نموده ایم در DropDown مربوطه نمایش داده می شود.
ServicePath : با توجه به اینکه ما قصد داریم از سمت کلاینت، متدهای مربوط به پر کردن DropDown ها را فراخوانی کنیم، یک وب سرویس به نام ProductsService ایجاد نموده ایم که در ادامه برنامه بیشتر مورد بررسی قرار خواهد گرفت. این صفت مسیر مربوط به وب سرویس را نگهداری می کند.
ServiceMethod : این صفت نام متدی را که قرار است از وب سرویس مذکور فراخوانی شود را نگهداری می کند.
اکنون CascadingDropDown های مربوط به DropDown های دوم و سوم را اضافه می کنیم.

<ajaxToolkit:CascadingDropDownID="cddModels"
runat="server"
TargetControlID="ddlModels"
ParentControlID="ddlProducts"
Category="Model"
PromptText="Choose a Product Model...."
LoadingText="Please wait ..."
ServicePath="ProductsService.asmx"
ServiceMethod="GetModels">
</ajaxToolkit:CascadingDropDown>
<ajaxToolkit:CascadingDropDownID="cddColors"
runat="server"
TargetControlID="ddlColors"
ParentControlID="ddlModels"
Category="Color"
PromptText="Choose a Color...."
LoadingText="Please wait ..."
ServicePath="ProductsService.asmx"
ServiceMethod="GetColors">
</ajaxToolkit:CascadingDropDown>
همانطور که ملاحظه می کنید، این CascadingDropDown ها دارای یک صفت جدید می باشند که در کنترل CascadingDropDown قبلی که به صفحه اضافه کردیم، وجود نداشت.
ParentControlID : همانطور که قبلا ذکر شد، DropDown پایینی، با توجه به مقداری که در DropDown بالایی انتخاب شده است پر می شود. در نتیجه DropDown بالایی والد DropDown پایینی محسوب می شود. در حقیقت شما با مقدار دادن به این صفت مشخص می کنید که مقادیر این DropDown باید وابسته به کدام DropDown باشند. به طور مثال مقادیر ddlModels وابسته به مقدار انتخاب شده از ddlProducts توسط کاربر می باشد.
خوب، حالا نوبت به ایجاد یک وب سرویس و پیاده سازی متدهای مربوطه می باشد.
یک وب سرویس به نام ProductsService به پروژه اضافه می کنیم.
نکته :

برای اینکه به وب سرویس این امکان را بدهیم تا از سمت کلاینت فراخوانی شود، باید یک Attribute به نام [System.Web.Script.Services.ScriptService] را مطابق شکل زیر به ابتدای کلاس اضافه کنیم.
هنگامی که صفحه برای اولین بار لود می شود، اولین DropDown باید با لیست نام محصولات پر شود.

publicCascadingDropDownNameValue[] GetProducts(string knownCategoryValues, string category)
{
string Query = "SELECT ProductId,ProductName FROM Products";
List<CascadingDropDownNameValue> values = newList<CascadingDropDownNameValue>();
using (SqlConnection con = newSqlConnection(connectionString))
{
SqlCommand cmd = newSqlCommand(Query, con);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
string productName = (string)dr["ProductName"];
int productId = (int)dr["ProductID"];
values.Add(newCascadingDropDownNameValue(productName, productId.ToString()));
}
}
return values.ToArray();
}
}
قبلا از اینکه به تشریح عملکرد قطعه کد بالا بپردازم، ذکر چند نکته را ضروری می دانم.

1. هر کدام از CascadingDropDown ها هنگام فراخوانی متد مربوط به خود، دو پارامتر را به متد ارسال می کنند. پارامتر اول را ما knownCategoryValues نام نهادیم که شامل اطلاعاتی در مورد گزینه انتخاب شده از DropDown مربوطه می باشد. همانطور که در ابتدای مقاله ذکر کردم، در اینجا نیز باید دستور Select مناسب روی بانک اطلاعاتی اجرا شود که مشخصات آن توسط این پارامتر ارسال می شود. پارامتر دوم همان Category می باشد که قبلا هم از آن یاد کردیم، و مشخص می کند که DropDown انتخاب شده، مربوط به کدام Category می باشد.
2. مقدار برگشتی این متد، شامل آرایه ای از اشیاء CascadingDropDownNameValue می باشد که کنترل DropDown مربوطه به آن بایند می شود.
3. چون CascadingDropDown مربوط به این DropDown دارای ParentControlID نمی باشد، این کنترل پس از لود صفحه پر می شود و اگر دارای این صفت بود، تنها پس از اینکه مقدار والد آن توسط کاربر انتخاب می شد، این DropDown پر می شد(یعنی متد GetProducts فراخوانی می شد).

قطعه کد بالا دارای نکته خاص دیگری نمی باشد، به جز اینکه ما یک لیست از نوع CascadingDropDownNameValue اینجا نموده ایم و آن را با اطلاعات جدول Products پر کرده ایم و در نهایت لیست پر شده را به شکل آرایه برگردانده ایم.
ما از پارامتر های ارسال شده به این متد استفاده نکرده ایم.
مقدار پارامتر knownCategoryValues خالی می باشد. زیرا این متد پس از لود صفحه فراخوانی می شود و مقداری از DropDown هنوز انتخاب نشده است و دارای والدی هم نیست که مشخصات گزینه انتخاب شده والد، در آن نگهداری شده باشد.
پارامتر category نیز حاوی نام طبقه بندی DropDown که در نمای Markup مشخص نمودیم یعنی "Product" می باشد.
اکنون به قطعه کد زیر توجه فرمایید. این متد هنگام انتخاب یک گزینه از گزینه های ddlProducts فراخوانی می شود.

[WebMethod]
publicCascadingDropDownNameValue[] GetModels(string knownCategoryValues, string category)
{
StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValue s);
int productId = int.Parse(kv["Product"]);
string Query = "SELECT ModelId, ProductId, ModelName FROM ProductModels WHERE ProductId = @ProductId";
List<CascadingDropDownNameValue> values = newList<CascadingDropDownNameValue>();
using (SqlConnection con = newSqlConnection(connectionString))
{
SqlCommand cmd = newSqlCommand(Query, con);
cmd.Parameters.AddWithValue("@ProductId", productId);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{

values.Add(newCascadingDropDownNameValue((string)dr["ModelName"], dr["ModelID"].ToString()));
}
}
return values.ToArray();
}
}
در قطعه کد بالا، پارامتر knownCategoryValues دارای مقدار می باشد و مشخصات گزینه انتخاب شده از ddlProducts را نگهداری می کند. اکنون باید با توجه به محصول انتخاب شده، مشخصات مدل های مربوط به آن را به ddlProductModels بایند کنیم و نیاز داریم که شناسه (ProductId) محصول انتخاب شده را جهت استفاده در دستور Select در دسترس داشته باشیم.
کلاس CascadingDropDown دارای متدی به نام ParseKnownCategoryValuesString می باشد که مشخصات ذخیره شده در پارامتر knownCategoryValues را برای استفاده راحت تر، به شکل StringDictionary بر می گرداند.
نکته بسیار مهم :

در طول مقاله بعضی از کاربردهای صفت Category را که در CascadingDropDown مقدار دهی کردیم، ذکر کردم. یکی از کاربردهای دیگر این صفت این است که با استفاده از آن در قطعه کد بالا شناسه محصول انتخاب شده (در حقیقت ddlProducts.SelectedValue) را با استفاده از نام طبقه بندی cddProducts یعنی عبارت "Product" بدست آورده ایم و در عبارت Select از آن استفاده نموده ایم.

int productId = int.Parse(kv["Product"]);
اکنون نوبت به متد آخر، یعنی GetColors می رسد.

[WebMethod]
publicCascadingDropDownNameValue[] GetColors(string knownCategoryValues, string category)
{
StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValue s);
int modelId = int.Parse(kv["Model"]);
string Query = "SELECT ColorId, ColorName FROM ModelColors WHERE (ModelId = @ModelId)";
List<CascadingDropDownNameValue> values = newList<CascadingDropDownNameValue>();
using (SqlConnection con = newSqlConnection(connectionString))
{
SqlCommand cmd = newSqlCommand(Query, con);
cmd.Parameters.AddWithValue("@ModelId", modelId);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
values.Add(newCascadingDropDownNameValue((string)dr["ColorName"], dr["ColorID"].ToString()));
}
}
return values.ToArray();
}
}
عملکرد قطعه کد فوق نیز کاملا مشخص می باشد. این متد هنگامی فرخوانی می شود که مقداری از ddlProductModels انتخاب شود و در نتیجه متد یعنی لیست رنگ های مربوط به مدل انتخاب شده به کنترل ddlModelColors بایند می شود.
نکاتی مربوط به راندمان و امنیت :

همواره در مقالات خود سعی می کنم که آموزشی بودن و کاربردی بودن مقالات را در کنار هم در نظر بگیرم. ولی گاهی اوقات توجه زیاد به کاربردی بودن مقاله، ایجاد پیچیدگی هایی می کند که قسمت آموزشی بودن آن را تحت الشعاع قرار می دهد. لذا مخاطبین محترم هنگام استفاده از مطالب این مقاله و سایر مقالات در پروژه های کاربردی خود لطفا همه موارد مربوط به امنیت و راندمان و مدیریت خطا و غیره را نیز در نظر بگیرند.
برای سایت هایی با ترافیک بالا، بهتر است اطلاعات Cache شوند و بازیابی اطلاعات از Cache صورت گیرد. در غیر اینصورت، این ایده چندان جالب نمی باشد که با تغییر هر گزینه یک Query روی بانک اطلاعاتی اجرا شود.
بهتر است از StoredProcedure جهت بازیابی اطلاعات از بانک اطلاعاتی استفاده شود.
خوب، این مقاله نیز به پایان رسید و شما می توانید این تکنیک ارزشمند را در پروژه های خود پیاده سازی کنید.
قطعه کد کامل این مقاله از لینک بالای صفحه قابل دریافت می باشد.
ولی یک سوپرایز هم برای علاقه مندان پر و پا قرص Pure Ajax دارم.
در قطعه کد پایین بدون استفاده از کنترل CascadingDropDownExtender ، این تکنیک شبیه سازی شده است.
ولی نیمی از راه رو باید خودتان طی کنید (نوشتن متدهای وب سرویس و غیره)
نکته :

مقداری برگشتی از متدهای وب سرویس در این حالت IEnumerable در نظر گرفته شده است. مانند الگوی زیر :

[WebMethod]
publicIEnumerable<Product> GetProducts() {
// Implementation
}
[WebMethod]
publicIEnumerable<Model> GetModels(int modeId)
{
// Implementation
}
قطعه کد مربوط به صفحه اصلی نیز به شکل زیر می باشد.

<%@PageLanguage="C#" %>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>www.30sharp.com</title>
<scripttype="text/javascript">
var ddlProducts;
var ddlModel;
function pageLoad()
{
ddlProducts = $get("ddlProducts");
ddlModel = $get("ddlModel");

$addHandler(ddlProducts, "change", changeModel);
ProductsService.GetProducts(makeSuccess);
}
function makeSuccess(data)
{
BindDropDown(ddlProducts, data);
changeModel();
}
function changeModel()
{
ProductsService.GetModels(ddlProducts.value, modelSuccess);
}
function modelSuccess(data)
{
BindDropDown(ddlModel, data);
}

function BindDropDown(ddl, data)
{
ddl.options.length = 0;
var newOption;
for (var k=0;k < data.length; k ++)
{
newOption = new Option( data[k].Name, data[k].Id );
ddl.options.add( newOption );
}
}

</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:ScriptManagerID="ScriptManager1"runat="server">
<Services>
<asp:ServiceReferencePath="~/ProductsService.asmx"/>
</Services>
</asp:ScriptManager>

<labelfor="ddlProducts">Product:</label>
<selectid="ddlProducts"></select>

<br/><br/>

<labelfor="ddlModel">Model:</label>
<selectid="ddlModel"></select>


</div>
</form>
</body>
</html>

[moji5]

مقدمه :

کنترل AlwaysVisibleControlExtender، یکی از کنترل های ساده و در عین حال جالب موجود در AjaxControlToolkit می باشد.
همانطور که از نام این کنترل مشخص است، این کنترل از نوع کنترل های توسعه دهنده (Extender) می باشد. یعنی خود دارای شکل فیزیکی نبوده ولی می تواند به کنترل های استاندارد موجود در ASP.NET خواصی را اضافه کند.
حتما تاکنون در برخی سایت ها و بخصوص تالارهای گفتمان(Forums) با این صحنه روبرو شده اید که تا قبل از اینکه در سایت ثبت نام کنید یا در حقیقت لاگین کرده باشید، پیغامی همواره به شما نمایش داده می شود، مبنی بر اینکه برای استفاده از تمامی امکانات سایت باید عضو سایت شده باشید. واین پیغام در صفحه در محل بخصوصی نمایش داده می شود و به هنگام اسکرول کردن در صفحه، همواره در محل خود باقی می ماند.
به طور مثال پیغامی شبیه به شکل زیر تا زمانی که در سایت لاگین نکرده باشید همواره در قسمت بالا و سمت چپ صفحه نمایش داده می شود و اگر در صفحه به سمت پایین یا بالا اسکرول کنید، می بینید که پیغام مربوطه موقعیت خود را حفظ می کند.
کاربرد کنترل AlwaysVisibleControlExtender نیز در حقیقت ایجاد اینگونه پیام ها می باشد. بدیهی می باشد که این پیام ها می توانند دارای عکس و لینک و سایر عناصر HTML باشند.
پیش نمایش :

برای درک بهتر این موضوع می توانید به اینجا مراجعه کنید و با اسکرول نمودن در صفحه، عملکرد کنترل را مشاهده نمایید.
شروع :

خوب، برای شروع فرض می کنیم که یک کنترل Panel در صفحه داریم و قصد داریم که محتویات این Panel همواره در قسمت بالا و سمت چپ صفحه نمایش داده شود و هنگامی که کاربر در حال اسکرول نمودن صفحه می باشد، محتویات این Panel نیز موقعیت خود را حفظ نموده و همواره به کاربر نمایش داده شوند.
قطعه کد مربوط به Panel به شکل زیر می باشد.

<asp:PanelID="pnlAlwaysVisible"runat="server">
شما عضو نیستید، برای دسترسی کامل به سایت لطفا ثبت نام نمایید
</asp:Panel>
اکنون زمان اضافه کردن کنترل AlwaysVisibleControlExtender به صفحه فرا رسیده است. کنترل مربوطه را به صفحه اضافه نموده و به شکل زیر تغییر می دهیم.

<cc1:AlwaysVisibleControlExtenderID="AlwaysVisibleControlExtender1"runat="server"
TargetControlID="pnlAlwaysVisible"
VerticalSide="Top"
VerticalOffset="15"
HorizontalSide="Left"
ScrollEffectDuration=".2"
HorizontalOffset="25">
</cc1:AlwaysVisibleControlExtender>

اکنون به معرفی برخی خصوصیات مهم کنترل AlwaysVisibleControlExtender می پردازم.

• TargetControlID : همانند سایر کنترل های توسعه دهنده (Extender) موجود در مجموعه AjaxControlToolkit، این خصوصیت شناسه کنترلی را که قرار است ویژگی های AlwaysVisibleControlExtender به آن اعمال شود را نگهداری می کند. در مثال ما این شناسه مربوط به کنترل Panel ی است که قبلا به صفحه اضافه نموده ایم (pnlAlwaysVisible)
• VerticalSide : این صفت همانطور که از نام آن مشخص می باشد، مکان مورد نظر ما را در قسمت عمودی صفحه نگهداری می کند. مقادیر مجاز آن یکی از سه مورد Top ، Middle ، Bottom می باشد. با توجه به اینکه ما در این مثال می خواهیم محتویات Panel در قسمت بالا و سمت چپ صفحه نمایش داده شود، مقدار عمودی Top را به آن نسبت داده ایم. اگر می خواستیم که محتویات Panel در وسط صفحه نمایش داده شود باید مقدار Middle و برای نمایش در پایین صفحه باید مقدار Bottom را به آن نسبت می دادیم.
• HorizontalSide : این صفت مشابه صفت VerticalSide می باشد. با این تفاوت که این صفت مکان مورد نظر نمایش محتویات Panel را نسبت به افق (Horizontal) نگهداری می کند. مقادیر مجاز آن Left، Center ، Right می باشند. با توجه به اینکه ما می خواهیم محتویات Panel در قسمت بالا و سمت چپ صفحه نمایش داده شود، مقدار Left را به آن نسبت داده ایم.
• HorizontalOffset : در صورتی که بخواهیم کنترل پنل در هنگام نمایش به میزان معینی از لبه کناری (افقی) صفحه فاصله داشته باشد باید مقداری را بر حسب پیکسل به این صفت نسبت دهیم. در این مثال ما مقداد 25 را نسبت داده ایم پس این کنترل همواره به میزان 25 پیکسل از لبه سمت چپ صفحه فاصله خواهد داشت.
• VerticalOffset : این صفت نیز مشابه صفت HorizontalOffset می باشد با این تفاوت که این صفت فاصله کنترل Panel را با لبه عمودی صفحه نگهداری می کند (بالا یا پایین). در این مثال ما مقدار 15 را به آن نسبت داده ایم پس به میزان 15 پیکسل از لبه بالایی صفحه فاصله خواهد داشت.
• ScrollEffectDuration : هنگامی که کاربر در حال اسکرول در صفحه می باشد، مدت زمانی طول می کشد که پنل مورد نظر ما در موقعیت قبلی خود قرار بگیرد. این مدت زمان را برحسب ثانیه می توانید به صفت نسبت دهید. (برای امتحان می توانید به پیش نمایش صفحه در بالا مراجعه کنید و عملکرد آن را مشاهده نمایید)

تذکر :

هنگام استفاده از این کنترل دقت کافی را لحاظ کنید زیرا استفاده نادرست و نابجا از این کنترل می تواند باعث ایجاد دردسر و رنجش بازدید کننده سایت گردد.

[moji5]

مقدمه :

اگر به تازگی در سایت گوگل کلمه رایجی را جستجو کرده باشید، باید با صحنه ای مشابه شکل زیر مواجه شده باشید.
در حقیقت سایت گوگل با توجه به کاراکتر هایی که شما برای جستجو وارد نموده اید، لیستی از پیشنهاد ها را ارائه می کند. این لیست شامل کلماتی می باشد که توسط تعداد زیادی از کاربران مورد جستجو واقع شده اند.
در صورتی که کلمه و یا جمله مورد نظر شما در لیست پیشنهادات باشد، شما می توانید آن را از لیست پیشنهادات انتخاب نمایید.
کنترل AutoCompleteExtender جهت به وجود آوردن نمونه ساده تری از تکنیک ذکر شده در بالا مورد استفاده قرار می گیرد. این کنترل نیز جزو ساده ترین کنترل های موجود در AjaxControlToolkit می باشد.
کنترل AutoCompleteExtender همانطور که از نام آن پیداست جزو کنترل های توسعه گر (Extender) می باشد و قابلیت های خود را می تواند به یک کنترل TextBox اضافه نماید.
دموی برنامه:

برای نمایش دموی برنامه به اینجا مراجعه نمایید.
شروع :

یک کنترل TextBox به صفحه اضافه کنید و مطابق قطعه کد زیر تغییر دهید.

<asp:TextBoxID="myTextBox"runat="server"Width="363px"></asp:TextBox>
یک کنترل AutoCompleteExtender به صفحه اضافه نموده و مطابق زیر آن را تغییر دهید.

<ajaxToolkit:AutoCompleteExtenderrunat="server"
ID="autoComplete1"
TargetControlID="myTextBox"
ServicePath="AutoCompleteService.asmx"
ServiceMethod="GetCompletionList"
MinimumPrefixLength="2"
EnableCaching="true"
CompletionSetCount="10" >
</ajaxToolkit:AutoCompleteExtender>

اکنون به معرفی برخی صفات مهم کنترل AutoCompleteExtender می پردازم.

• TargetControlID : همانند سایر کنترل های موجود در مجموعه AjaxControlToolkit ، این صفت نام کنترلی را که قرار است خصوصیات آن توسعه پیدا کند (در اینجا myTextBox) نگهداری می کند.
• ServicePath : با توجه به اینکه ما قصد داریم زمانی که کاربر کلمه ای را در کنترل myTextBox تایپ می کند یک متد را از طریق وب سرویس فراخوانی کنیم، این صفت مسیر وب سرویس مورد نظر را نگهداری می کند. (در ادامه مقاله، وب سرویس مورد نظر را مشاهده خواهید نمود)
• ServiceMethod : این صفت نام متدی از وب سرویس را که قصد فراخوانی آن را داریم، نگهداری می کند.
• MinimumPrefixLength : این صفت مشخص می کند که کاربر حداقل باید چه تعداد کاراکتر را تایپ کند تا لیست پیشنهاد را به او نمایش دهیم. همانطور که ملاحظه می نمایید، در قطعه کد بالا ما عدد 2 را به این صفت نسبت داده ایم. در نتیجه از زمانی که کاربر 2 کاراکتر را تایپ نماید، نمایش لیست پیشنهادها آغاز می شود.
• EnableCaching : در صورتی که مقدار این صفت برابر true باشد، پس از نمایش لیست پیشنهادات به کاربر، این لیست در حافظه پنهان (cache) مرورگر کاربر ذخیره می شود و اگر کاربر کاراکترهای مورد نظر خود را مجددا تایپ نماید(تکراری)، لیست پیشنهادات از حافظه پنهان مرورگر استخراج می شود (به جای اینکه متد وب سرویس مجددا فراخوانی شود)
• CompletionSetCount : این صفت حداکثر تعداد پیشنهاداتی را که می توان به کاربر نمایش داده را نگهداری می کند. به طور مثال اگر مقدار آن برابر 10 باشد، حداکثر تعداد گزینه هایی که به کاربر نمایش داده می شود 10 عدد می باشد.

تذکر:

با توجه به اینکه در حال حاضر بسیاری از توسعه گران ایرانی از VS 2005 استفاده می کنند، مقالات مربوط به AJAX را معمولا سازگار با VS 2005 یعنی توسط ASP.NET AJAX 1.0 انجام می دهم. ولی در صورتی که شما از ورژن VS 2008 استفاده می کنید، بهتر است بدانید که چند صفت جدید به این کنترل اضافه شده است که امکان استفاده از CSS جهت بهبود ظاهر این کنترل را اینجاد نموده است.
اکنون زمان این است به وب سرویس مورد نظر خود را ایجاد کنیم.
یک وب سرویس به نام AutoCompleteService ایجاد نمایید و متد GetCompletionList را به شکل زیر به آن اضافه نمایید.

[System.Web.Script.Services.ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
publicclassAutoCompleteService : System.Web.Services.WebService
{
[WebMethod]
publicstring[] GetCompletionList(string prefixText, int count)
{
Random random = newRandom();
List<string> items = newList<string>(count);
for (int i = 0; i < count; i++)
{
char c1 = (char)random.Next(65, 90);
char c2 = (char)random.Next(97, 122);
char c3 = (char)random.Next(97, 122);
items.Add(prefixText + c1 + c2 + c3);
}
return items.ToArray();
}
}
متد GetCompletionList توسط کنترل AutoCompleteExtender فراخوانی می شود.
همانطور که ملاحظه می نمایید این متد دو پارامتر دارد. پارامتر اول کلمه ای است که کاربر در داخل کنترل TextBox تایپ نموده است و پارامتر دوم، حداکثر تعداد پیشنهاداتی است که می تواند به کاربر نمایش داده شود.
با توجه به اینکه ما در این مقاله قصد داریم به طور آزمایشی تعدادی پیشنهاد را نمایش دهیم، یک حلقه for ایجاد نموده ایم و داخل آن به اندازه حداکثر تعداد پیشنهاداتی که باید به کاربر نمایش داده شود، دیتای آزمایشی تولید نموده ایم و لیست پیشنهادات را به صورت آرایه ای از string ها برگردانده ایم.
ولی در پروژه های کاربردی شما باید با توجه به کاراکتر هایی که کاربر وارد نموده است، لیست پیشنهادات خود را نمایش دهید.
خوب کار تمام است و اکنون شما می توانید برنامه را اجرا نموده و عملکرد کنترل را مورد بررسی قرار دهید.

[moji5]

مقدمه :

کنترل MutuallyExclusiveCheckBoxExtender يکي از ساده ترين کنترل هاي موجود در AjaxControlToolkit مي باشد.
همانطور که مي دانيد، يکي از راه هايي که مي توان به کاربر امکان انتخاب يک گزينه از ميان چندين گزينه را داد، استفاده ازدکمه هاي راديويي (Radio Buttons) مي باشد. دکمه هاي راديويي هنگامي که صفحه براي اولين بار بارگذاري مي شود، مي توانند انتخاب نشده باشند يعني هيچ گزينه اي از ميان گزينه ها انتخاب نشده باشد.
ولي پس از اينکه يکي از گزينه ها انتخاب شود ديگر امکان عدم انتخاب آن وجود ندارد و حتما بايد يکي از گزينه ها، انتخاب شده باقي بماند. اگر بتوان اين موضوع را يکي از محدوديت هاي مربوط به دکمه هاي راديويي دانست پس کنترل MutuallyExclusiveCheckBoxExtender براي رفع اين مشکل به وجود آمده است.
کنترل MutuallyExclusiveCheckBoxExtender همان طور که از نامش پيداست، يک Extender مي باشد و خود به تنهايي داراي شکل فيزيکي نمي باشد.
عملکرد اين کنترل از اينجا قابل مشاهده مي باشد.
شروع :

در اين مقاله قصد داريم صفحه اي ايجاد کنيم که چند عدد CheckBox در آن وجود داشته باشد و امکان انتخاب فقط يکي از آن ها در هر لحظه امکان پذير باشد.
به قطعه کد زير توجه فرماييد.

<asp:CheckBoxID="CheckBox1"runat="server"Text="CheckBox1"/>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtenderID="Mutually1"runat="server"
TargetControlID="CheckBox1"Key="MyKey"/>
<br/>
<asp:CheckBoxID="CheckBox2"runat="server"Text="CheckBox2"/>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtenderID="Mutually2"runat="server"
TargetControlID="CheckBox2"Key="MyKey"/>
<br/>
<asp:CheckBoxID="CheckBox3"runat="server"Text="CheckBox3"/>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtenderID="Mutually3"runat="server"
TargetControlID="CheckBox3"Key="MyKey"/>
<br/>
<asp:CheckBoxID="CheckBox4"runat="server"Text="CheckBox4"/>
<ajaxToolkit:MutuallyExclusiveCheckBoxExtenderID="Mutually4"runat="server"
TargetControlID="CheckBox4"Key="MyKey"/>
همانطور که از قطعه کد بالا مشخص مي باشد، هر کنترل MutuallyExclusiveCheckBoxExtender به يک کنترل CheckBox اعمال مي شود و به ازاي هر يک CheckBox که قصد داريم در يک گروه قرار بگيرد(يعني يکي از گزينه هاي اين گروه را بتوان انتخاب نمود)، بايد يک کنترل MutuallyExclusiveCheckBoxExtender نيز به صفحه اضافه نمود.
در مثال بالا ما چهار عدد CheckBox داريم که قصد داريم به کاربر اين امکان را بدهيم تا فقط يکي از گزينه ها را انتخاب نمايد. ضمنا کاربر پس از انتخاب يکي از گزينه ها مي تواند از اين کار منصرف شده و گزينه انتخاب شده را از حالت انتخاب خارج سازد.
کنترل MutuallyExclusiveCheckBoxExtender داراي دو صفت مهم مي باشد که به معرفي آن ها مي پردازم.
TargetControlID : همانطور که از نام اين صفت مشخص مي باشد، اين صفت ID ي کنترل CheckBox ي را که قصد داريم اين کنترل به آن اعمال شود را نگهداري مي کند.
Key : براي اينکه بتوانيم چند عدد CheckBox را در يک گروه قرار دهيم، يعني فقط امکان انتخاب يکي از CheckBox هاي موجود در گروه را بدهيم، بايد يک نام به اين گروه نسبت دهيم. در اين صورت عملکرد MutuallyExclusiveCheckBoxExtender فقط به CheckBox هايي که داراي نام گروه مشابه هستند اعمال مي شود و به ساير CheckBox هاي موجود در صفحه اعمال نمي شود. صفت Key نام گروه را مشخص نگهداري مي کند. چهار کنترل MutuallyExclusiveCheckBoxExtender ي که در مثال بالا ما استفاده نموده ايم داراي صفت Key مي باشند که مقدار تمام آنها MyKey است. در حقيقت نام گروه MyKey مي باشد.

[moji5]

مقدمه :


یکی از مواردی که در چند ماه اخیر توسط بازدید کنندگان سایت 30sharp به طور مکرر عنوان شده است، سنگین شدن صفحات و پایین آمدن سرعت لود و کارایی صفحات، هنگام استفاده از ASP.NET AJAX می باشد.
قبل از اینکه این مقاله را آغاز کنم، لازم می دانم که به یاد آوری چند مطلب بپردازم. همیشه وقتی قرار باشد که یک تکنولوژی پیچیده، مورد استفاده همگان قرار گیرد، باید یک سری پارامتر ها را فدای ایجاد سهولت و سادگی نمود.
اصولا برنامه نویسی AJAX با هر کتابخانه ای (.... & Anthem & ASP.NET AJAX & Ajax Pro) اگر قرار باشد به بهترین نحو خود انجام شود، کار ساده ای نیست و نیازمند در نظر گرفتن مسایل بسیار زیادی از جمله امنیت، کارایی، سرعت، سازگار بودن با مرورگرهای مشهور، زیبایی وغیره می باشد. که باید با توجه به شرایط موجود، استراتژی مشخصی را اتخاذ کرد.
این موضوع نیازمند آن است که برنامه نویس تسلط نسبی بر کتابخانه ای که در حال استفاده از آن است داشته باشد. پس نمی توان راه حل واحدی را جهت رفع تمام مشکلات ارایه داد.
ولی در این بین، راه حل هایی کلی نیز وجود دارند که رعایت آنها باعث می شود که کارایی صفحات به طور چشمگیری افزایش یابد و سرعت لود صفحات چندین برابر گردد. در این مقاله به معرفی این نکات می پردازم.
آغاز :

ScriptManager و UpdatePanel دو تا از کنترل های بسیار مهم ASP.NET AJAX می باشند.
ScriptManager :

ScriptManager در حقیقت مغز متفکر کتابخانه ASP.NET AJAX می باشد. در صفحاتی که قرار است از ASP.NET AJAX استفاده شود، حتما باید یک کنترل ScriptManager در صفحه وجود داشته باشد. این کنترل با توجه به امکاناتی که از ASP.NET AJAX در صفحه استفاده شده است، اسکریپت های مورد نیاز برای انجام درست کارها از اسمبلی System.Web.Extensions.dll استخراج نموده و به صفحه اضافه می نماید.
کنترل ScriptManager دارای دو صفت مهم می باشد که در کارایی صفحات وب نقش بسیار مهمی دارند.

• ScriptMode
• LoadScriptsBeforeUI

هسته اصلی کتاب خانه ASP.NET AJAX یک فایل جاوا اسکریپت می باشد به نام MicrosoftAjax.js که در اسمبلی System.Web.Extensions.dll تعبیه شده است.
این فایل دارای دو نسخه می باشد به نام های MicrosoftAjax.js وMicrosoftAJAX.debug.js.
نسخه MicrosoftAJAX.debug.js بسیار سنگین تر از MicrosoftAjax.js می باشد و دارای مقدار کدهای زیادی جهت اعتبارسنجی و کامنت ها و غیره می باشد و مخصوص استفاده در زمان برنامه نویسی می باشد و امکاناتی جهت دیباگ نمودن و رفع مشکلات برنامه نویسی را دارا می باشد.
مثلا در نسخه MicrosoftAJAX.debug.js داخل متدهای این کتابخانه قطعه کدهایی نوشته شده است که نوع (Type) پارامترهایی را که به متد ارسال شده است را بررسی می کند و در صورتی که نوع مناسبی نباشد، خطای مشخصی را ایجاد می نماید و برنامه نویس متوجه اشتباه خود می گردد. ولی پس این که برنامه نوشته و به اندازه کافی آزمایش شد و نوبت به فاز Deployment رسید، دیگر نیاز نیست از این فایل استفاده شود.
نسخه MicrosoftAjax.js شامل قطعه کدهای مورد نیاز جهت دیباگ برنامه نیست و در نتیجه بسیار سبک تر می باشد. هنگامی که قرار است وب سایت به طور رسمی مورد استفاده قرار گیرد باید از این نسخه استفاده شود.
وظیفه خصوصیت ScriptMode در کنترل ScriptManager دقیقا همین است و با استفاده از این خصوصیت می توانیم مشخص کنیم که از کدام نسخه استفاده شود.
مقدار پیشفرض این خصوصیت Auto می باشد. وقتی مقدار آن Auto باشد، کنترل ScriptManager با توجه به نوع Deployment تصمیم می گیرد که از کدام نسخه استفاده نماید.
اگر وب سایت به صورت Release مورد Deploy واقع شده باشد، کترل ScriptManager از نسخه MicrosoftAjax.js استفاده می کند و اگر به صورت Debug مورد Deploy واقع شده باشد از نسخه MicrosoftAJAX.debug.js.
خصوصیت ScriptMode می تواند دو مقدار دیگر را نیز بپذیرد که با استفاده از آنها می توانیم به طور صریح به ScriptManager اعلام کنیم که از کدام نسخه استفاده نماید. اگر مقدار Release را به این خصوصیت نسبت دهیم، صرف نظر از هر چیزی، کنترل ScriptManager از نسخه MicrosoftAjax.js استفاده می نماید و اگر مقدار Debug را به آن نسبت دهیم صرف نظر از هر چیزی، کنترل ScriptManager از نسخه MicrosoftAJAX.debug.js. استفاده می نماید.
پیشنهاد می کنم که اگر وب سایت شما از لحاظ اسکریپتی دچار مشکل نیست، حتما مقدار ScriptManager =Release را برای این کنترل انتخاب نمایید. این موضوع به میزان زیادی در کارایی صفحات نقش دارد.

<asp:ScriptManager ID="ScriptManager1" ScriptMode="Release" ></asp:ScriptManager>
ضمنا به یاد داشته باشید که پس از اولین باری که صفحه لود شود، اسکریپت های لود شده، در حافظه مرورگر Cache می شوند.
خصوصیت مهم دیگری که به بررسی آن می پردازم، LoadScriptsBeforeUI می باشد.
شاید بدترین مشکلی که در مورد استفاده از جاوا اسکریپت در صفحات وب وجود داشته باشد، زمان لود فایل های جاوا اسکریپت می باشد. هنگام لود فایل های جاوا اسکریپت در حقیقت لود سایر عناصر صفحه متوقف می شود و در صورتی که این اسکریپت ها در ابتدای صفحه قرار داشته باشند، بازدید کنندگان سایت با صفحه ای سفید روبرو می شوند و تا زمان لود کامل اسکریپت ها این قضیه ادامه دارد. و پس از لود اسکریپت ها ، سایر عناصر HTML از قبلی متن ها و عکس ها شروع به لود شدن می کنند.
این مشکل در ASP.NET AJAX به این علت به وجود می آید که به طور پیشفرض، اسکریپت ها و منابع مورد نیاز ASP.NET و ASP.NET AJAX و AjaxControlToolkit و سایر Extender ها دقیقا پس از شروع تگ form قرار می گیرند و درنتیجه ابتدا کلیه این اسکریپت ها و منابع باید لود شوند تا نوبت به سایر عناصر صفحه برسد.
شکل زیر بیانگر این مطلب می باشد.
همانطور که در تصویر بالا ملاحظه می کنید، بسیار از اسکریپت ها دقیقا بعد از تگ form لود خواهند شد و همان مشکلی که در بالا ذکر شد، به وجود می آید.
راه حل این مشکل لود اسکریپت ها بعد از لود سایر عناصر صفحه می باشد و بهترین مکان برای اینکار، دقیقا قبل از بسته شده تگ body در انتهای صفحه می باشد.
البته با توجه به سیاست های سایت و بسیاری از عوامل دیگر، شاید شما نیاز داشته باشید که یک اسکریپت حتما در ابتدای صفحه لود شود (به همین دلیل در ابتدای مقاله ذکر کردم که با توجه به بسیاری از عوامل باید تصمیم گرفت!)
ولی در غالب موارد این موضوع مشکل خاصی به وجود نمی آورد و با انتقال اسکریپت ها به انتهای صفحه می توانید راندامان و سرعت لود صفحه را چندین برابر بالا ببریم.
تذکر :

• برخی اسکریپت ها (بخصوص اسکریت های مربوط به کنترل های AjaxControlToolkit) جهت ارسال کنترل های صفحه به مکان های مناسب خود استفاده می شوند و به همین دلیل باید در ابتدای صفحه لود شوند. در غیر اینصورت تا زمانی که صفحه به طور کامل لود نشده است، کنترل مورد نظر در محل مناسب خود قرار نمی گیرد. به طور مثال کنترل AlwaysVisibleControlExtender از اینگونه کنترل ها می باشد. به این دلیل توصیه می شود که مکان (position) ابتدایی این کنترل ها را در صفحه به طور صریح به شکل Relative یا absolute مشخص کنید.
• در مورد اسکریپت هایی که خود نیز قصد داریم به شکل یک فایل خارجی (مثلا Sample.js) به صفحه اضافه کنیم ، نیز بهتر است در انتهای صفحه قرار بگیرند.

کنترل ScriptManager دارای صفتی به نام LoadScriptsBeforeUI می باشد که مقدار پیشفرض آن true می باشد. همانطور که از نام این صفت پیداست ، هنگامی که مقدار آن true باشد، اغلب اسکریپت های مربوط به ASP.NET AJAX را در ابتدای صفحه لود می کند. برای اینکه این اسکرپت ها را به انتهای صفحه انتقال دهیم باید مقدار این صفت را false کنیم.

<asp:ScriptManager ID="ScriptManager1" ScriptMode="Release" LoadScriptsBeforeUI="false" />
با انجام این کار مقداری از اسکریپت ها به انتهای صفحه منتقل می شوند ولی متاسفانه بسیاری از اسکریپت ها همچنان در ابتدای صفحه باقی می مانند.
دلیل این امر این است که این اسکرپت ها توسط Page.ClientScript.RegisterClientScriptBlock رجیستر شده اند. کلاس Page داخل فضای نامی System.Web می باشد و دارای متدی به نام BeginFormRender می باشد. در داخل این متد، Client Script Block ها رندر می شوند. و این متد اسکریپت هایی را که رندر می کند، دقیقا بعد از تگ form در ابتدا صفحه قرار می دهد.
در شکل زیر شمای کلی این متد را ملاحظه می نمایید.

internal void BeginFormRender(HtmlTextWriter writer, string formUniqueID)

{

...

this.ClientScript.RenderHiddenFields(writer);

this.RenderViewStateFields(writer);

...

if (this.ClientSupportsJavaScript)

{

...

if (this._fRequirePostBackScript)

{

this.RenderPostBackScript(writer, formUniqueID);

}

if (this._fRequireWebFormsScript)

{

this.RenderWebFormsScript(writer);

}

}

this.ClientScript.RenderClientScriptBlocks(writer);

}


همانطور که ملاحظه می کنید این متد به شکل internal تعریف شده و قابل override شدن نیز نمی باشد. پس چگونه می توان این مشکل را حل نمود؟
راه حل این موضوع خارج از محدوده این مقاله می باشد ولی در صورتی که علاقه مند می باشید، می توانید یک مقاله عالی در این زمینه از آقای Omar Al Zabir را مطالعه کنید.
UpdatePanel:

صحبتی که در ابتدای مقاله در مورد آسان نمودن تکنولوژی های پیچیده نمودم، در مورد کنترل UpdatePanel کاملا صادق می باشد. عملکرد پشت صحنه این کنترل بسیار پیچیده می باشد ولی نحوه استفاده از آن بسیار آسان.
قبل از اینکه به بررسی نکات موجود در مورد UpdatePanel بپردازم، مختصری در مورد نحوه عملکرد آن صحبت می کنم.
هنگامی که یکی از کنترل های موجود در UpdatePanel درخواست Postback می کند یا به عبارت بهتری UpdatePanel را تریگر (Trigger) می کند، UpdatePanel محتوای خود را آپدیت می کند. بدین شکل که ابتدا محتوای کل ViewState صفحه را به سمت سرور ارسال می کند و پس از اینکه عملیات در سمت سرور به پایان رسید، مقدار ViewState جدید کل صفحه را به همراه محتویات جدید خود دریافت می کند.
با توجه به اینکه معمولا در صفحات وب، حجم عظیمی از ViewState تولید می شود، پس ارسال و دریافت این مقدار اطلاعات می تواند چیزی شبیه فاجعه به بار بیاورد.
به این دلیل پیشنهاد می شود که به UpdatePanel به عنوان آخرین راه حل نگاه کنید و نه اولین!
برای اطلاع بیشتر پیشنهاد می کنم این مقاله کوتاه و با ارزش را نیز مطالعه نمایید.
ولی سهولت بالای استفاده از این کنترل، عدم استفاده از آن را غیر ممکن نموده است و بنده در اینجا به معرفی برخی روش ها جهت بالا بردن راندمان آن می پردازم.
اولین موردی که باید بررسی شود، خصوصیت UpdateMode می باشد.
اگر چند UpdatePanel در صفحه داشته باشیم، هنگامی که محتوای یکی از آنها آپدیت می شود، به طور پیشفرض سایر UpdatePanel ها نیز محتوای خود را بروزرسانی می کنند. دلیل این امر همین خصوصیت UpdateMode است که مقدار پیشفرض آن Always می باشد.
به یاد داشته باشید که اولین کاری که در مورد UpdatePanel انجام می دهید این باشد که مقدار این خصوصیت را برای Conditional قرار دهید.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<ContentTemplate>
</asp:UpdatePanel>
با توجه به اینکه هنگامی که UpdatePanel تریگر می شود، تمام محتویات جدید خود را از سرور دریافت نموده و بروز رسانی می نماید، لذا سعی کنید که تعداد کنترل هایی که داخل UpdatePanel قرار می گیرند، حد اقل باشند. برای انجام این کار، کنترل هایی را که قرار است بروز رسانی شوند را داخل UpdatePanel قرار داده و کنترل هایی که دستور بروزرسانی را می دهند ،توسط

AsyncPostBackTrigger

در داخل UpdatePanel رجیستر شوند.
تا جایی که می توانید و به کار شما خدشه ای وارد نمی کند، سعی کنید خصوصیت EnableViewState کنترل های صفحه را برابر false قرار دهید.
یکی از معمول ترین استفاده هایی که از UpdatePanel می شود، قرار دادن کنترل GridView داخل آن می باشد. پس از انجام این کار، می توانیم عمل Paging را بدون انجام Postback کل صفحه، انجام دهیم.
کنترل GridView یکی از کنترل هایی است به مقدار بسیار زیادی ViewState تولید می کند. برای رفع این مشکل پیشنهاد می شود که حتما مقدار خصوصیت EnableViewState مربوط به این کنترل را برابر false قرار دهید. تنها مشکلی که این موضوع می تواند به وجود آورد این است که اگر صفحه Postback شود این کنترل مقادیر خود را از دست می دهد. برای رفع این مشکل پیشنهاد می شود که هنگامی که محتوای این کنترل را از دیتابیس برای اولین بار بازیابی نمودید، باید اطلاعات را Cache کنید تا در هنگام عمل Postback یا انجام عمل Paging، اطلاعات از حافظه Cache خوانده شوند و نه از دیتابیس.
امیدوارم نکات ذکر شده در این مقاله مورد استفاده شما قرار گرفته باشد.

[moji5]

مقدمه :

همانطور که احتمالا می دانید، یکی از کنترل هایی که استفاده از آن در داخل UpdatePanel امکان پذیر نمی باشد، کنترل FileUpload می باشد. کنترل FileUpload جهت آپلود نمودن فایل ها استفاده می شود. ازجمله مشکلاتی که این کنترل دارد، این است که هنگام انجام عمل آپلود باید کل صفحه مجددا بارگذاری گردد.
در ضمن، نمایش یک تصویر متحرک هنگام انجام عمل آپلود به سادگی امکان پذیر نمی باشد. این مشکل زمانی خود را نشان می دهد که عمل آپلود مقداری زمانبر باشد.
در نسخه ی منتشر شده از AJAX Control Toolkit در تاریخ 30 سپتامبر، دو کنترل جدید به این مجموعه اضافه شده اند که یکی از آن ها کنترل AsyncFileUpload می باشد. این کنترل جهت رفع مشکلاتی که قبلا به آن ها اشاره نمودم، ایجاد شده است.
در این مقاله به معرفی خصوصیات این کنترل می پردازم.
آغاز:

قبل از اینکه به معرفی این کنترل بپردازم، باید ذکر کنم که این کنترل هم در داخل و هم خارج از UpdatePanel قابل استفاده می باشد و به عبارت دیگر، نیازی به کنترل UpdatePanel ندارد.
کنترل AsyncFileUpload امکانات زیر را ارائه می کند:

• امکان انجام عمل آپلود، بدون نیاز به بارگذاری مجدد کامل صفحه وب
• امکان نمایش یک تصویر متحرک به کاربر ، هنگام انجام عمل آپلود
• ارائه رویدادهای (Events) مورد نیاز در سمت کلاینت و سرور، جهت اطلاع از وضعیت عملیات آپلود
• امکان انجام عملیات آپلود، بدون نیاز به کنترل UpdatePanel

اکنون به معرفی صفات و رویدادهای مهم کنترل AsyncFileUpload می پردازم:
صفات:

• CompleteBackColor: این صفت نام یک رنگ را می گیرد. اگر عملیات آپلود با موفقیت به پایان برسد، رنگ پس زمینه این کنترل برابر رنگی می شود که توسط این صفت مشخص شده است.
• ErrorBackColor: عملکرد این صفت شبیه صفت قبلی می باشد. با این تفاوت که اگر هنگام عملیات آپلود با شکست روبرو شود، رنگ پس زمینه کنترل، توسط این صفت مشخص می شود.
• UploadingBackColor : عملکرد این صفت شبیه نیز مشابه دو صفت قبلی می باشد. با این تفاوت که این رنگ در حین انجام عمل آپلود در پس زمینه کنترل نمایش داده می شود.
• ThrobberID: این صفت نام کنترلی را نگهداری می کند که هنگام انجام عمل آپلود نمایش داده شده و پس از آن ناپدید می گردد. معمولا این کنترل، یک تصویر متحرک می باشد.
• UploaderStyle: شکل ظاهری این کنترل توسط این صفت مشخص می شود. مقدار های مجاز برای این صفت Traditional و Modern می باشد. مقدار پیشفرض آن Traditional می باشد که ظاهر کنترل شبیه کنترل معمولی FileUpload می باشد. اگر مقدار این صفت Modern باشد، ظاهر زیباتری پیدا می کند. (ما در ادامه این مقاله از این صفت استفاده خواهیم نمود)

رویداد های سمت کلاینت:

• OnClientUploadComplete: این رویداد در سمت کلاینت و در صورتی که عمل آپلود با موفقیت انجام شود، اتفاق می افتد.
• OnClientUploadError: این رویداد در سمت کلاینت و در صورتی که هنگام عمل آپلود خطایی به وجود آید اتفاق می افتد.
• OnClientUploadStarted: این رویداد در سمت کلاینت و قبل از اینکه انجام عمل آپلود آغاز گردد، اتفاق می افتد.

رویداد های سمت سرور:

• UploadedComplete: این رویداد در سمت سرور و زمانی اتفاق می افتد که عمل آپلود با موفقیت انجام شده باشد.
• UploadedFileError: این رویداد در سمت سرور و زمانی اتفاق می افتد که عملیات آپلود با خطا روبرو شده باشد.

اکنون زمان استفاده از این کنترل فرا رسیده است.
یک صفحه جدید ایجاد نموده و کنترل AsyncFileUpload را به آن اضافه می نماییم. سپس قطعه کد آن را به شکل زیر تغییر می دهیم.
<asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>
<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server"
OnClientUploadError="uploadError"
OnClientUploadComplete="uploadComplete"
OnClientUploadStarted="uplaodStarted"
UploaderStyle="Traditional"
CompleteBackColor ="GreenYellow"
ErrorBackColor="Red"
UploadingBackColor="#CCFFFF"
ThrobberID="imgLoader"
OnUploadedComplete="AsyncFileUpload1_UploadedComplete"

/>

عملکرد قطعه کد بالا را قبلا توضیح داده ام.
در قسمت زیر رویدادهای سمت کلاینت را ملاحظه می نمایید.
<scripttype="text/javascript">
function uplaodStarted(sender) {
$get("<%=lblMessage.ClientID%>").style.color = "green";
$get("<%=lblMessage.ClientID%>").innerHTML = "File uploading started.";
}
function uploadComplete(sender) {
$get("<%=lblMessage.ClientID%>").style.color = "#33CCFF";
$get("<%=lblMessage.ClientID%>").innerHTML = "File Uploaded Successfully";
}
function uploadError(sender) {
$get("<%=lblMessage.ClientID%>").style.color = "red";
$get("<%=lblMessage.ClientID%>").innerHTML = "File upload failed.";
}
</script>

عملکرد توابع جاوا اسکریپت بالا کاملا مشخص می باشد.
و در قسمت زیر نیز رویداد سمت سرور AsyncFileUpload1_UploadedComplete را ملاحظه می نمایید.
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
//Delay time just for test!
System.Threading.Thread.Sleep(5000);

string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);
AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename);
}


در قطعه کد بالا، ما فایل مورد نظر را در پوشه ای به نام Uploads ذخیره نموده ایم. ضمنا برای نمایش عملکرد این کنترل، به اندازه 5 ثانیه تاخیر ایجاد نموده ایم.
خوب، کار تمام است. با اجرای برنامه بالا و انجام عمل آپلود با شکل هایی مشابه زیر مواجه خواهید شد.
شکل ظاهری کنترل:

شکل ظاهری کنترل هنگام شروع عمل آپلود:

شکل ظاهری کنترل هنگام اتمام موفقیت آمیز عمل آپلود:

شکل ظاهری کنترل هنگام ایجاد خطا هنگام انجام عمل آپلود:

[moji5]

در ادامه ی دو مقاله قبلی خود، در مورد بالا بردن راندمان و کارایی صفحات وب ASP.NET AJAX، در این مقاله یکی دیگر از تکنیک های جالب را مطرح می کنم.
قبل از شروع این مقاله، پیشنهاد می کنم که دومقاله قبلی را حتما مطالعه نمایید.

• نکات مهم جهت بهبود کارایی و سرعت لود صفحات در ASP.NET AJAX
• استفاده از خصوصیت جالب CompositeScript در ASP.NET Ajax 3.5 SP1

برای یادگیری این ترفند، ابتدا نیاز است که با رویدادهایی که هنگام استفاده از کنترل UpdatePanel مورد استفاده قرار می گیرد، آشنا شوید.
PageRequestManager :

PageRequestManager یک آبجک جاوا اسکریپت موجود در ASP.NET AJAX می باشد. وظیفه این آبجک مدیریت وظایف مربوط به UpdatePanel می باشد. به عنوان مثال، وقتی کنترلی در داخل یک UpdatePanel درخواست عمل Postback می کند، آبجک PageRequestManager وظیفه انجام این عمل را به عهده می گیرد و اطلاعاتی را در مورد وضعیت Postback انجام شده در اختیار برنامه نویس قرار می دهد که در ادامه این مقاله این اعمال را بررسی خواهیم نمود.
هنگامی که یک کنترل در داخل UpdatePanel درخواست عمل Postback می کند و یا به عبارت دیگر، کنترل UpdatePanel تریگر می شود، آبجکت PageRequestManager چند رویداد مهم سمت کلاینت (Client Side Event) را در اختیار برنامه نویس قرار می دهد که با استفاده از این رویداد ها می توان عمل Postback درخواست شده را مدیریت نمود.
به این دلیل این رویداد ها را سمت کلاینت می نامیم که در سمت کلاینت اتفاق می افتند و باید توسط کدهای جاوا اسکریپت به آن ها دسترسی پیدا نمود. در صورتی که با این اعمال آشنا نیستید، نگران نباشید و ادامه مقاله را پیگیری کنید.
فرض کنید که یک کنترل Button داخل UpdatePanel دارید که با کلیک شدن آن، زمان کلیک شدن در یک Label نمایش داده می شود.
هنگامی که کنترل Button کلیک شد، رویدادهای زیر قابل دسترس می باشند.

1. initializeRequest
2. beginRequest
3. pageLoading
4. pageLoaded
5. endRequest

قبل از اینکه به معرفی هر کدام از رویداد ها بپردازم، نظر شما را به شکل زیر که ترتیب رویدادهای اتفاق افتاده را نشان می دهد، جلب می کنم.
اگر با دقت به شکل بالا نگاه کنید، متوجه خواهید شده که بعد از رویداد pageLoaded ، رویدادی به نام load نیز وجود دارد که من در بالا اسمی از آن نبردم.
رویداد load توسط کلاس Sys.Application ، صرف نظر از این که صفحه در حال لود اولیه یا Refresh یا Asynchronous Postback و یا حتی Postback معمولی باشد اتفاق می افتد.
یعنی اگر صفحه برای اولین بار در حال لود شدن باشد و یا اینکه در حال Refresh شدن باشد و یا اگر یک UpdatePanel درخواست Postback نموده باشد، و یا حتی یک Postback معمولی درحال انجام باشد، این رویداد اتفاق می افتد.
با توجه به اینکه بررسی این رویداد در این مقاله مورد نظر بنده نمی باشد، بیش از این در مورد آن صحبت نمی کنم.
اکنون به بررسی رویداد های ذکر شده در بالا و نحوه کاربرد آنها می پردازم. (در ادامه این مقاله، استفاده از این رویداد ها را در کاربرد ملاحظه می کنید، پس نگران نباشید و مطالب را به دقت دنبال کنید.)
initializeRequest :

هنگامی که کنترلی در داخل UpdatePanel درخواست عمل Postback می کند (مثلا یک Button کلیک شود) ، ابتدا این رویداد رخ می دهد. در این رویداد هنوز درخواست عمل Postback به سرور ارسال نشده است و حتی آماده ارسال هم نشده است.
این رویداد بهترین مکان برای اعمالی همچون Cancel نمودن این درخواست می باشد. مثلا ممکن است که صفحه در حال حاضر در حال انجام عمل Asynchronous Postback می باشد(مثلا این Button قبلا کلیک شده و نتیجه آن هنوز برنگشته ولی کاربر مجددا Button را کلیک نموده است!)
عکس این عمل هم قابل انجام است و شما می توانید در خواست قبلی را Cancel کنید (در حقیقت Abort کنید) و به این درخواست جدید اجازه ارسال به سرور و پردازش بدهید.
در ادامه مقاله، نحوه استفاده از این رویداد و نحوده انجام اعمال فوق را خواهید دید.
beginRequest :

اگر در رویداد initializeRequest ، درخواست عمل Postback را Cancel نکرده باشیم. این رویداد اتفاق می افتد. در این رویداد درخواست عمل Postback، آماده برای ارسال به سمت سرور می باشد و دقیقا بعد از این رویداد است که درخواست به سرور ارسال می شود.
نکته:

اگر با عملکرد کنترل UpdateProgress آشنا باشید، باید بدانید که در این رویداد است که این کنترل نمایش داده می شود. اگر با عملکرد این کنترل آشنا نیستید، پیشنهاد می کنم که این مقاله را مطالعه نمایید.
pageLoading :

اگر عمل Postback با موفقیت انجام شده باشد(یعنی خطایی به وجود نیامده باشد) ، این رویداد رخ می دهد. این رویداد قبل از بروز رسانی محتویات UpdatePanel رخ می دهد. یعنی انجام عمل Postback با موفقیت انجام شده و محتویات جدید UpdatePanel به سمت کلاینت ارسال شده است ولی هنوز محتوای UpdatePanel بروز رسانی نشده است.
در این مقاله از این رویداد استفاده جالبی می کنیم.
pageLoaded :

این رویداد مشابه رویداد pageLoading می باشد با این تفاوت که این رویداد پس از بروزرسانی محتویات جدید UpdatePanel اتفاق می افتد.
endRequest :

صرف نظر از اینکه خطایی در انجام عمل Postback صورت گرفته باشد یا خیر، این رویداد همواره اتفاق می افتد.
نکات :

• به این دلیل است که Error Handling را همواره در این رویداد انجام می دهند.
• کنترل UpdateProgress در این رویداد مخفی می شود.

در قطعه کد زیر، نحوه استفاده از رویدادهای فوق را مشاهده می نمایید.

<script language="javascript" type="text/javascript">
var prm=Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(onInitializeRequest);
prm.add_beginRequest(onBeginRequest);
prm.add_pageLoading(onPageLoading);
prm.add_pageLoaded(onPageLoaded);
prm.add_endRequest(onEndRequest);
function onInitializeRequest(sender,args)
{
// if you want to abort the previous postback and continue new request
//use the following code
//if(prm.get_isInAsyncPostBack())
//{
// prm.abortPostBack();
//}

// if you want to cancel the new request and continue previous postback
//use the following code
//if(prm.get_isInAsyncPostBack())
//{
// args.set_cancel(true);
//}

alert('initializeRequest');
}

function onBeginRequest(sender,args)
{
alert('beginRequest');
}

function onPageLoading(sender,args)
{
alert('pageLoading');
}

function onPageLoaded(sender,args)
{
alert('pageLoaded');
}

function onEndRequest(sender,args)
{
alert('endRequest');
}


</script>
همانطور که ملاحظه می کنید در ابتدا با استفاده از Sys.WebForms.PageRequestManager.getInstance به آبجک PageRequestManager دسترسی پیدا کرده ایم و سپس رویدادهای مورد نظر خود را رجیستر نموده ایم.
قبل از ادامه مقاله، لطفا قطعه کد فوق را اجرا نمایید و عملکرد آن را مشاهده کنید. (قطعه کد کامل این مقاله از لینک بالای صفحه قابل دریافت می باشد.)
خوب، اکنون می رویم به سراغ هدف اصلی این مقاله یعنی بالا بردن راندمان UpdatePanel هایی که دارای کنترل GridView هستند.
هنگامی که UpdatePanel در حال بروز رسانی است، ASP.NET AJAX تمام اشیاء DOM موجود در UpdatePanel را Dispose نموده و سپس این کنترل را بروز رسانی می نماید.
دلیل این عمل این است که حافظه اختصاص یافته به این اشیاء آزاد شود. درست متوجه شدید! عمل مدیریت حافظه در جاوا اسکریپت هم وجود دارد و حتما باید مورد توجه قرار گیرد.
اکنون فرض کنید که یک کنترل GridView (یا کنترل های مشابه) داخل UpdatePanel وجود دارد و دارای عناصر زیادی می باشد. هنگام انجام عمل Paging و یا هر گونه بروز رسانی دیگر UpdatePanel ، ابتدا تمام اشیاء DOM موجود در GridView باید Dispose شوند و سپس عمل بروزرسانی UpdatePanel انجام شود که این عمل طبیعتا مدتی زمان می برد.
یکی از راه های بالا بردن سرعت بروز رسانی UpdatePanel ، در حقیقت دور زدن (Bypass) این عمل می باشد.
برای دور زدن این عمل ما باید در رویداد pageLoading یعنی دقیقا قبل از اینکه عمل بروز رسانی UpdatePanel انجام شود، محتویات داخل GridView را خالی کنیم.
این عمل به شکل زیر انجام می شود.

<script language="javascript" type="text/javascript">
var prm=Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoading(onPageLoading);
function onPageLoading(sender,args)
{
var gv=$get('<%= GridView1.ClientID %>');
gv.parentNode.removeChild(gv);
}
</script>
با استفاده قطعه کد بالا در حقیقت عمل Dispose شدن اشیاء را دور زده ایم و این کار انجام نمی شود و در نتیجه مدت زمانی قابل توجهی را صرفه جویی نموده ایم.
نکته:

اگر داخل UpdatePanel از کنترل هایی استفاده نموده اید که توسط کامپوننت های ASP.NET AJAX و یا behaviorها (شامل Extender ها) مورد استفاده قرار گرفته اند، تکنیک ذکر شده قابل استفاده نمی باشد. مثلا اگر داخل GridView از modalpopupextender استفاده نموده اید، این تکنیک برای شما کارایی نخواهد داشت.
همانطور که قبلا اشاره کردم، سعی کنید حتما خصوصیت EnableViewState کنترل GridView را برابر false قرار دهید.

[moji5]

تذکر :

مخاطبین اصلی این مقاله، افراد متوسط و پیشرفته در زمینه Javascript و Ajax در نظر گرفته شده اند.
مقدمه :

یکی از مهمترین و جالبترین ویژگی های موجود در زبان های شی گرا، ویژگی وراثت (Inheritance) می باشد.
در زبان های شی گرا از قبیل #C و JAVA و VB.NET خاصیت وراثت مبتنی بر کلاس ها (Class Based) می باشد. یعنی شما می توانید کلاس هایی بسازید که تمامی اعضایی که به صورت Public یا Protected در کلاس والد (Parent) می باشند را به ارث برده و مورد استفاده قرار دهند. به این کلاس ها، کلاس های فرزند(Child) گویند.
ولی در زبان جاوا اسکریپت سناریو به شکل متفاوتی است زیرا در این زبان در حقیقت کلاس وجود ندارد و کلاس به صورت شبیه سازی شده وجود دارد و وراثت به شکل مبتنی بر prototype یعنی prototype-based می باشد. و تمامی خصوصیات و متدها از آبجکت prototype به ارث می روند.
شروع :

ادامه مقاله را با طرح یک مثال ادامه می دهم.
فرض کنید کلاسی به نام حیوان خانگی (Pet) داریم و قصد داریم کلاسی به نام گربه (Cat) بنویسیم که از کلاس حیوان خانگی وراثت بگیرد و اعمال متداول را انجام دهد.
در این مقاله، خاصیت وراثت را ابتدا با استفاده از جاوا اسکریپ محض انجام خواهیم داد و سپس با استفاده از ASP.NET AJAX.
کلاس حیوان خانگی را به شکل زیر در نظر می گیریم.

Pet = function() {
this._name="";
this._age=0;
}
Pet.prototype = function() {
speak: function() {
throw Error("This method should be overridden by derived classes.");
}
}

در قطعه کد بالا ما کلاسی به نام Pet تعریف کرده ایم که دارای دو خصوصیت برای نگهداری نام و سن حیوان، می باشد و دارای یک متد به نام speak می باشد که پیاده سازی نشده است. و اگر این متد فراخوانی شود، خطایی تولید می شود و بیانگر این می باشد که این متد باید توسط کلاس فرزند override شود.
اکنون قصد داریم کلاسی به نام گربه بنویسیم که از کلاس بالا وراثت گرفته و متد speak را override نموده و صدای گربه را بر می گرداند.

Cat = function() {
//Call base class’s constructor
Pet.call(this);
}

//Inherit properties defined in prototype
Cat.prototype = new Pet();
//Override speak method
Cat.prototype.speak = function() {
return'Meeeooow'
}

در قطعه کد بالا آبجکت Cat از Pet وراثت گرفته است و سه عمل دیگر صورت گرفته است .

1. به ارث بردن خصوصیات تعریف شده در سازنده (Constructor) کلاس والد، به وسیله فراخوانی نمودن سازنده کلاس Pet در سازنده کلاس Cat
2. به ارث بردن خصوصیات تعریف شده در قسمت prototype کلاس والد. این عمل توسط ایجاد یک نمونه جدید از کلاس Pet و نسبت دادن آن به prototype کلاس Cat به وجود آمده است.
3. override نمودن متد speak

قطعه کد بالا به شکل زیر قابل استفاده می باشد.

var cat = new Cat();
cat.speak();

پیاده سازی وراثت توسط ASP.NET AJAX :

اکنون اعمالی را که توسط جاوا اسکریپت محض انجام دادیم را با استفاده از ASP.NET AJAX به شکل حرفه ای تری انجام خواهیم داد.
ابتدا کلاس Pet را می نویسیم

Type.registerNamespace('Samples')
Samples.Pet = function() {
this._name = '';
this._age = 0;
}
Samples.Pet.prototype = {
speak: function() {
throw Error("This method should be overridden by derived classes.");
}
}
Type.registerClass('Samples.Pet');

نکته قابل توجه در قطعه کد بالا این است که ما این کلاس را در یک فضای نامی به نام Samples قرار داده ایم.
اکنون کلاسی به نام Cat در یک فضای نامی به نام Samples ایجاد خواهیم نمود و از کلاس Pet وراثت خواهیم گرفت.

Type.registerNamespace('Samples');
Samples.Cat = function() {
Samples.Cat.initializeBase(this);
}
Sapmples.Cat.prototype = {
speak: function() {
return'Meeeooow';
}
}
Type.registerClass('Samples.Cat', Samples.Pet);

در قطع کد بالا ما در سازنده کلاس Cat با استفاده از متد initializeBase و ارسال this به عنوان پارامتر برای آن، کلیه خواص موجود در سازند کلاس والد یعنی Pet را به ارث برده ایم.
سپس متد speak را override نموده ایم. در انتهای قطعه کد، کلاس را رجیستر نموده ایم.
تذکر :

دقت داشته باشید که باید کلاس والد را به عنوان پارامتر دوم به متد registerClass ارسال کنیم.
خوب، فرض کنید که سازنده کلاس والد تعدادی پارامتر را به عنوان آرگومان دریافت می نماید. پس سازنده کلاس والد، یعنی Pet را به شکل زیر تغییر می دهیم.

Samples.Pet = function(name, age) {
this._name = name;
this._age = age;
}
در قطعه کد زیر در سازنده کلاس Cat ، ما پارامترها را دریافت نموده و به سازند کلاس والد یعنی Pet می فرستیم.

Samples.Cat = function(name, age) {
Samples.Cat.initializeBase(this, [name, age]);
}

همانطور که ملاحظه می نمایید، پارامترهای لازم را به شکل یک آرایه (Array) در پارامتر دوم تابع initializeBase ارسال نموده ایم.
قطعه کد فوق به شکل زیر قابل استفاده است.

var cat=new Cat('CatName',1)

اکنون فرض کنید که در متدی که override نموده ایم، قصد داریم متد مربوطه در کلاس والد را فرخوانی نماییم.
این عمل به شکل زیر قابل انجام است.

Samples.Cat.prototype = function() {
Samples.Cat.callBaseMethod(this, 'speak');
}

در قطعه کد بالا با استفاده از متد callBaseMethod این عمل انجام شده است. پارامتر اول this و پارامتر دوم نام متد مربوطه می باشد.
در صورتی که متد کلاس والد دارای پارامتر باشد، باید پارامتر ها را به شکل یک آرایه و به عنوان پارامتر سوم به متد callBaseMethod ارسال نماییم.

Samples.Cat.callBaseMethod(this, 'speak',[param1,param2,....] );
موفق باشید.

[mhkcoder]

سلام مطلب خوبی بود ولی کاش قبل از این که در خلال سورس نام منبع اصلی فاش بشه خودتون تو پست اول میگفتید .