ASP.Net wrapper control for JQuery datetime picker

Refresh

December 2018

Views

2.1k time

5

I'm looking to create a wrapper control for JQuery date time picker control to be used in asp.net website. Once the user control is ready, it will be used in simple web forms / grids / data lists or repeater controls. User control will also expose below mentioned properties for customization.

  1. TimeHourFormat: "12" or "24" (12 (AM/PM) or 24 hour)
  2. TimeAMPMCondense: True (If 12 hour format, display AM/PM with only 1 letter and no space i.e. 1:00A or 5:05P)
  3. TimeFormat: "HH/MM" (Leading zeros on Hours and Minutes. Default to always have leading zeros.)
  4. CssClass: "calendarClass" (Name of the CSS class/style sheet for formatting)
  5. ReadOnly: True (Set textbox to readonly mode and disable pop up calendar If false, then enable pop up calendar and enable access to textbox)
  6. DateFormat: "MM/DD/YYYY" (Pass C# standard formatting to also include YY no century formats. Default to always have leading zeros and century.)
  7. Display: "C" (Pass C to display Calendar only, CT for Calendar and Time, and T for time only display)
  8. Placement: "Popup" (Default for pop up of the control, could also be inline)
  9. DateEarly: "01/01/1900" (If date is equal to or less than, then display and return a null (blank) value)
  10. WeekStart: "Sun" (Day of week to start calendar)
  11. Image: "/image/calendar.ico" (Name and path to use for the image used on the right of the textbox to click and have it display. If not specified, then clicking in the enabled field will 'pop up' the control.)

Follow the JQuery Date Time Picker Implementation. See Demo in action.

I'm open for any idea or suggestion. Feel free to comment or share your ideas.

Thanks in advance.

MUS

1 answers

8

Я понимаю, что вы хотите создать повторное использование управления, который использует функциональные возможности JQuery и оборачивает все красиво? Если я правильно понял вам нужно создать IScriptControl.

Создать два файла в вашем проекте, а именно:

Project
|...Controls
    |...MyDateTimePicker.cs
    |...MyDateTimePicker.js

Установите MyDateTimePicker.js в качестве встроенного ресурса, а затем добавьте следующую строку в информацию сборки:

[assembly: System.Web.UI.WebResource("Project.Controls.MyDateTimePicker.js", "text/javascript")]

После того, как вы сделали это, перейдите к классу MyDateTimePicker.cs и создать основной шаблон следующим образом:

[DefaultProperty("ID")]
[ToolboxData("<{0}:MyDateTimePicker runat=server />")]
public class MyDateTimePicker : WebControl, IScriptControl
{

}

После того, как вы сделали это, вы должны зарегистрировать контроль как ScriptControl, так что добавьте следующее:

protected override void OnPreRender(EventArgs e)
{

    if (!this.DesignMode)
    {

        // Link the script up with the script manager
        ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
        if (scriptManager != null)
        {
            scriptManager.RegisterScriptControl(this);
            scriptManager.RegisterScriptDescriptors(this);
            scriptManager.Scripts.Add(new ScriptReference(
                "Project.Controls.MyDateTimePicker.js", "Project"));
        }
        else
        {
            throw new ApplicationException("You must have a ScriptManager on the Page.");
        }

    }

    base.OnPreRender(e);

}

Теперь это означает, что управление может передать Свойства стороне клиента. Итак, начнем, добавляя свои свойства, т.е.

public virtual string TimeHourFormat {get;set;}
public virtual string TimeFormat {get;set;}

Если у вас есть некоторые свойства, которые вы должны передать их в качестве дескрипторов сценария:

IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
{
    ScriptControlDescriptor desc = new ScriptControlDescriptor("Project.MyDateTimePicker", 
        this.ClientID);

    // Properties
    desc.AddProperty("timeHourFormat", this.TimeHourFormat);
    desc.AddProperty("timeFormat", this.TimeFormat);

    yield return desc;
}

IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
{
    ScriptReference reference = new ScriptReference();
    reference.Assembly = Assembly.GetAssembly(typeof(MyDateTimePicker)).FullName;
    reference.Name = "Project.MyDateTimePicker.js";
    yield return reference;
}

Теперь у нас есть все, что нужно, чтобы реализовать клиентский сценарий, который может содержать все JQuery вы хотите. Всплывающие следующий шаблон в MyDateTimePicker.js и прочь вы идете!

Type.registerNamespace('Project');

Project.MyDateTimePicker = function (element) {

    this._timeHourFormat = null;
    this._timeFormat = null;

    // Calling the base class constructor
    Project.MyDateTimePicker.initializeBase(this, [element]);

}

Project.MyDateTimePicker.prototype =
{

    initialize: function () {

        // Call the base initialize method
        Project.MyDateTimePicker.callBaseMethod(this, 'initialize');

        $(document).ready(
            // See, jQuery!
        );

    },

    dispose: function () {

        // Call the base class method
        Project.MyDateTimePicker.callBaseMethod(this, 'dispose');

    },


    //////////////////
    // Public Methods 
    ////////////////// 

    // Hides the control from view
    doSomething: function (e) {

    },

    //////////////////
    // Properties 
    //////////////////   

    get_timeHourFormat: function () {
        return this._timeHourFormat;
    },
    set_timeHourFormat: function (value) {
        var e = Function._validateParams(arguments, [{ name: 'value', type: String}]);
        if (e) throw e;
        if (this._timeHourFormat != value) {
            this._timeHourFormat = value;
            this.raisePropertyChanged('timeHourFormat');
        }
    },

    get_timeFormat: function () {
        return this._timeFormat;
    },
    set_timeFormat: function (value) {
        var e = Function._validateParams(arguments, [{ name: 'value', type: String}]);
        if (e) throw e;
        if (this._timeFormat != value) {
            this._timeFormat = value;
            this.raisePropertyChanged('timeFormat');
        }
    }

}


Project.MyDateTimePicker.registerClass('Project.MyDateTimePicker', Sys.UI.Control);

if (typeof(Sys) != 'undefined')
{
    Sys.Application.notifyScriptLoaded();
}