ورود / ثبت نام
0
0

رابط کاربری DateTimePicker در ASP.NET MVC

310 بازدید
DateTimePicker

DateTimePicker

در این مقاله نشان می دهیم که چگونه یک property به Telerik UI مربوط به ASP.Net MVC DateTimePicker اضافه کنیم تا در زمان کلیک یا focus یک تقویم نمایش داده شود.

در حالت عادی، این کنترل ها با کلیک کردن روی فیلد متنی باز نمی شوند و property برای انجام این کار وجود ندارد. برای درک بهتر DateTimePicker با من همراه باشید …

DateTimePicker

DateTimePicker

در ادامه می بینیم که چگونه می توان این property را اضافه نمود.

ExtendedDatePicker

یک شی جدید از ExtendedDatePicker ایجاد می کنیم که امکان گسترش DatePicker را به ما می دهد و شامل یک property جدید به نام ShowOnClick به صورت زیر می باشد:

public class ExtendedDatePickerBuilder : DatePickerBuilder  
{  
    /// <summary>  
    /// Boolean that store show on click 
    /// </summary>  
    public bool ShowOnClick { get; set; }  
  
    public ExtendedDatePickerBuilder(DatePickerBuilder datePicker)  
        : base(datePicker)  
    { 
    }   
} 

HtmlExtensions

حال باید یک افزونه HTML ایجاد کنیم تا DatePicker را گسترش داده و ShowOnClick را مقداردهی نماییم.

public static class HtmlKendoExtensions  
{  
    /// <summary>  
    /// Expand the DatePickerBuilder Telerik to our custom ExtendedDatePickerBuilder  
    /// </summary>  
    /// <param name="datePickerBuilder"></param>  
    /// <returns></returns>  
    public static ExtendedDatePickerBuilder Extend(this DatePickerBuilder datePickerBuilder)  
    {  
        return new ExtendedDatePickerBuilder(datePickerBuilder);  
    }  
  
    /// <summary>  
    /// Set the ShowOnClick option to true  
    /// </summary>  
    /// <param name="datePickerBuilder"></param>  
    /// <returns></returns>  
    public static ExtendedDatePickerBuilder ShowOnClick(this ExtendedDatePickerBuilder datePickerBuilder)  
    {  
        datePickerBuilder.ShowOnClick = true;  
  
        return datePickerBuilder;  
    }  
} 

View (cshtml)

حالا می توانیم با این افزونه Kendo DatePicker و کنترل های DatePickerFor را در viewهای خود گسترش دهیم.

فایل درون WebApp: به Views -> Shared و سپس EditorTemplate رفته و یک Date.cshtml ایجاد می کنیم.

@model DateTime? 
@(Html.Kendo().DatePickerFor(m => m).Extend().ShowOnClick())  

بنابراین برای گسترش DatePicker فقط باید افزونه ShowOnClick را فراخوانی نماییم.

ToHtmlString()

حال متد TohtmlString() را برای اجرای DatePicker در HTML، Override می کنیم و اسکریپ های جاوا اسکریپت ما با کلیک کردن برروی DatePicker، آن را در مرورگر باز می کند.

برای این کار، متد زیر را در کلاس ExtendedDatePickerBuilder اضافه می کنیم.

#region overriding  
  
public override string ToHtmlString()  
{  
    StringBuilder sbShowOnFocus = new StringBuilder(" ");  
  
    if (ShowOnClick)  
    {  
        sbShowOnFocus.Append("<script type=\"text/javascript\">");  
  
        sbShowOnFocus.Append("$(document).ready(function () {");  
        sbShowOnFocus.Append("    $(\"input[name='" + base.Component.Name + "']\").click(function() {");  
        sbShowOnFocus.Append("        var datepicker = $(\"input[name='" + base.Component.Name + "']\").data(\"kendoDatePicker\");");  
        sbShowOnFocus.Append("        datepicker.open();");  
        sbShowOnFocus.Append("    });");  
        sbShowOnFocus.Append("});");  
  
        sbShowOnFocus.Append("</script>");  
    }  
  
    var mvcHtmlStringResult = MvcHtmlString.Create(sbShowOnFocus.ToString());  
  
    return base.ToHtmlString() + mvcHtmlStringResult.ToString();  
}  
 
#endregion  

بعد از اینکه صفحه بارگذاری شد، این اسکریپت اجازه می دهد که یک subscription به کلیک این کنترل اضافه کنیم تا DateTimePicker را باز کند.

مرحله آخر

با این متد، می توانید propertyهای دیگری هم به کنترل خود اضافه نمایید.

زمانی که کنترل ها بارگذاری می شوند، یک کلیک روی کنترل، مانند شکل زیر DateTimePicker را باز می کند.

DateTimePicker

مزایای این متد، محدود کردن تاثیر کدهای جاوا اسکریپت کنترل های kendo است و وابستگی کمتری به کنترل های third-party دارد. همچنین می توانید property های دیگری مانند ShowOnFocus و متدهای دیگر را به کنترل های خود اضافه نمایید.

توجه داشته باشید که با ارث بری مستقیم، ExtendedDatePickerBuilder:DatePickerBuilder ممکن است بعد از متد ShowOnClick() در view، افزونه های دیگر متعلق به DatePicker نیز فراخوانی شوند. بنابراین اینجا از ارث بری و وراثت استفاده نمی کنیم.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=16180
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

1 نظر در مورد رابط کاربری DateTimePicker در ASP.NET MVC

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *