由圖示加文字實現按鈕功能的圖示按鈕使用者控件

圖示按鈕使用者控制項的開發出於以下常用操作：
---------------------
頁面有儲存【圖示+按鈕】或【ImageButton】 整體實作儲存功能點選儲存操作後可先進行頁面相關欄位的js驗證驗證透過後再進行後台提交可回應onmouseover等事件下的樣式變化

所開發的圖標按鈕使用者控制項需至少符合以下功能要求：
------------------------------------------
1.由圖示+文字組成
圖標的路徑可修改為空是說明沒有圖標
文字的顯示可修改

2.整體需回應及處理其所在頁面對「圖示按鈕」所設定js的onclick事件
如果沒有需處理的onclick事件則不處理

3.整體需回應及處理server的OnClick事件
如果沒有需處理的OnClick事件則不處理

4.整體需響應Disabled
Visible是控件本身就具有的

5.需回應onmouseover等事件下的樣式變化

下面簡單說明下方法

1.建立【圖示文字按鈕】用戶控件

該控制項包含以下部分:
Table佈局控制、
動態輸出的Image的佔位、
動態輸出的文字的佔位、
觸發以響應OnClick事件的隱藏的按鈕

<table>
<tr runat="server" id="tr1" style="cursor:hand;" >
<td>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</td>
<td>
<asp:Literal ID="Literal2" runat="server"></asp:Literal>
</td>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="Button" style="display:none; width:0; height:0;" OnClick="Button1_Click" />

可在table上加以相關的onmouseover樣式處理

包含如下相關屬性和處理

public partial class WebUserControl : System.Web.UI.UserControl
{
#region 屬性及事件

//圖示文字按鈕使用者控制項的按鈕文字
string _strButtonText = "按鈕佔位";
public string strButtonText
{
set { _strButtonText = value; }
get { return _strButtonText; }
}

//圖示文字按鈕使用者控制項的圖示路徑
string _strImageSrc = "";
public string strImageSrc
{
set { _strImageSrc = value; }
get { return _strImageSrc; }
}

//控制項的Disabled
bool _UCDisabled = false;
public bool UCDisabled
{
set
{
this.tr1.Disabled = value;
_UCDisabled = value;
}
get { return _UCDisabled; }
}

//回應onclick的js事件的一個處理函數
string _strOnClickJSFun = "";
public string strOnClickJSFun
{
set { _strOnClickJSFun = value; }
get { return _strOnClickJSFun; }
}

//回應Server端的OnClick事件
public delegate void userEvent(object sender, EventArgs e);
public event userEvent UCOnClick;
protected void Button1_Click(object sender, EventArgs e)
{
if (this.UCOnClick != null)
this.UCOnClick(this, e);
}

#endregion

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (_strButtonText != "")
{
this.Literal2.Text = _strButtonText;
}

if (_strImageSrc != "")
{
this.Literal1.Text = "<img id='" + this.UniqueID + "Image1' src='" + _strImageSrc + "' />";
}

if (UCDisabled)
return;

if (_strOnClickJSFun != "")
{
string strjsfun = _strOnClickJSFun.Replace(";", "").Replace("return ", "");
if (this.UCOnClick != null)
{
this.tr1.Attributes.Add("onclick", "if(" + strjsfun + "){document.all." + this.UniqueID + "_Button1.click();}");
}
else
{
this.tr1.Attributes.Add("onclick", strjsfun);
}
}
else
{
if (this.UCOnClick != null)
{
this.tr1.Attributes.Add("onclick", "document.all." + this.UniqueID + "_Button1.click();");
}
}
}
}
}

2.使用該【圖示文字按鈕】使用者控件

<uc1:WebUserControl ID="WebUserControl1" runat="server" OnUCOnClick="Button1_Click" strOnClickJSFun="return fn_Check();"
strButtonText="修改" strImageSrc="../Images/Edit.gif" />