用于 JQuery 日期时间选择器的 ASP.Net 包装器控件

Question

我希望为 JQuery 日期时间选择器控件创建一个包装器控件，以便在 asp.net 网站中使用。一旦用户控件准备就绪，它将用于简单的 Web 表单/网格/数据列表或中继器控件。用户控件还将公开以下提到的属性以进行自定义。

1. TimeHourFormat：“12”或“24”（12（上午/下午）或 24 小时）
2. TimeAMPMCondense：True（如果是 12 小时格式，则显示 AM/PM，只有 1 个字母且没有空格，即 1:00A 或 5:05P）
3. TimeFormat：“HH/MM”（小时和分钟前导零。默认始终有前导零。）
4. CssClass: "calendarClass"（用于格式化的 CSS 类/样式表的名称）
5. ReadOnly: True（将文本框设置为只读模式并禁用弹出日历如果为 false，则启用弹出日历并启用对文本框的访问）
6. DateFormat：“MM/DD/YYYY”（通过 C# 标准格式，还包括 YY 无世纪格式。默认始终包含前导零和世纪。）
7. 显示：“C”（传递 C 以仅显示日历，CT 用于日历和时间，T 用于仅时间显示）
8. 位置：“Popup”（控件弹出的默认值，也可以是内联的）
9. DateEarly：“01/01/1900”（如果日期等于或小于，则显示并返回空（空白）值）
10. WeekStart：“Sun”（开始日历的星期几）
11. 图像：“/image/calendar.ico”（用于在文本框右侧单击并显示的图像的名称和路径。如果未指定，则在启用的字段中单击将“弹出” ' 控件。）

关注JQuery Date Time Picker Implementation。请参阅Demo 的实际操作。

我愿意接受任何想法或建议。随时发表评论或分享您的想法。

提前致谢。

Answer 1

我认为您想创建一个可重用的控件，该控件使用 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();
}