ASP.NET - کنترل های سفارشی

ASP.NET به کاربران اجازه می دهد تا کنترل ها را ایجاد کنند. این کنترل های تعریف شده توسط کاربر به دو دسته تقسیم می شوند:کنترل های کاربرکنترل های سفارشیکنترل های کاربرکنترل‌های کاربر مانند صفحات کوچک ASP.NET یا فرم‌های وب عمل می‌کنند که می‌توانند توسط بسیاری از صفحات دیگر استفاده شوند. اینها از کلاس System.Web.UI.UserControl مشتق شده اند. این کنترل ها دارای ویژگی های زیر هستند:آنها پسوند .ascx دارند.آنها ممکن است حاوی هیچ تگ <html>، <body> یا <form> نباشند.آنها یک دستورالعمل کنترل به جای یک دستورالعمل صفحه دارند.برای درک مفهوم، اجازه دهید یک کنترل کاربر ساده ایجاد کنیم که به عنوان پاورقی برای صفحات وب کار می کند. برای ایجاد و استفاده از کنترل کاربر، مراحل زیر را انجام دهید:یک برنامه وب جدید ایجاد کنید.روی پوشه پروژه در Solution Explorer کلیک راست کرده و Add New Item را انتخاب کنید.Web User Control را از کادر محاوره ای Add New Item انتخاب کنید و نام آن را footer.ascx بگذارید. در ابتدا، footer.ascx فقط حاوی یک دستورالعمل کنترل است.<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="footer.ascx.cs" Inherits="customcontroldemo.footer" %>کد زیر را به فایل اضافه کنید:<table> <tr> <td align="center"> Copyright ©2010 TutorialPoints Ltd.</td> </tr> <tr> <td align="center"> Location: Hyderabad, A.P </td> </tr></table>برای افزودن کنترل کاربر به صفحه وب خود، باید دستورالعمل Register و نمونه ای از کنترل کاربر را به صفحه اضافه کنید. کد زیر فایل محتوا را نشان می دهد:<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="customcontroldemo._Default" %> <%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %><!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> Untitled Page </title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Welcome to ASP.Net Tutorials "></asp:Label> <br /> <br /> <asp:Button ID="Button1" runat="server" ="Button1_Click" Text="Copyright Info" /> </div> <Tfooter:footer ID="footer1" runat="server" /> </form> </body></html>هنگام اجرا، صفحه فوتر را نشان می دهد و این کنترل می تواند در تمام صفحات وب سایت شما استفاده شود.موارد زیر را رعایت کنید:(1) دستورالعمل Register یک نام تگ و همچنین پیشوند تگ را برای کنترل مشخص می کند.<%@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" %>(2) هنگام افزودن کنترل کاربر در صفحه باید از نام تگ و پیشوند زیر استفاده شود:<Tfooter:footer ID="footer1" runat="server" />کنترل های سفارشیکنترل های سفارشی به عنوان مجموعه های فردی مستقر می شوند. آنها در یک کتابخانه پیوند پویا (DLL) کامپایل شده و به عنوان هر کنترل سرور ASP.NET دیگر استفاده می شوند. آنها می توانند به یکی از روش های زیر ایجاد شوند:با استخراج یک کنترل سفارشی از یک کنترل موجودبا ایجاد یک کنترل سفارشی جدید که دو یا چند کنترل موجود را ترکیب می کند.با استخراج از کلاس کنترل پایه.برای درک مفهوم، اجازه دهید یک کنترل سفارشی ایجاد کنیم، که به سادگی یک پیام متنی در مرورگر ارائه می دهد. برای ایجاد این کنترل، مراحل زیر را انجام دهید:یک وب سایت جدید ایجاد کنید. روی راه حل (نه پروژه) در بالای درخت در Solution Explorer کلیک راست کنید.در کادر محاوره‌ای پروژه جدید، ASP.NET Server Control را از قالب‌های پروژه انتخاب کنید.در کادر محاوره‌ای پروژه جدید، ASP.NET Server Control را از قالب‌های پروژه انتخاب کنید.مرحله بالا یک پروژه جدید اضافه می کند و یک کنترل سفارشی کامل به راه حل ایجاد می کند که ServerControl1 نامیده می شود. در این مثال، اجازه دهید نام پروژه را CustomControls بگذاریم. برای استفاده از این کنترل، قبل از ثبت آن در یک صفحه، باید به عنوان مرجع به وب سایت اضافه شود. برای افزودن یک مرجع به پروژه موجود، روی پروژه (نه راه حل) کلیک راست کرده و روی Add Reference کلیک کنید.پروژه CustomControls را از تب Projects در کادر گفتگوی Add Reference انتخاب کنید. Solution Explorer باید مرجع را نشان دهد.برای استفاده از کنترل در یک صفحه، دستور Register را درست در زیر دستورالعمل @Page اضافه کنید:<%@ Register Assembly="CustomControls" Namespace="CustomControls" TagPrefix="ccs" %>علاوه بر این، می توانید از کنترل، مشابه هر کنترل دیگری استفاده کنید.<form id=&quotform1&quot runat=&quotserver&quot> <div> <ccs:ServerControl1 runat=&quotserver&quot Text = &quotI am a Custom Server Control&quot /> </div> </form> هنگامی که اجرا می شود، ویژگی Text کنترل بر روی مرورگر به شکل زیر نمایش داده می شود:کار با کنترل های سفارشیدر مثال قبلی، مقدار خاصیت Text کنترل سفارشی تنظیم شد. هنگامی که کنترل ایجاد شد، ASP.NET به طور پیش فرض این ویژگی را اضافه کرد. کد زیر پشت فایل کنترل این را نشان می دهد.using System;using System.Collections.Generic;using System.ComponentModel;using System.Linq;using System.Text;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace CustomControls{ [DefaultProperty("Text")] [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1 >")] public class ServerControl1 : WebControl { [Bindable(true)] [Category("Appearance")] [DefaultValue("")] [Localizable(true)] public string Text { get { String s = (String)ViewState["Text"]; return ((s == null) ? "[" + this.ID + "]" : s); } set { ViewState["Text"] = value; } } protected override void RenderContents(HtmlTextWriter output) { output.Write(Text); } }}کد بالا به طور خودکار برای یک کنترل سفارشی تولید می شود. رویدادها و متدها را می توان به کلاس کنترل سفارشی اضافه کرد.مثالاجازه دهید کنترل سفارشی قبلی با نام SeverControl1 را گسترش دهیم. اجازه دهید روشی به نام checkpalindrome به آن بدهیم که به آن قدرت می‌دهد تا برای پالیندروم‌ها را بررسی کند.پالیندروم ها کلمات/اصطلاحاتی هستند که وقتی معکوس می شوند یکسان می نویسند. مثلا مالایایی، مادام، ساراس و غیره.کد را برای کنترل سفارشی گسترش دهید، که باید به صورت زیر باشد:using System;using System.Collections.Generic;using System.ComponentModel;using System.Linq;using System.Text;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace CustomControls{ [DefaultProperty("Text")] [ToolboxData("<{0}:ServerControl1 runat=server></{0}:ServerControl1 >")] public class ServerControl1 : WebControl { [Bindable(true)] [Category("Appearance")] [DefaultValue("")] [Localizable(true)] public string Text { get { String s = (String)ViewState["Text"]; return ((s == null) ? "[" + this.ID + "]" : s); } set { ViewState["Text"] = value; } } protected override void RenderContents(HtmlTextWriter output) { if (this.checkpanlindrome()) { output.Write("This is a palindrome: <br />"); output.Write("<FONT size=5 color=Blue>"); output.Write("<B>"); output.Write(Text); output.Write("</B>"); output.Write("</FONT>"); } else { output.Write("This is not a palindrome: <br />"); output.Write("<FONT size=5 color=red>"); output.Write("<B>"); output.Write(Text); output.Write("</B>"); output.Write("</FONT>"); } } protected bool checkpanlindrome() { if (this.Text != null) { String str = this.Text; String strtoupper = Text.ToUpper(); char[] rev = strtoupper.ToCharArray(); Array.Reverse(rev); String strrev = new String(rev); if (strtoupper == strrev) { return true; } else { return false; } } else { return false; } } }}زمانی که کد کنترل را تغییر می دهید، باید با کلیک روی Build --> Build Solution راه حل را بسازید تا تغییرات در پروژه شما منعکس شود. یک جعبه متن و یک کنترل دکمه را به صفحه اضافه کنید تا کاربر بتواند متنی را ارائه دهد، وقتی روی دکمه کلیک می‌شود، برای پالیندروم بررسی می‌شود.<form id="form1" runat="server"> <div> Enter a word: <br /> <asp:TextBox ID="TextBox1" runat="server" style="width:198px"> </asp:TextBox> <br /> <br /> <asp:Button ID="Button1" runat="server ="Button1_Click" Text="Check Palindrome" style="width:132px" /> <br /> <br /> <ccs:ServerControl1 ID="ServerControl11" runat="server" Text = "" /> </div></form>کنترل کننده رویداد Click برای دکمه به سادگی متن را از جعبه متن به ویژگی متن کنترل سفارشی کپی می کند.protected void Button1_Click(object sender, EventArgs e){ this.ServerControl11.Text = this.TextBox1.Text;}هنگام اجرا، کنترل با موفقیت پالیندروم ها را بررسی می کند.موارد زیر را رعایت کنید:(1) هنگامی که یک مرجع به کنترل سفارشی اضافه می کنید، به جعبه ابزار اضافه می شود و می توانید مستقیماً از جعبه ابزار مشابه هر کنترل دیگری از آن استفاده کنید.(2) متد RenderContents کلاس کنترل سفارشی در اینجا لغو می شود، زیرا می توانید متدها و رویدادهای خود را اضافه کنید.(3) متد RenderContents پارامتری از نوع HtmlTextWriter را می گیرد که مسئول رندر در مرورگر است.