Home »

Hướng dẫn cách tạo Multiselect dropdown đơn giản trong Asp.net 4

1 thg 9, 2013

Trong bài viết ngày hôm nay, tôi sẽ giới thiệu đến các bạn cách tạo một multiselect dropdown đơn giản trong Asp.net 4.0. Cái này có rất nhiều ứng dụng hay, hy vọng nó sẽ giúp ích cho project của các bạn.

Khởi động

Để có thể sử dụng cách này, thì chúng ta cần phải sử dụng AJAX CONTROL trong Visual Studio. Ở đây tôi sử dụng Visual Studio 2010.

Viết code

Các bạn chuyển sang chế độ Design View thêm một control textbox. Chú ý quan trọng là textbox này bạn phải đặt nó bên trong một UpdatePanel như đoạn code sau
?
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
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="multidropdown.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:PopupControlExtender
ID="TextBox1_PopupControlExtender" runat="server"
Enabled="True" ExtenderControlID=""
TargetControlID="TextBox1"
PopupControlID="Panel1" OffsetY="22">
</asp:PopupControlExtender>
<asp:Panel ID="Panel1" runat="server"
Height="116px" Width="145px"
BorderStyle="Solid" BorderWidth="2px"
Direction="LeftToRight"
ScrollBars="Auto" BackColor="#CCCCCC"
Style="display: none">
<asp:CheckBoxList ID="CheckBoxList1" runat="server"
DataSourceID="SqlDataSource1" DataTextField="holiday_name"
DataValueField="holiday_name" AutoPostBack="True"
OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
</asp:CheckBoxList>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server" ConnectionString="<%$
ConnectionStrings:employeedbConnectionString %>"
SelectCommand="SELECT [holiday_name] FROM [tblholidaymas]">
</asp:SqlDataSource>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Trong đó, chúng ta có một Datasource như hình bên dưới
multiselect dropdown in asp.net
Cuối cùng, trong code-behind. Chúng ta viết code để mỗi lần click trong multiselect thì giá trị sẽ hiển thị lên control textbox.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
{
string name = "";
for (int i = 0; i < CheckBoxList1.Items.Count; i++)
{
if (CheckBoxList1.Items[i].Selected)
{
name += CheckBoxList1.Items[i].Text + ",";
}
}
TextBox1.Text = name;
}
}
Done!. Vậy là xong, hy vọng bạn có những trải nghiệm thú vị cùng sharecodeweb.com
Tags:

Comments[ 0 ]


Đăng nhận xét