کار با User Control ها (کنترل های کاربر) در  Asp.NET قسمت اول

پیش نیاز این مقاله :

• تسلط بر کنترل های وب در Asp.NET
• تسلط بر شی گرایی ، خواص و رویداد و توابع

کنترل های کاربر در Asp.NET از اهمیت ویژه ای برخوردارند ، کار کردن با این اشیا بسیار ساده و در عین حال بسیار پر کاربرد و حیاتی است

حتی زمانی که MasterPage در Asp.NET وجود نداشت از این کنترل ها برای جلوگیری از تکرار در طرح گرافیکی استفاده می شد

برخی از مزایای استفاده از کنترل های کاربر :

1. بلوکه کردن کدها
2. پرهیز از تکرار اجزای مختلفی از سایت که به کرار در جاهای مختلف استفاده می شوند
3. ساخت ماژول و استفاده از آن به صورت داینامیک
4. راحت تر شدن کار برنامه نویسی و مرتب شدن صفحات
5. قابلیت Drag & Drop کردن کنترل به هر جای صفحه
6. قابلیت شخصی سازی
7. ایجاد خواص مختلف برای یک کنترل
8. و...

حال به سراغ این ابزار مهم در Asp.NET می رویم ، در این مقاله بنده قصد دارم یک کنترل DatePicker ساده به کمک کنترل های کاربر ایجاد نمایم ، هر جا که نیاز به انتخاب تاریخ داشته باشیم کافیست این کنترل را به درون صفحه بیاندازیم .

برای شروع کار یک پروژه وب جدید ایجاد نمایید ، نام این پروژه را مثلا SimpleDatePicker میگذاریم .

وارد منوی WebSite و سپس Add New Item شوید ، از بین آیتم های لیست شده گزینه Web User Control را انتخاب نمایید ، نام آن را به DatePicker.ascx تغییر داده و دکمه Add را بفشارید ، همانطور که متوجه شدید پسوند کنترل های کاربر Ascx می باشد .

این آیتم بسیار شبیه به آیتم WebPage است ، تفاوت های ظاهری که در نگاه اول به چشم می خورد تفاوت پسوند ، تفاوت آیکون ، خالی بودن Source صفحه ascx و همچنین ارث بری کلاس صفحه ascx.cs از کلاس System.Web.UI.UserControl  می باشد .

وارد کنترل DatePicker.ascx شوید ،  دو  DropDownList برای انتخاب روز و ماه و  یک Textbox برای درج سال قرار دهید ، برای راحتی کار کد های Html مورد نیازتان را در زیر قرار داده ام :

<asp:TextBox ID="txtYear" runat="server" >13</asp:TextBox>
<asp:DropDownList ID="ddlMonth" runat="server">
    <asp:ListItem Selected="True" Value="1">فروردين</asp:ListItem>
    <asp:ListItem Value="2">ارديبهشت</asp:ListItem>
    <asp:ListItem Value="3">خرداد</asp:ListItem>
    <asp:ListItem Value="4">تير</asp:ListItem>
    <asp:ListItem Value="5">مرداد</asp:ListItem>
    <asp:ListItem Value="6">شهريور</asp:ListItem>
    <asp:ListItem Value="7">مهر</asp:ListItem>
    <asp:ListItem Value="8">آبان</asp:ListItem>
    <asp:ListItem Value="9">آذر</asp:ListItem>
    <asp:ListItem Value="10">دي</asp:ListItem>
    <asp:ListItem Value="11">بهمن</asp:ListItem>
    <asp:ListItem Value="12">اسفند</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlDay" runat="server">
    <asp:ListItem Selected="True" Value="1">1</asp:ListItem>
    <asp:ListItem Value="2">2</asp:ListItem>
    <asp:ListItem Value="3">3</asp:ListItem>
    <asp:ListItem Value="4">4</asp:ListItem>
    <asp:ListItem Value="5">5</asp:ListItem>
    <asp:ListItem Value="6">6</asp:ListItem>
    <asp:ListItem Value="7">7</asp:ListItem>
    <asp:ListItem Value="8">8</asp:ListItem>
    <asp:ListItem Value="9">9</asp:ListItem>
    <asp:ListItem Value="10">10</asp:ListItem>
    <asp:ListItem Value="11">11</asp:ListItem>
    <asp:ListItem Value="12">12</asp:ListItem>
    <asp:ListItem Value="13">13</asp:ListItem>
    <asp:ListItem Value="14">14</asp:ListItem>
    <asp:ListItem Value="15">15</asp:ListItem>
    <asp:ListItem Value="16">16</asp:ListItem>
    <asp:ListItem Value="17">17</asp:ListItem>
    <asp:ListItem Value="18">18</asp:ListItem>
    <asp:ListItem Value="19">19</asp:ListItem>
    <asp:ListItem Value="20">20</asp:ListItem>
    <asp:ListItem Value="21">21</asp:ListItem>
    <asp:ListItem Value="22">22</asp:ListItem>
    <asp:ListItem Value="23">23</asp:ListItem>
    <asp:ListItem Value="24">24</asp:ListItem>
    <asp:ListItem Value="25">25</asp:ListItem>
    <asp:ListItem Value="26">26</asp:ListItem>
    <asp:ListItem Value="27">27</asp:ListItem>
    <asp:ListItem Value="28">28</asp:ListItem>
    <asp:ListItem Value="29">29</asp:ListItem>
    <asp:ListItem Value="30">30</asp:ListItem>
    <asp:ListItem Value="31">31</asp:ListItem>
</asp:DropDownList>

هم اکنون شما یک کنترل ساخته اید که  میتوانید آن را از Solution Explorer در هر صفحه (Web Page) که مایلید Drag کنید .

حال سوال اصلی اینجاست که چطور تاریخ انتخاب شده توسط کنترل را در کلاس یک صفحه وب بدست آوریم ! پاسخ این است که این کار توسط خاصیت ها (property ها) باید صورت گیرد ، بنابراین ما به یک Property نیاز داریم که پس از ایجاد تاریخ آن را در اختیار ما قرار دهد .

ما قصد داریم یک Property به نام EnDate برای استخراج تاریخ میلادی و یک Property به نام FaDate برای واکشی تاریخ شمسی ایجاد کنیم ، برای استخراج تاریخ میلادی نیاز به یک تابع داریم که با دادن روز ، ماه و سال شمسی تاریخ میلادی را در اختیار ما قرار دهد ، خوشبختانه این تابع در کتابخانه PersiaDll قرار دارد ، ابتدا این کتابخانه را از اینجا دانلود کرده و سپس از حالت فشرده خارج نموده فایل dll را داخل پوشه Bin پروژه کپی کنید .

وارد کنترل DatePicker.ascx شوید و سپس به CodeBehind آن بروید ، دو خاصیت EnDate و FaDate را به صورت زیر در آن ایجاد نمایید :

    public DateTime EnDate
    {
        get
        {
            return Persia.Calendar.ConvertToGregorian(int.Parse(txtYear.Text), int.Parse(ddlMonth.SelectedValue),
                int.Parse(ddlDay.SelectedValue), Persia.DateType.Persian);
        }

    }

و

    public string FaDate
    {
        get
        {
            return string.Format("{0}/{1}/{2}", txtYear.Text, ddlMonth.SelectedValue, ddlDay.SelectedValue);

        }
    }

کنترل شما حاضر است ، حال شما قادر خواهید بود در هر صفحه ای که کنترل DatePicker را Drag کرده اید از این دو Property استفاده نمایید .

به عنوان مثال بنده این کنترل را داخل صفحه Default.aspx می اندازم ، و دو Button برای تایید نمایش تاریخ شمسی و میلادی و یک Label هم برای نمایش تاریخ  قرار می دهم ، کد های Html صفحه Default.aspx در نهایت به صورت زیر خواهد بود :

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="DatePicker.ascx" TagName="DatePicker" TagPrefix="uc1" %>

<!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">
    <div>
        <uc1:DatePicker ID="DatePicker1" runat="server" />
        <br />
        <br />
        <asp:Button ID="btnFa" runat="server" OnClick="btnFa_Click" Text="تاریخ شمسی" />
        <asp:Button ID="btnEn" runat="server" OnClick="btnEn_Click" Text="تاریخ میلادی" /><br />
        <br />
        <asp:Label ID="lblDate" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

 و در CodeBehind صفحه Default.aspx داریم :

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{

    protected void btnFa_Click(object sender, EventArgs e)
    {
        lblDate.Text = DatePicker1.FaDate;
    }
    protected void btnEn_Click(object sender, EventArgs e)
    {
        lblDate.Text = DatePicker1.EnDate.ToString();
    }
}

همچنین شما میتوانید فایل نمونه و سورس را از اینجا دانلود نمایید .