多功能一体式 Web 控件





2.00/5 (4投票s)
一个多用途一体化 Web 控件。
引言
本文介绍了如何动态创建控件(由您选择)并使用来自 SQL Server 数据库的数据填充它。 我假设您已经具备创建 ASP.NET 网页(以及一些 SQL)的知识,因此我不会深入探讨具体的逐步细节。
背景
我需要一个简单的控件,我可以根据需要经常重复使用,以便选择参数,我将使用这些参数在网页上运行报告。我还必须能够轻松选择我要显示的控件类型,以便用于我将要使用的页面。本文演示了一种有效的方法,可以轻松创建这样的控件,该控件可以切换为充当CheckboxList
、RadioButtonList
或ListBox
,并使用来自 SQL Server 数据库的预定或按需数据填充它。添加其他控件类型,例如组合框(我使用 Telerik 的RadComboBox
)和添加其他预设查询(我有十几个以上),通过在几个地方扩展控件很容易实现。从本质上讲,这提供了一种简单的方法来避免为每个网页重建控件(或创建大量自定义控件),并将所有内容整合到一个自定义控件中。
使用代码
我将跳到先向您展示如何轻松实现控件,然后再介绍构建控件本身。
在您的 ASPX 页面中,您需要注册该控件(在此示例中,我将其称为sqlPicker
)
<%@ Register TagPrefix="myCtrl" TagName="myControl" Src="~/Controls/SQLPicker.ascx" %>
然后,您就可以在页面中的某个位置调用该控件,如以下示例所示
<myCtrl:myControl ID="customer" runat="server" ControlType="RadioList"
SqlQuery="CustomerList" />
- AND/OR -
<myCtrl:myControl ID="countries" runat="server" ControlType="CheckList"
SqlQuery="CountryList" Delimiter="," />
- AND/OR -
<myCtrl:myControl ID="customQuery" runat="server" ControlType="ListBox"
SelectCommand="select user, id from userlist" DataTextField="user"
DataValueField="id" delimiter=";" />
并且,在您的代码隐藏中,您可以获取所选内容的文本和值,如下所示
Label1.Text = "VALUE: " + myControl.Value + " TEXT: " + myControl.Text;
此控件支持单选和多选。如果您打算进行多选,则可以指定分隔符。
您可以根据需要扩展此控件的功能。
代码
首先,在您的网站的 *Controls* 文件夹中创建一个空白 Web 控件。对于此示例,我将其命名为 *SQLPicker.ascx*。
对于 *SQLPicker.ascx* 文件,只需要额外的一行。一个PlaceHolder
。
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SQLPicker.ascx.cs"
Inherits="Controls_SQLPicker" %>
<asp:PlaceHolder ID="ControlPlaceHolder" runat="server"></asp:PlaceHolder>
这很容易。现在,对于代码隐藏(*SQLPicker.ascx.cs*)。
首先,如果您要运行 SQL 查询来填充控件,则需要指定一个 using
语句。
using System.Data.SqlClient;
现在,让我们构建实际的控件。
让我们首先枚举我们可以显示的控件类型(这将由使用控件时的ControlType
设置)。如果操作正确,您会注意到使用控件时通过 intellisense 指定的四个选项。*注意:我还使用 Telerik RadControls 的一些控件(例如组合框),但由于并非每个人都有这些控件,因此我没有将它们作为示例包含在内。*
public enum myControlType
{
CheckList,
RadioList,
ListBox
}
private myControlType myControl;
public myControlType ControlType
{
get { return myControl; }
set { myControl = value; }
}
让我们也继续并允许指定其他设置,例如高度和宽度...
private string myWidth;
public string Width
{
get { return myWidth; }
set { myWidth = value; }
}
private string myHeight;
public string Height
{
get { return myHeight; }
set { myHeight = value; }
}
public enum mySqlQuerySelection
{
CustomerList,
CountryList
}
private mySqlQuerySelection mySqlQuery;
public mySqlQuerySelection SqlQuery
{
set { mySqlQuery = value; }
}
private string mySelectCommand;
public string SelectCommand
{
set { mySelectCommand = value; }
}
private string myDataTextField;
public string DataTextField
{
set { myDataTextField = value; }
}
private string myDataValueField;
public string DataValueField
{
set { myDataValueField = value; }
}
private string myDelimiter;
public string Delimiter
{
set { myDelimiter = value; }
}
private string myID;
public override string ID
{
set { myID = value; }
}
现在到了控件的核心部分
CheckBoxList cbl = new CheckBoxList();
RadioButtonList rbl = new RadioButtonList();
ListBox lb = new ListBox();
protected void Page_Load(object sender, EventArgs e)
{
// Lets get the settings that were set by the control and
// store them to some variables
string sID = this.myID;
string sWidth = this.myWidth;
string sHeight = this.myHeight;
myControlType sControlType = this.myControl;
mySqlQuerySelection sQuery = this.mySqlQuery;
string sSelectCommand = this.mySelectCommand;
string sDataTextField = this.myDataTextField;
string sDataValueField = this.myDataValueField;
int width = -1;
int height = -1;
bool pixel = true;
// We'll need to see if width & height are set to pixel or percent
if (null != sWidth && sWidth != string.Empty)
{
if (!sWidth.Contains("%"))
{
sWidth = sWidth.TrimEnd('p', 'x');
}
else
{
pixel = false;
sWidth = sWidth.TrimEnd('%');
}
width = Convert.ToInt32(sWidth);
}
if (null != sHeight && sHeight != string.Empty)
{
if (!sHeight.Contains("%"))
{
sHeight = sHeight.TrimEnd('p', 'x');
}
else
{
pixel = false;
sHeight = sHeight.TrimEnd('%');
}
height = Convert.ToInt32(sHeight);
}
// Lets create an empty placeholder where are control will go
PlaceHolder ph = new PlaceHolder();
// Now we need to determine if the control is using a preset query
// or one that is user specified
string query = "";
if (null != sSelectCommand && sSelectCommand != string.Empty)
query = sSelectCommand;
else
query = GetQueryString();
string dataTextField = "";
if (null != sDataTextField && sDataTextField != string.Empty)
dataTextField = sDataTextField;
else
dataTextField = GetDataTextField();
string dataValueField = "";
if (null != sDataValueField && sDataValueField != string.Empty)
dataValueField = sDataValueField;
else
dataValueField = GetDataValueField();
// Now lets build the control & populate it based on these settings
switch (sControlType)
{
default:
break;
case myControlType.CheckList:
cbl.DataSource = GetDataTable(query);
cbl.DataTextField = dataTextField;
cbl.DataValueField = dataValueField;
cbl.DataBind();
cbl.ID = sID;
ph.Controls.Add(cbl); // adds this control into the placeholder
break;
case myControlType.RadioList:
rbl.DataSource = GetDataTable(query);
rbl.DataTextField = dataTextField;
rbl.DataValueField = dataValueField;
rbl.DataBind();
rbl.ID = sID;
ph.Controls.Add(rbl);
break;
case myControlType.ListBox:
lb.DataSource = GetDataTable(query);
lb.DataTextField = dataTextField;
lb.DataValueField = dataValueField;
lb.DataBind();
lb.ID = sID;
lb.SelectionMode = ListSelectionMode.Multiple;
lb.ToolTip = "Press Ctrl to select multiple values";
if (pixel == true && width != -1)
lb.Width = Unit.Pixel(width);
else if (width != -1)
lb.Width = Unit.Percentage(Convert.ToDouble(width));
if (pixel == true && height != -1)
lb.Height = Unit.Pixel(height);
else if (height != -1)
lb.Height = Unit.Percentage(Convert.ToDouble(height));
ph.Controls.Add(lb);
break;
}
// Finally lets take the control we built and place it into the
// placeholder on the aspx page
ControlPlaceHolder.Controls.Add(ph);
}
page_load
中使用的其他例程如下。 希望它是不言自明的。 如果没有,请随时发表评论。
private string GetQueryString()
{
mySqlQuerySelection sqlQuery = this.mySqlQuery;
string query = "";
switch (sqlQuery)
{
default:
query = "";
break;
case mySqlQuerySelection.CustomerList:
query = "select customer_name as name, customer_id as id " +
"from myCustomerTable order by 1";
break;
case mySqlQuerySelection.CountryList:
query = "select country, country_code from myCountryTable order by 1";
break;
}
return query;
}
private string GetDataTextField()
{
mySqlQuerySelection sqlQuery = this.mySqlQuery;
string dtf = "";
switch (sqlQuery)
{
default:
dtf = "";
break;
case mySqlQuerySelection.CustomerList:
dtf = "name";
break;
case mySqlQuerySelection.CountryList:
dtf = "country";
break;
}
return dtf;
}
private string GetDataValueField()
{
mySqlQuerySelection sqlQuery = this.mySqlQuery;
string dvf = "";
switch (sqlQuery)
{
default:
dvf = "";
break;
case mySqlQuerySelection.CustomerList:
dvf = "id";
break;
case mySqlQuerySelection.CountryList:
dvf = "country_code";
break;
}
return dvf;
}
public DataTable GetDataTable(string query)
{
DataTable myDataTable = new DataTable();
// retrieve connection string stored in the web.config file
String ConnString =
ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;
SqlConnection conn = new SqlConnection(ConnString);
SqlDataAdapter adapter = new SqlDataAdapter();
SqlCommand command = new SqlCommand(query, conn);
command.CommandTimeout = 0;
adapter.SelectCommand = command;
conn.Open();
try
{
adapter.Fill(myDataTable);
}
finally
{
conn.Close();
}
return myDataTable;
}
最后,控制用户获取选择值的一种方式
public string Text
{
get
{
string text = "";
string delimiter = this.myDelimiter;
myControlType sControlType = this.myControl;
switch (sControlType)
{
case myControlType.CheckList:
for (int x = 0; x < cbl.Items.Count; x++)
{
if (cbl.Items[x].Selected == true)
text += cbl.Items[x].Text + delimiter;
}
break;
case myControlType.RadioList:
text = rbl.SelectedItem.Text;
break;
case myControlType.ListBox:
foreach (ListItem lstItem in lb.Items)
{
if (lstItem.Selected == true)
{
if (text.Length == 0)
{
text = lstItem.Text;
}
else
{
// Add text to label.
text += delimiter + lstItem.Text;
}
}
}
break;
}
return text;
}
}
public string Value
{
get
{
string value = "";
string delimiter = this.myDelimiter;
myControlType sControlType = this.myControl;
switch (sControlType)
{
case myControlType.CheckList:
for (int x = 0; x < cbl.Items.Count; x++)
{
if (cbl.Items[x].Selected == true)
value += cbl.Items[x].Value + delimiter;
}
if (value.Length > 1)
value = value.Substring(0, (value.Length - 1));
break;
case myControlType.RadioList:
value = rbl.SelectedValue;
break;
case myControlType.ListBox:
foreach (ListItem lstItem in lb.Items)
{
if (lstItem.Selected == true)
{
if (value.Length == 0)
{
value = lstItem.Value;
}
else
{
// Add text to label.
value += delimiter + lstItem.Value;
}
}
}
break;
}
return value;
}
}
这应该涵盖了基础知识。 可以根据需要扩展控件,以提供其他呈现数据的方式(例如组合框)和其他预设查询以扩展可用选择。 结果是一个控件,您可以立即从一种类型转换为另一种类型,并使用您选择的任何数据填充它,而在您的实际网页上几乎不需要代码。
历史
- 1.0 - 初始版本。
- 1.1 - 附加了项目示例。