最近评论
正在载入评论列表...
2.9 可选择输入的PopupControl控件
ASP.NET AJAX Control Toolkit中的PopupControl控件不但可以实现弹出式日历选择输入功能，也可以实现输入框的可选择输入的功能。
在下述代码实例中，SelectText.aspx页面为TextBox控件（ID属性的值为tbInput）演示了可选择输入的功能。PopupControlExtender控件的ID属性的值为pceInput，它弹出一个ID属性为pText的Panel控件。其中，pText控件放置了一个RadioButtonList控件（ID属性的值为rblText），用户可以在单项列表控件中选择所需要的数据项。
注意：为了不让用户感觉该页面的刷新操作，特意把rblText控件放置在UpdatePanel控件中。
<!-- AjaxTextInput/SelectText.aspx页面 -->
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="SelectText.aspx.cs" StylesheetTheme="ASPNETAjaxWeb"
Inherits="SelectText" %>
<head runat="server"><title>可选择输入</title></head>
<asp:ScriptManager ID="sm" EnablePartialRendering="true"
runat="server"></asp:ScriptManager><br />
<asp:TextBox ID="tbInput" runat="server" SkinID="tbSkin"
Width="300px"></asp:TextBox>
<ajaxToolkit:PopupControlExtender ID="pceInput" runat="server"
PopupControlID="pText" OffsetX="0" OffsetY="0" Position="Bottom"
TargetControlID="tbInput" ></ajaxToolkit:PopupControlExtender>
<asp:Panel ID="pText" runat="server">
<asp:UpdatePanel ID="upText" runat="server"><ContentTemplate>
<asp:RadioButtonList ID="rblText" runat="server" CssClass="Text"
RepeatDirection="Vertical"
OnSelectedIndexChanged="rblText_SelectedIndexChanged"
AutoPostBack="True" RepeatLayout="Flow"></asp:RadioButtonList>
</ContentTemplate></asp:UpdatePanel>
</asp:Panel>
上述代码实例执行后，当把鼠标放置在输入框中时，输入框的下方将显示一个单项列表控件，用户可以在该单项列表控件中选择所需要输入的数据项，如图2.14所示。
图2.14 演示可选择输入的功能
然而，仅仅使用上述实例代码还不能获取用户选择的数据项。为了把用户选择的数据项显示在输入框中，特意为rblText控件添加了rblText_SelectedIndexChanged(object sender，EventArgs e)事件。该事件调用pceInput控件的Commit()方法把用户选择的数据项提交到其目标控件。
注意：虽然rblText_SelectedIndexChanged(object sender,EventArgs e)事件把弹出控件的结果传递到输入框，但是要在输入框中显示该结果，则需要把ScriptManager控件sm的EnablePartialRendering属性的值设置为true，即及时更新输入框中的内容。
protected void rblText_SelectedIndexChanged(object sender,EventArgs e)
{ ///将用户选择的值提交给TextBox
///注意：ScriptManager控件的EnablePartialRendering属性的值设置为true
pceInput.Commit(rblText.SelectedItem.Text);
}
在下述程序代码中，Page_Load(object sender，EventArgs e)事件初始化SelectText.aspx页面，即调用BindPageData()函数创建rblText控件的数据项。其中，每一个数据项均为一个随机字符串，由CreateRandomString()函数创建。
Random random = new Random();
protected void Page_Load(object sender, EventArgs e)
{ ///初始化页面的数据
if(!Page.IsPostBack){BindPageData();}
}
/// <summary>
/// 创建被选项控件的数据源
/// </summary>
private void BindPageData()
{ ///创建数据表
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("ID",typeof(int)));
dt.Columns.Add(new DataColumn("Name",typeof(string)));
///添加表的数据
for(int i = 0; i < 10; i++)
{
DataRow row = dt.NewRow();
row["ID"] = i;
row["Name"] = ((char)('A' + i)).ToString() + ": "
+ CreateRandomString();
dt.Rows.Add(row);
}
///绑定并显示数据
rblText.DataSource = dt;
rblText.DataTextField = "Name";
rblText.DataValueField = "ID";
rblText.DataBind();
}
在下述程序代码中，CreateRandomString()函数创建一个长度为20且由大写英文字母组成的随机字符串。
/// <summary>
/// 产生随机字符串
/// </summary>
private string CreateRandomString()
{ ///创建长度为20的随机字符串
System.Text.StringBuilder sbString = new System.Text.StringBuilder();
for(int i = 0; i < 20; i++)
{
sbString.Append((char)random.Next((int)'A',(int)'Z'));
}
return sbString.ToString();
}
图书导读
