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

Posted 2023-04-13

【中文标题】用于 JQuery 日期时间选择器的 ASP.Net 包装器控件

【英文标题】：ASP.Net wrapper control for JQuery datetime picker

【发布时间】：2011-02-19 11:43:03

【问题描述】：

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

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

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

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

提前致谢。

【问题讨论】：

只是基于分享想法 - 控件是用于呈现脚本和 html 的服务器端技术 - jQuery 处理 dom 的客户端操作 - 以这种方式使用 jquery 会更好旨在通过将日历插件附加到您在 asp.net 中生成的纯文本框。

非常正确，但是我们将让这个控件用于网格/数据列表或中继器控件，并具有上面指定的一些可自定义的属性。所以附加每个控件有点乏味。

【参考方案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();

【讨论】：

天啊，这篇文章胜过互联网上所有关于如何使用 IScriptControl 的文章。很多东西都缺少 javascript 方面！

快速提问：getter 不应该是这样的：get_timeFormat: function () return this._timeFormat; , 没有 _timeFormat 而不是 get_timeFormat

@tster - 感谢您的 cmets :)。是的，你完全正确。应该是return this._timeFormat;。我会更新答案。