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

Question

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

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

遵循JQuery日期时间选择器实现.请参阅演示中的演示.

我愿意接受任何想法或建议.随意评论或分享您的想法.

提前致谢.

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();
}