65.9K
CodeProject 正在变化。 阅读更多。
Home

多功能一体式 Web 控件

starIconstarIconemptyStarIconemptyStarIconemptyStarIcon

2.00/5 (4投票s)

2008 年 6 月 16 日

CPOL

3分钟阅读

viewsIcon

33783

downloadIcon

232

一个多用途一体化 Web 控件。

引言

本文介绍了如何动态创建控件(由您选择)并使用来自 SQL Server 数据库的数据填充它。 我假设您已经具备创建 ASP.NET 网页(以及一些 SQL)的知识,因此我不会深入探讨具体的逐步细节。

背景

我需要一个简单的控件,我可以根据需要经常重复使用,以便选择参数,我将使用这些参数在网页上运行报告。我还必须能够轻松选择我要显示的控件类型,以便用于我将要使用的页面。本文演示了一种有效的方法,可以轻松创建这样的控件,该控件可以切换为充当CheckboxListRadioButtonListListBox,并使用来自 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 - 附加了项目示例。
© . All rights reserved.