Question

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

TimeHourFormat：“12”或“24”（12（上午/下午）或24小时）
TimeAMPMCondense：True（如果是12小时格式，显示只有1个字母且没有空格的AM / PM，即1：00A或5：05P）
TimeFormat：“HH / MM”（小时和分钟前导零。默认为始终有前导零。）
CssClass：“calendarClass”（用于格式化的CSS类/样式表的名称）
ReadOnly：True（将文本框设置为只读模式并禁用弹出日历如果为false，则启用弹出日历并启用对文本框的访问权限）
DateFormat：“MM / DD / YYYY”（通过C＃标准格式也包括YY没有世纪格式。默认为始终有前导零和世纪。）
显示：“C”（传递C仅显示日历，CT显示日历和时间，T显示仅限时间显示）
放置：“弹出”（弹出控件的默认值，也可以是内联的）
DateEarly：“01/01/1900”（如果日期等于或小于，则显示并返回空（空白）值）
WeekStart：“太阳”（开始日历的星期几）
图片：“/ 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();
}

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

1 个答案: