توضیحات و دانلود

استفاده از سه DropDownList در ساخت تقویم Date Selector با ASP.Net
0 0
استفاده از سه DropDownList در ساخت تقویم Date Selector با ASP.Net

با سلام در این مقاله توضیح خواهیم داد که چگونه یک انتخابگر تاریخ تقویم با استفاده از سه DropDownLists در ASP.Net ایجاد کنید. سه DropDownLists به روز، ماه و سال مربوط می شود.


بنابراین شروع به ساخت کنترل تقویم سفارشی میکنیم .
ساخت کنترل کاربری
 ابتدا با ایجاد کد HTML و  کنترل را به آن اضافه می کنیم .

Year:<asp:DropDownList ID="ddlYear" runat="server" onchange = "PopulateDays()" />
Month:<asp:DropDownList ID="ddlMonth" runat="server" onchange = "PopulateDays()" />
Day:<asp:DropDownList ID="ddlDay" runat="server" />
<br /> 
<asp:CustomValidator ID="Validator" runat="server" ErrorMessage="* Required"
ClientValidationFunction = "Validate" />

همانطور که در بالا میبینید  3 DropDownLists  و یک Validator سفارشی که تاریخ را تایید می کند اضافه میکنیم.  همچنین برخی از توابع جاوا اسکریپت را می خواهیم که بعدا توضیح خواهیم داد.
سپس شما باید یک کنترل کاربری جدید را به پروژه خود اضافه کنید و ویژگی های زیر را به آن اضافه کنید .
C #

private int Day
{
    get
    {
        if (Request.Form[ddlDay.UniqueID] != null)
        {
            return int.Parse(Request.Form[ddlDay.UniqueID]);
        }
        else
        {
            return int.Parse(ddlDay.SelectedItem.Value);
        }
    }
    set
    {
        this.PopulateDay();
        ddlDay.ClearSelection();
        ddlDay.Items.FindByValue(value.ToString()).Selected = true;
    }
}
private int Month
{
    get
    {
        return int.Parse(ddlMonth.SelectedItem.Value);
    }
    set
    {
        this.PopulateMonth();
        ddlMonth.ClearSelection();
        ddlMonth.Items.FindByValue(value.ToString()).Selected = true;
    }
}
private int Year
{
    get
    {
        return int.Parse(ddlYear.SelectedItem.Value);
    }
    set
    {
        this.PopulateYear();
        ddlYear.ClearSelection();
        ddlYear.Items.FindByValue(value.ToString()).Selected = true;
    }
}
 
public DateTime SelectedDate
{
    get
    {
        try
        {
            return DateTime.Parse(this.Month + "/" + this.Day + "/" + this.Year);
        }
        catch
        {
            return DateTime.MinValue;
        }
    }
    set
    {
        if (!value.Equals(DateTime.MinValue))
        {
            this.Year = value.Year;
            this.Month = value.Month;
            this.Day = value.Day;
        }
    }
}

 VB.Net

Private Property Day() As Integer
        Get
            If (Not (Request.Form(ddlDay.UniqueID)) Is Nothing) Then
                Return Integer.Parse(Request.Form(ddlDay.UniqueID))
            Else
                Return Integer.Parse(ddlDay.SelectedItem.Value)
            End If
        End Get
        Set(ByVal value As Integer)
            Me.PopulateDay()
            ddlDay.ClearSelection()
            ddlDay.Items.FindByValue(value.ToString).Selected = True
        End Set
End Property
 
Private Property Month() As Integer
        Get
            Return Integer.Parse(ddlMonth.SelectedItem.Value)
        End Get
        Set(ByVal value As Integer)
            Me.PopulateMonth()
            ddlMonth.ClearSelection()
            ddlMonth.Items.FindByValue(value.ToString).Selected = True
        End Set
End Property
 
Private Property Year() As Integer
        Get
            Return Integer.Parse(ddlYear.SelectedItem.Value)
        End Get
        Set(ByVal value As Integer)
            Me.PopulateYear()
            ddlYear.ClearSelection()
            ddlYear.Items.FindByValue(value.ToString).Selected = True
        End Set
End Property
 
Public Property SelectedDate() As DateTime
        Get
            Try
                Return DateTime.Parse(Me.Month & "/" & Me.Day & "/" & Me.Year)
            Catch ex As Exception
                Return DateTime.MinValue
            End Try
        End Get
        Set(ByVal value As DateTime)
            If Not value.Equals(DateTime.MinValue) Then
                Me.Year = value.Year
                Me.Month = value.Month
                Me.Day = value.Day
            End If
        End Set
End Property

از ویژگی های بالا برای دریافت یا تنظیم تاریخ در date selector سفارشی استفاده می شود .
کار بعدی نوشتن یک قطعه کد که سه DropDownLists ما را با مقادیر روز، ماه و سال پر می کند است . روش زیر DropDownLists را با مقادیر روز، ماه و سال جمع می کند .
C #

private void PopulateDay()
{
    ddlDay.Items.Clear();
    ListItem lt = new ListItem();
    lt.Text = "DD";
    lt.Value = "0";
    ddlDay.Items.Add(lt);
    int days = DateTime.DaysInMonth(this.Year, this.Month);
    for (int i = 1; i <= days; i++)
    {
        lt = new ListItem();
        lt.Text = i.ToString();
        lt.Value = i.ToString();
        ddlDay.Items.Add(lt);
    }
    ddlDay.Items.FindByValue(DateTime.Now.Day.ToString()).Selected = true;
}
 
private void PopulateMonth()
{
    ddlMonth.Items.Clear();
    ListItem lt = new ListItem();
    lt.Text = "MM";
    lt.Value = "0";
    ddlMonth.Items.Add(lt);
    for (int i = 1; i <= 12; i++)
    {
        lt = new ListItem();
        lt.Text = Convert.ToDateTime(i.ToString() + "/1/1900").ToString("MMMM");
        lt.Value = i.ToString();
        ddlMonth.Items.Add(lt);
    }
    ddlMonth.Items.FindByValue(DateTime.Now.Month.ToString()).Selected = true;
}
 
private void PopulateYear()
{
    ddlYear.Items.Clear();
    ListItem lt = new ListItem();
    lt.Text = "YYYY";
    lt.Value = "0";
    ddlYear.Items.Add(lt);
    for (int i = DateTime.Now.Year; i >= 1950; i--)
    {
        lt = new ListItem();
       lt.Text = i.ToString();
        lt.Value = i.ToString();
        ddlYear.Items.Add(lt);
    }
    ddlYear.Items.FindByValue(DateTime.Now.Year.ToString()).Selected = true;
}

VB.Net

Private Sub PopulateDay()
        ddlDay.Items.Clear()
        Dim lt As ListItem = New ListItem
        lt.Text = "DD"
        lt.Value = "0"
        ddlDay.Items.Add(lt)
        Dim days As Integer = DateTime.DaysInMonth(Me.Year, Me.Month)
        Dim i As Integer = 1
        Do While (i <= days)
            lt = New ListItem
            lt.Text = i.ToString
            lt.Value = i.ToString
            ddlDay.Items.Add(lt)
            i = (i + 1)
        Loop
        ddlDay.Items.FindByValue(DateTime.Now.Day.ToString).Selected = True
End Sub
 
Private Sub PopulateMonth()
        ddlMonth.Items.Clear()
        Dim lt As ListItem = New ListItem
        lt.Text = "MM"
        lt.Value = "0"
        ddlMonth.Items.Add(lt)
        Dim i As Integer = 1
        Do While (i <= 12)
            lt = New ListItem
            lt.Text = Convert.ToDateTime((i.ToString + "/1/1900")).ToString("MMMM")
            lt.Value = i.ToString
            ddlMonth.Items.Add(lt)
            i = (i + 1)
        Loop
        ddlMonth.Items.FindByValue(DateTime.Now.Month.ToString).Selected = True
End Sub
 
Private Sub PopulateYear()
        ddlYear.Items.Clear()
        Dim lt As ListItem = New ListItem
        lt.Text = "YYYY"
        lt.Value = "0"
        ddlYear.Items.Add(lt)
        Dim i As Integer = DateTime.Now.Year
        Do While (i >= 1950)
            lt = New ListItem
            lt.Text = i.ToString
            lt.Value = i.ToString
            ddlYear.Items.Add(lt)
            i = (i - 1)
        Loop
        ddlYear.Items.FindByValue(DateTime.Now.Year.ToString).Selected = True
End Sub


توجه:

روز DropDownList بعد از ماه و سال DropDownLists پر می کنیم، دلیل این است که تعداد روزهای ماه را با توجه به مقادیر ماه و سال انتخاب می کنیم.
هنگامی که این کارها انجام شد می توانیم آنها را در رویداد بارگذاری صفحه به روش زیر انجام دهیم .
C #

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        if (this.SelectedDate == DateTime.MinValue)
        {
            this.PopulateYear();
            this.PopulateMonth();
            this.PopulateDay();
        }
    }
    else
    {
        if (Request.Form[ddlDay.UniqueID] != null)
        {
            this.PopulateDay();
            ddlDay.ClearSelection();
            ddlDay.Items.FindByValue(Request.Form[ddlDay.UniqueID]).Selected = true;
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            If (Me.SelectedDate = DateTime.MinValue) Then
                Me.PopulateYear()
                Me.PopulateMonth()
                Me.PopulateDay()
            End If
        Else
            If (Not (Request.Form(ddlDay.UniqueID)) Is Nothing) Then
                Me.PopulateDay()
                ddlDay.ClearSelection()
                ddlDay.Items.FindByValue(Request.Form(ddlDay.UniqueID)).Selected = True
            End If
        End If
End Sub

در بالای صفحه بار اول  تمام سه DropDownLists را جمع می کنیم. هنگامی که PostBack وجود دارد، مقدار انتخاب روز DropDownList حفظ شده است، زیرا در client side قرار دارد و در چنین موارد ViewState کار نمی کند.
عملیات Client Side
 هنگام DropDownList روزانه عملیات Client Side بر اساس مقادیر ماه و سال مورد نیاز است. به عبارت دیگر بر اساس مقادیر ماه و سال تصمیم می گیرد که چند روز در ماه باید حضور داشته باشد.

<script type="text/javascript">   
function PopulateDays() {
    var ddlMonth = document.getElementById("<%=ddlMonth.ClientID%>");
    var ddlYear = document.getElementById("<%=ddlYear.ClientID%>");
    var ddlDay = document.getElementById("<%=ddlDay.ClientID%>");
    var y = ddlYear.options[ddlYear.selectedIndex].value;
    var m = ddlMonth.options[ddlMonth.selectedIndex].value != 0;
    if (ddlMonth.options[ddlMonth.selectedIndex].value != 0 && ddlYear.options[ddlYear.selectedIndex].value != 0) {
        var dayCount = 32 - new Date(ddlYear.options[ddlYear.selectedIndex].value, ddlMonth.options[ddlMonth.selectedIndex].value - 1, 32).getDate();
        ddlDay.options.length = 0;
        AddOption(ddlDay, "DD", "0");
        for (var i = 1; i <= dayCount; i++) {
            AddOption(ddlDay, i, i);
        }
    }
}
 
function AddOption(ddl, text, value) {
    var opt = document.createElement("OPTION");
    opt.text = text;
    opt.value = value;
    ddl.options.add(opt);
}
 
function Validate(sender, args) {
    var ddlMonth = document.getElementById("<%=ddlMonth.ClientID%>");
    var ddlYear = document.getElementById("<%=ddlYear.ClientID%>");
    var ddlDay = document.getElementById("<%=ddlDay.ClientID%>");
    args.IsValid = (ddlDay.selectedIndex != 0 && ddlMonth.selectedIndex != 0 && ddlYear.selectedIndex != 0)
}
</script>

عملکرد PopulateDays به عنوان DropDownList client side روزانه را بر اساس مقادیر ماه و سال نشان می دهد . این روش از بررسی اعتبارسنجی برای سالهای جهش اجتناب می کند. این روش زمانی فرا میرسد که مقادیر DropDownList ماه و سال تغییر کند.
روش بعدی AddOption یک روش عمومی است که ارزش ها را به DropDownList اضافه می کند.
در نهایت روش اعتبار سنجی سه DropDownLists را تأیید می کند که آیا کاربر تمام مقادیر را انتخاب کرده یا نه. این روش توسط Validator سفارشی فراخوانی شده است.
 
گرفتن و تنظیم تاریخ در Date Selector سفارشی
با استفاده از خصوصیت SelectedDate شما به راحتی می توانید تنظیمات و تاریخ انتخاب شده را ازDate Selector سفارشی تقویم به روش زیر انجام دهید .
C #

//Set Date
ucDateSelector.SelectedDate = DateTime.Parse("05/10/2010");
//Get Date
Response.Write(ucDateSelector.SelectedDate.ToShortDateString());

VB.Net

'Set Date
ucDateSelector.SelectedDate = DateTime.Parse("05/10/2010")
 
'Get Date
Response.Write(ucDateSelector.SelectedDate.ToShortDateString)

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :