Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > Tạo user control cho phép chọn năm và tháng
Tạo user control cho phép chọn năm và tháng
Nguyễn Trung Hiếu
Share Code Web Company 2012

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ể.

month and year control
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
control creation
Sau đó bạn chèn đoạn code bên dưới vào file vừa tạo

  • 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

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

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

Bước 5: Nhúng Js vào User Control
Nhúng Js vào UserControl của chúng ta

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

Download Code

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.778 hits
%d bloggers like this: