[修練營ASP.NET]User Control呼叫頁面上Button的Click

2009-10-01

26015
0

前言

有這樣的需求，通常代表著是很糟糕的設計。
因為User Control與頁面的耦合性變高了。

不過，當前人拉屎，後人得擦屁股時，
也顧不了這麼多了，這邊就提供小小的範例來解決這個問題。

這邊的範例的情況是，當頁面上的UserControl需要模擬MasterPage上的Button.Click時，User Control該怎麼設計，怎麼使用。

Play it

首先，我們先新增一個MasterPage，上面要有ScriptManager與一顆Button，當Button被click了，則Button.text顯示現在的時間。

因為前人的code是VB的，我這邊為了符合大雜匯的現況，MasterPage用.master.vb來開發，頁面跟UserControl則是C#。

.master


<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="btnMaster" runat="server" Text="MasterPageButton" />
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>        
    </div>
    </form>
</body>
</html>

.master.vb


Partial Class MasterPage
    Inherits System.Web.UI.MasterPage

    Protected Sub btnMaster_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnMaster.Click
        Me.btnMaster.Text = System.DateTime.Now.ToString
    End Sub
End Class

接著，我們的UserControl上，也有個按鈕。按下去時，要先處理完這個Button的事情，最後再去點MasterPage上的Button。
這邊我寫了個小小的js function，在點了User Control的按鈕後，要去呼叫這個function，來幫我們點MasterPage上的Button。
User Control要開一個屬性給頁面來設定要按哪一個按鈕，我們這邊屬性名稱為PageButtonClientID。

.ascx


<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
    Inherits="WebUserControl" %>
<asp:Panel ID="Panel1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="UserControl" OnClick="Button1_Click" />
</asp:Panel>

<script type="text/javascript">
    function clickPageButton(buttonID) {
        var pageButton = $get(buttonID);
        pageButton.click();        
    }
</script>

.ascx.cs


using System;
using System.Web.UI;

public partial class WebUserControl : System.Web.UI.UserControl
{
    public string PageButtonClientID
    {
        get;
        set;
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "userControlCallClick", "clickPageButton('" + PageButtonClientID + "');", true);
    }
}

最後，我們在新增一個頁面，套用MasterPage，拉一個UserControl進來，
當我們點選User Control的按鈕時，希望也能呼叫MasterPage上Button的Click事件。

我們在PageLoad的時候，找到MasterPage上的Button，並且將Button的ClientID assign給UserControl.PageButtonClientID。

.aspx


<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="clickByUserControlwithMasterpage.aspx.cs" Inherits="clickByUserControlwithMasterpage" %>
<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>                              
                <uc1:WebUserControl ID="WebUserControl1" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
</asp:Content>

.aspx.cs


using System;
using System.Web.UI.WebControls;

public partial class clickByUserControlwithMasterpage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Button btnMaster = (Button)(this.Master.FindControl("btnMaster"));

        this.WebUserControl1.PageButtonClientID = btnMaster.ClientID;
    }

}

Page載入的畫面