c# - 用于 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. Placement:“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();
}