The icon button user control is developed for the following common operations:
--------------------------
The page has saved [icon + button] or [ImageButton] to realize the overall saving function. After clicking the save operation, js verification of the relevant fields of the page can be performed first, and then background submission can be performed after the verification is passed. It can respond to style changes under onmouseover and other events.
The developed icon button user control must meet at least the following functional requirements:
------------------------------------------
1. Composed of icons + text
The path of the icon can be modified to be empty, which means there is no icon.
Text display can be modified
2. The entire system needs to respond to and process the onclick event of the js set for the "icon button" on the page where it is located.
If there is no onclick event that needs to be handled, it will not be processed.
3. The overall need to respond to and handle the server's OnClick event
If there is no OnClick event that needs to be handled, it will not be processed.
4. The overall response needs to be Disabled
Visible is inherent in the control itself
5. Need to respond to style changes under events such as onmouseover
The following is a brief explanation of the method
1. Create the [icon text button] user control
The control contains the following parts:
Table layout control,
Placeholder for dynamically output Image,
Placeholder for dynamically output text,
Hidden button that fires in response to the OnClick event
<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" />
You can add related onmouseover style processing to the table
Contains the following related attributes and processing
public partial class WebUserControl : System.Web.UI.UserControl
{
#region Properties and Events
//Button text of icon text button user control
string _strButtonText = "Button placeholder";
public string strButtonText
{
set { _strButtonText = value; }
get { return _strButtonText; }
}
//Icon path of icon text button user control
string _strImageSrc = "";
public string strImageSrc
{
set { _strImageSrc = value; }
get { return _strImageSrc; }
}
//Disabled of the control
bool _UCDisabled = false;
public boolUCDisabled
{
set
{
this.tr1.Disabled = value;
_UCDisabled = value;
}
get { return _UCDisabled; }
}
//A processing function that responds to the onclick js event
string _strOnClickJSFun = "";
public string strOnClickJSFun
{
set { _strOnClickJSFun = value; }
get { return _strOnClickJSFun; }
}
//Response to the OnClick event on the server side
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. Use the [icon text button] user control
<uc1:WebUserControl ID="WebUserControl1" runat="server" OnUCOnClick="Button1_Click" strOnClickJSFun="return fn_Check();"
strButtonText="Modify" strImageSrc="../Images/Edit.gif" />