Home »

Tạo user control cho phép chọn năm và tháng

3 thg 9, 2013

Bài viết hướng dẫn tạo ra user control cho phép chọn năm và tháng sử dụng Jquery. Bài này là một lý thuyết giúp bạn có thể phát triển ứng dụng mọi nơi bạn có thể.

Tạo user control cho phép chọn năm và tháng

Bài viết hướng dẫn tạo ra user control cho phép chọn năm và tháng sử dụng Jquery. Bài này là một lý thuyết giúp bạn có thể phát triển ứng dụng mọi nơi bạn có thể.


Bước 1: Tạo User Control
Để tạo một user Control, bạn click chuột phải vào solution và chọn Add New Item -> Web User Control

Sau đó bạn chèn đoạn code bên dưới vào file vừa tạo
?
1
2
3
4
5
6
7
8
9
<%@ 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: Label hiển thị dữ liệu từ textbox
  • txtDate: TextBox nhận giá trị được chọn bởi user từ pop-up calendar
  • btnDate: Button control,khi click sẽ hiển thị pop-up calendar
Bước 2: Code Behind
Bạn chèn đoạn code bên dưới
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 +"');");
}
}
}
Property
  • LabelText: Được sử dụng để get/set cho label control.
  • TextData: Được sử dụng để get/set hiển thị tháng và năm được chọn.
Method

Page_Load: Phương thức này sẽ thực thi khi trang được load, và thực hiện kiểm tra nếu control label không có dòng chữ nào thì sẽ tắt visible của nó đi. Thêm một thuộc tính vào control button để sử dụng cho Jquery/Javascript sau này.
Bước 3: Tạo một file .JS
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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');
}
Variables
  • divContainer: Thẻ div bao bọc tất cả các control trong pop-up
  • divButtonHolder: Thẻ div bao 2 button Done và Cancle
  • buttonOk: Gọi phương thức Done
  • buttonCancel: Gọi phương thức Cancle
  • divSelectHolder: Thẻ div bao bọc combobox cho phép chọn tháng và năm
  • ddlmonth: Dropdownlist gọi phương thức khi thực hiện chọn tháng
  • ddlyear: Dropdownlist gọi phương thức khi thực hiện chọn năm
jQuery method
  • .append: Cho phép append control được chọn
  • .ready: Phương thức khởi tạo khi page được load xong
  • .position: Lấy vị trí của control khi được chọn
Method
  • buttonDoneClick: Nhận giá trị tháng và năm sau đó hiển thị lên
  • buttonClick:Hiển thị pop-up window
  • Close_Popup: Closed pop-up
Bước 4: Style
Bạn style cho nó gọn chút nha, mình ở đây chỉ làm demo thôi
?
1
2
3
4
5
6
7
8
9
10
#window {
margin: 0 auto;
border: 1px solid #000000;
background: #ffffff;
position: absolute;
left: 25%;
width:250px;
height:50px;
padding:5px;
}
Bước 5: Nhúng Js vào User Control
Nhúng Js vào UserControl của chúng ta
?
1
2
3
4
5
6
7
<%@ 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>
OK! Vậy là xong User Control cho phép bạn chọn tháng và năm sử dụng Jquery rồi đó. Chúc bạn thành công với ứng dụng của mình
Tags:

Comments[ 0 ]


Đăng nhận xét