1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

آموزش کنترل های سفارشی در ASP.Net

شروع موضوع توسط AftabGardoon ‏8/2/19 در انجمن ASP.NET

Tags:
  1. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    ASP.NET این امکان را به کاربر می دهد که کنترل های اختصاصی خود را تعریف و ایجاد کند. کنترل هایی که توسط کاربر تعریف می شوند (یا به عبارتی user-defined هستند) به دو دسته ی کلی تقسیم می شوند:


    • User controls
    • Custom controls

    User Controls

    User control عملکردی همانند صفحات کوچک یا فرم های وب (web form) ASP.NETدارند که مورد استفاده ی صفحات دیگر قرار می گیرد. کنترل مزبور از کلاس System.Web.UI.UserControl مشتق می شود.


    User control دارای ویژگی های زیر می باشد:


    • دارای پسوند .ascx می باشد.
    • ممکن است دربردارنده ی تگ های < html >، < body > و < form > نباشد.
    • بجای page directive دارای Control directive باشد.

    به منظور درک بهتر این مفهوم، یک user control ساده ایجاد می کنیم که به عنوان footer برای صفحه ی وب مورد نظر بکار گرفته می شود. به منظور ایجاد و استفاده از user control، مراحل زیر را دنبال کنید:


    • ابتدا یک اپلیکیشن تحت وب (web application) ایجاد کنید.
    • روی پوشه ی پروژه در پنجره ی Solution Explorer راست کلیک کرده و گزینه ی Add New Item را انتخاب کنید.

    [​IMG]
    گزینه ی Web User Control را از پنجره ی محاوره Add New Item انتخاب کرده و آن را footer.ascx نامگذاری کنید. در ابتدای امر، footer.ascx تنها دارای یک Control directive می باشد.
     
  2. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    کد زیر را به فایل مورد نظر اضافه کنید:

    کد:
    < %@ Control Language="C#" AutoEventWireup="true" CodeBehind="footer.ascx.cs" Inherits="Asp_Net_Simple_UserControl.footer" % >
    < table >
       < tr >
          < td align="center" > Copyright ©2010 TutorialPoints Ltd.< /td >
       < /tr >
       < tr >
          < td align="center" > Location: Hyderabad, A.P < /td >
       < /tr >
    < /table >
     
  3. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    به منظور افزودن user control به صفحه ی وب، ابتدا باید Register directive و نمونه ای از user control را به صفحه مورد نظر اضافه کنید. کد زیر نشانگر content file می باشد:

    کد:
    < %@ Page Language="C#" AutoEventWireup="true" CodeBehind="Simple UserControl.aspx.cs" Inherits="Asp_Net_Simple_UserControl.Simple_UserControl" % >
    < %@ 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" onclick="Button1_Click"  Text="Copyright Info" / >   
             < /div >
             < Tfooter:footer ID="footer1" runat="server" / >
          < /form >
       < /body >
    < /html >
     
  4. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    [​IMG]
     
  5. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    به نکات زیر توجه کنید:

    Register directive علاوه بر tag name یک tag prefix برای کنترل مورد نظر تعریف می کند.

    کد:
    < %@ Register Src="~/footer.ascx" TagName="footer" TagPrefix="Tfooter" % > 

    tag name و tag prefix باید به هنگام افزودن user controlبر روی صفحه بکار گرفته شود:


    کد:
    < Tfooter:footer ID="footer1" runat="server" / >
     
  6. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    Custom Control

    Custom control ها به عنوان اسمبلی های فردی deploy (نصب یا مستقر) می شوند. این نوع کنترل ها در قالب یک فایل Dynamic Link Library (کتابخانه با پیوند پویا) کامپایل شده، سپس مثل هر کنترل سمت سرور (server control) ASP.NET دیگری مورد استفاده قرار می گیرد.


    Custom control ها را می توان به یکی از روش های زیر ایجاد کرد:


    • با مشتق کردن custom control از کنترل موجود.
    • از طریق ایجاد یک custom control جدید با ترکیب کردن دو کنترل موجود.
    • با به ارث بردن base control class.

    حال برای درک عمیق تر مفاهیم فوق یک custom control ایجاد می کنیم. این کنترل یک پیام متنی را در پنجره ی مرورگر بار گذاری کرده و به نمایش (render) می گذارد. به منظور ایجاد این کنترل، مراحل زیر را دنبال کنید:


    ابتدا یک وب سایت جدید ایجاد کنید. اکنون مشابه تصویر زیر روی solution (و نه روی پروژه) در پنجره ی solution explorer راست کلیک کنید.


    [​IMG]
    در پنجره ی محاوره New Project، گزینه ی ASP.NET Server Control را از میان قالب های پروژه موجود (project template) انتخاب کنید.


    [​IMG]
    این کار یک پروژه جدید اضافه کرده و یک custom control به نام ServerControl1 به solution اضافه می کند.


    در این مثال پروژه ی خود را CustomControls نام گذاری می کنیم.


    به منظور استفاده از کنترل مزبور، باید آن را به عنوان یک ارجاع (reference) پیش از ثبت (register) آن بر روی صفحه به وب سایت مورد نظر اضافه کنید. حال جهت افزودن ارجاع به پروژه ی موجود، روی آن پروژه (و نه solution) راست کلیک کرده و گزینه ی Add Reference را انتخاب کنید.


    پروژه CustomControls را از Projects tab پنجره ی محاوره Add Reference انتخاب کنید. در صورت مراجعه به پنجره ی Solution Explorer، خواهی دید که ارجاع مربوطه در آن نمایش داده می شود.


    [​IMG]
     
  7. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    برای استفاده از control در صفحه، کافی است Register directive را زیر @page directive بکار ببرید.

    کد:
    < %@ Register Assembly="CustomControls"  Namespace="CustomControls"  TagPrefix="ccs" % >
     
  8. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    می توان کنترل ایجاد شده را درست مثل هر کنترل دیگری بکار برد.

    کد:
    < form id="form1" runat="server" >
       < div >
          < ccs:ServerControl1 runat="server" Text = "I am a Custom Server Control" / >
       < /div >
    < /form >
     
  9. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    همان طور که در تصویر زیر مشاهده می کنید، خاصیت (property) Text کنترل مورد نظر پس از execution (اجرا) بر روی پنجره ی مرورگر به نمایش گذاشته می شود:


    [​IMG]
     
  10. مدیر بازنشسته☕

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    5,336
    تشکر شده:
    42,669
    امتیاز دستاورد:
    113
    کار با custom control ها

    همان طور که در مثال قبلی مشاهده کردید، مقدار خاصیت Text کنترل مورد نظر تنظیم شده بود. ASP.NET این مقدار را به صورت پیش فرض به هنگام ایجاد شدن کنترل، اضافه می کند.


    Code behind file کنترل:

    کد:
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    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);
            }
        }
    }