65.9K
CodeProject 正在变化。 阅读更多。
Home

月和年选择器用户控件

Pranay Rana
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (16投票s)

2011年12月4日

CPOL

3分钟阅读

viewsIcon

62346

downloadIcon

1028

月和年选择器用户控件

引言

我将讨论由我创建的用于选择月份和年份的弹出日历控件。从这篇文章中，您将了解到如何使用 jQuery 轻松创建弹出窗口，以及如何将其用作 ASP.NET 用户控件。嗯，还不止这些。您还可以在其他任何语言开发的 Web 项目中使用此功能。以下是该控件的图片。

现在，以下是对创建的控件的分步说明以及如何在您的应用程序中使用该控件。

第 1 步：控件设计，即 ASCX 文件

要创建用户控件，您需要左键单击解决方案，然后单击“添加新项目”>>，然后在屏幕中选择Web用户控件，如下所示

单击“添加”按钮后，将创建一个 ASCX 文件，然后您可以添加以下代码行以按上图所示的方式显示

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DateBox.ascx.cs" 
    Inherits="DateBox" %>

<div style="float: left;"  runat="server" id="labelContainer">
<asp:label runat="server" id="lblText" />
</div>
<div>
<asp:textbox runat="server" id="txtDate" />
  <asp:button text="..." runat="server" id="btnDate">
</asp:button></div>
  • lblText：用于保存要与文本框一起显示的文本的标签。
  • txtDate：用于保存用户从上图第二个图片中显示的弹出日历窗口中选择的文本的文本框。
  • btnDate：按钮控件，单击时，它会显示弹出日历窗口。

第 2 步：控件代码隐藏，即 .CS 文件

完成控件设计后，您可以将以下代码粘贴到代码隐藏中，即 .cs 文件

public partial class DateBox : System.Web.UI.UserControl
{
    public string LabelText
    {
        get
        {
            return lblText.Text;
        }
        set
        {
            lblText.Text = value;
        }
    }

    public string TextData
    {
        get
        {
            return txtDate.Text;
        }
        set
        {
            txtDate.Text = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (lblText.Text == string.Empty)
                labelContainer.Visible = false;

            this.btnDate.Attributes.Add("OnClick", 
        "return buttonClick(this,'"+ txtDate.ClientID +"');");
        }
    }
}

属性

  • LabelText：用于获取/设置标签控件的文本。
  • TextData：用于获取/设置文本框控件的文本，该文本框将显示选定的日期。

方法

  • Page_Load：当页面加载时，此方法执行检查标签控件是否没有文本，使容器 div 设置为不可见。在按钮控件上添加客户端脚本并传递按钮控件本身和文本框控件客户端 ID，jQuery/JavaScript 将使用该 ID 来显示选定的日期。

第 3 步：创建弹出日历的代码，即 .JS 文件

完成第 2 步后，向您的解决方案添加一个新的 JavaScript 文件，并将以下代码粘贴到其中

jQuery(document).ready(function ($) {

    var divContainer = $("<div style="display: none;" id="window">
</div>
");

    var divButtonHolder = $("<div style="padding-removed 5px; 
    text-align: center;" id="bholder">
</div>
");
    var buttonOk = $("<div style="float: left;">
    <input type="button" value="Done"  önclick="buttonDoneClick()" id="buttonDone" />
    </div>
");
    var buttonCancel = $("<div style="float: right;">
    <input type="button" value="Cancel"  önclick="Close_Popup()" id="buttonCancel" />
    </div>
");

    var divSelectHolder = $("<div id="holder">
Select Month and Year :  </div>
");
    var ddlmonth = $("<select id="ddlmonth" cellspacing="0"> </select>    ");
    var ddlyear = $("<select id="ddlyear" cellspacing="0"> </select>");
    var i = 0;
    var month = 1;

    for (i = 1985; i <= 2020; i++) {
        ddlyear.append('<option value="' + i + '">' + i + '</option>');
    }

    i = 0;
    for (i = 1; i <= 12; i++) {
        if (i < 10) {
            month = "0" + month;
        }
        ddlmonth.append('<option value="' + month + '">' + month + '</option>');
        month++;
    }

    divSelectHolder.append(ddlmonth);
    divSelectHolder.append(ddlyear);
    divContainer.append(divSelectHolder);

    divButtonHolder.append(buttonOk);
    divButtonHolder.append(buttonCancel);
    divContainer.append(divButtonHolder);
    $('body').append(divContainer);
});

var txtDate;
function buttonDoneClick() {
    var month = $("#ddlmonth").val();
    var year = $("#ddlyear").val();

    $(txtDate).val(month + year);
    Close_Popup() 
}

function buttonClick(obj,id) {

    txtDate = ('#' + id);
    var position = $(obj).position();

    $('#window').css({ top: position.top, left: position.left }).fadeIn('fast');
    return false;
}

function Close_Popup() {
    $('#window').fadeOut('fast');
}

变量

  • divContainer：包含弹出窗口所有控件的主容器
  • divButtonHolder：保存窗口的按钮控件，即“完成”和“取消”
  • buttonOk：保存名为“完成”的按钮控件的引用
  • buttonCancel：保存名为“取消”的按钮控件的引用
  • divSelectHolder：保存选择控件，即月份和年份组合框
  • ddlmonth：保存名为“月份”的选择控件的引用
  • ddlyear：保存名为“年份”的选择控件的引用

jQuery 方法

  • .append：允许将控件附加到由过滤器选择的控件
  • .ready：该方法包含用于初始化变量、向选择控件添加选项并将所有创建的控件附加到页面的主体中的代码
  • .position：用于获取由选择器选择的控件的位置的方法

方法

  • buttonDoneClick：获取月份和年份组合框的选定值，并在与日历控件关联的文本框中显示文本
  • buttonClick：显示日历弹出窗口，该方法使用 jquery 的 position 方法来获取按钮的位置并将其分配给弹出窗口
  • Close_Popup：当弹出窗口的“取消”按钮被单击时调用，用于关闭弹出窗口

第 4 步：弹出窗口样式表，即 .Css 文件

将以下样式表添加到您将能够从解决方案中添加的 Css 文件中。

#window {
margin: 0 auto;
border: 1px solid #000000;
background: #ffffff;
position: absolute;
left: 25%;
width:250px;
height:50px;
padding:5px;
}

Style 与 id 称为 window 的 div 关联，即弹出窗口。

第 5 步：如何在您的项目 ASPX 文件中使用控件

<%@ Register  Src="~/DateBox.ascx" TagPrefix="UC" TagName="DateBox"   %>
<script type="text/javascript" src="JavaScript/jquery.js">
</script>
<script type="text/javascript" src="JavaScript/DateBox.js">
</script>
<uc:datebox  runat="server" labeltext="Select period : " id="DateBox">
</uc:datebox>

因此，要在您的应用程序中使用控件，您只需要注册用户控件，需要包含 jquery、创建 js 和 css 文件。并且您可以使用 Label 属性来显示带有控件的文本。

摘要

因此，在您的应用程序中创建 popUp 控件并将其用作用户控件非常容易。但是，如果您使用的是 .NET 以外的其他平台，那么您只需要使用 .Js 和 .Css 文件，并且需要在您的页面上创建一个控件。

© . All rights reserved.