我正在寻找要在asp.net网站中使用的JQuery日期时间选择器控件的包装器控件。一旦用户控件准备就绪,它将以简单的Web表单/网格/数据列表或转发器控件使用。用户控件还将公开以下提及的属性以进行自定义。

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

  • 遵循JQuery Date Time Picker Implementation。请参见Demo的实际应用。

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

    提前致谢。

    最佳答案

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

    关于c# - JQuery日期时间选择器的ASP.Net包装器控件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2833603/

    10-12 12:34
    查看更多