带事件的通用搜索 Web 用户控件

S Sansanwal

4.09/5 (7投票s)

2004年10月11日

2分钟阅读

105230

1487

本文介绍了如何创建 Web 用户控件并捕获其事件。

下载源代码 - 21.9 KB

引言

该控件提供基于名称列搜索表的功能。用户界面使用 DataGrid 显示记录，控件触发一个事件，该事件被容器捕获以处理请求。

局限性

最近，我正在开发一个需要查找大约 30 个表的应用程序。为每个表编写一个 Web 页面似乎需要大量的精力和时间。

解决方案

为了加快开发速度并易于维护，我决定创建一个通用的搜索控件来为我完成所有这些工作。由于所有查找表都有一个名为“name”的公共列，因此我可以只使用一个过滤器来搜索所有表中的数据，这更容易。

示例

启动一个名为“SearchTest”的新 Web 项目。添加一个新的 Web 用户控件，并将其重命名为“SearchControl”。将创建的默认网页“webform1.aspx”重命名为“default.aspx”。添加一个新的 Web 页面，名为“ControlContainer”，它将包含我们的控件。

将以下内容添加到“SearchControl”

名为“lblHeader”的 Web Label，用于显示执行搜索的实体。
名为“txtName”的 Web TextBox，用于输入要搜索的名称。
名为“dgResults”的 Web DataGrid，用于显示搜索结果。
名为“btnRetreive”的 Web Button，用于触发搜索结果的事件。
名为“Close”的 HTML 按钮，用于关闭父窗体。

对于“Close”按钮，添加 JavaScript 以关闭表单。

INPUT type="button" value="Close" 
  onclick=" return CloseForm();" void function CloseForm() { window.close(); }

根据您的需求修改控件的外观和感觉。

在控件的后台代码中，添加

// Event fired when user click button on user control
public event System.EventHandler ButtonClicked; 
/// <summary> 
/// Function that called by button click which
/// in turns fires the buttonclicked event 
/// trapped by the client 
/// </summary> 
protected virtual void OnClick(object sender) 
{ 
    // Raise the tabclicked event. 
    if(this.ButtonClicked != null) 
        this.ButtonClicked(sender, new EventArgs()); 
}
/// <summary> 
/// Function that called when data is retrieve from data layer 
/// Displays the data into the data grid 
/// </summary> 
private void BindData(DataSet ds) 
{ 
    this.dgResults.DataSource = ds.Tables[0]; 
    this.dgResults.DataBind(); 
} 

private void Page_Load(object sender, System.EventArgs e) 
{ 
    // Put user code to initialize the page here 
} 

private void btnRetrieve_Click(object sender, System.EventArgs e) 
{ 
    OnClick(sender);
    // call function that would fire the event trapped by the container 
}
 
/// <summary> 
/// Property to bind dataset to the Grid 
/// </summary> 
public DataSet GridDataSource 
{ 
    set 
    { 
        this.BindData(value); 
    } 
}

/// <summary> 
/// Property to get data against which record to be searched 
/// </summary> 
public string TextName 
{ 
    get { return this.txtName.Text; } 
}
/// <summary> 
/// Property to set Header text 
/// </summary> 
public string HeaderText 
{ 
    set { this.lblHeader.Text = value;  } 
    get { return this.lblHeader.Text;  } 
}

现在，在设计模式下打开“ControlContainer”网页，并将“SearchControl”拖放到此页面上。将“SearchControl”重命名为“searchCtrl”，并添加一个名为“HeaderText”的新属性。将此属性设置为“Customers”。

<uc1:SearchControl id="searchCtrl" runat="server" HeaderText="Customers">
</uc1:SearchControl>

在此页面的后台代码中，添加

protected SearchControl searchCtrl;

在此页面的 Page_Load 事件中，分配函数以捕获控件的 ButtonClicked 事件。

private void Page_Load(object sender, System.EventArgs e)
{
    searchCtrl.ButtonClicked +=new EventHandler(searchCtrl_ButtonClicked);
}
// Function that would be fired when
// user clicked “Retrieve” button on user control

private void searchCtrl_ButtonClicked(object sender, System.EventArgs e)
{
    SearchBLL bll = new SearchBLL();
    bll.SearchData(this.searchCtrl); 
}

添加业务和数据层以从数据库读取数据。请参阅附加的代码。

现在，向 default.aspx 页面添加一个 HTML 按钮。将 OnClick 事件添加到此按钮以打开“ControlContainer”页面。

void function OpenForm() 
{ 
    window.showModalDialog('ControlContainer.aspx', window, 
                     'dialogWidth:450px;dialogHeight:400px;');
}

此代码将打开一个带有我们的用户控件的模态对话框 Web 页面。注意：showModalDialog 仅适用于 IE。

编译并运行该应用程序。单击默认页面上的按钮将打开一个带有控件的模态对话框。输入名称并按“Retrieve”按钮以查看结果。

您会注意到结果已出现在一个新页面中，而不是在模态 Web 页面上。为了使它工作，添加

base target="_self"

在“ControlContainer”网页的“<Head>”标记之间，添加

<HEAD>
  <base target="_self"> 
  <title>ControlContainer</title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>

再次编译并运行该应用程序。

希望这能帮助您了解如何创建 Web 控件、使用它以及在容器中捕获其事件。它可以进一步扩展以将数据库中的每个表映射到在不同列上搜索。