c#asp.net 3.5中的图像按钮上的文本

我有一个图像按钮。 我想在其上添加“搜索”文本。 我无法添加它,因为VS 2008中的“imagebutton”属性中没有文本控件。 谁能告诉我如何将文字添加到图像按钮?

 

  

你不能用ImageButton做到这一点。

但是,您可以使用简单的Button ,设置文本,并使用CSS添加背景图像(bluebutton.gif)以实现所需的效果。

dotnetslave.com的这个提示为我工作:

 SUBMIT a.lnkSubmit:active { margin:0px 0px 0px 0px; background:url(../../images/li_bg1.jpg) left center no-repeat; padding: 0em 1.2em; font: 8pt "tahoma"; color: #336699; text-decoration: none; font-weight: normal; letter-spacing: 0px; 

}

无法在图像按钮内添加文本。 我也面临同样的问题。 我的解决方案是使用链接按钮而不是图像按钮。 只需在样式标记中添加图像即可。

我认为你不能将文本写入ASP.NET的ImageButton控件。 你可以动态生成图像,如果这是你需要的,并从你的代码后面编写文本,但它会太复杂,使用带有CSS的普通按钮,除非你的图像不能由CSS生成。

您也可以使用asp:Label执行此操作,如下所示:

  

我意识到这是一个老post,但我最近为自己解决了同样的问题。

我创建了一个ImgButton服务器控件来呈现这个:

  

使用CSS来设置背景图像的样式有一些缺点,主要是:

  • 文本倾向于与图像重叠,除非您使用左对齐图像和右对齐文本变得聪明(如果您将RTL语言放入混合中则会很不方便)
  • 图像是背景图像,当我们点击按钮时,它看起来并不是“在按钮上”,它不会像文本一样“向下推”

我将尝试在此处插入代码,但也有完整的源代码和示例: 带有Img标记和标题文本的按钮

ImgButton.cs:

 [DefaultProperty("Text")] [DefaultEvent("Click")] [ToolboxData("<{0}:ImgButton runat=server>")] public class ImgButton : WebControl, IPostBackEventHandler { #region Public Properties public enum ImgButtonStyle { Button, Anchor } [Bindable(true)] [Category("Appearance")] [DefaultValue("")] [Localizable(true)] public string Text { get { String s = (String)ViewState["Text"]; return ((s == null) ? String.Empty : s); } set { ViewState["Text"] = value; } } [EditorAttribute(typeof(System.Web.UI.Design.ImageUrlEditor), typeof(UITypeEditor))] public string ImgSrc { get; set; } public string CommandName { get; set; } public string CommandArgument { get; set; } [EditorAttribute(typeof(System.Web.UI.Design.UrlEditor), typeof(UITypeEditor))] public string NavigateUrl { get; set; } public string OnClientClick { get; set; } public ImgButtonStyle RenderStyle { get; set; } [DefaultValue(true)] public bool UseSubmitBehavior { get; set; } [DefaultValue(true)] public bool CausesValidation { get; set; } public string ValidationGroup { get; set; } [DefaultValue(0)] public int Tag { get; set; } #endregion #region Constructor public ImgButton() { Text = "Text"; ImgSrc = "~/Masters/_default/img/action-help.png"; UseSubmitBehavior = true; CausesValidation = true; } #endregion #region Events // Defines the Click event. public event EventHandler Click; public event CommandEventHandler Command; protected virtual void OnClick(EventArgs e) { if (Click != null) { Click(this, e); } } protected virtual void OnCommand(CommandEventArgs e) { if (Command != null) { Command(this, e); } RaiseBubbleEvent(this, e); } public void RaisePostBackEvent(string eventArgument) { if (CausesValidation) { Page.Validate(ValidationGroup); if (!Page.IsValid) return; } OnClick(EventArgs.Empty); if (!String.IsNullOrEmpty(CommandName)) OnCommand(new CommandEventArgs(CommandName, CommandArgument)); } #endregion #region Rendering // Do not wrap in  tag public override void RenderBeginTag(HtmlTextWriter writer) { writer.Write(""); } protected override void RenderContents(HtmlTextWriter output) { string click; string disabled = (Enabled ? "" : "disabled "); string type = (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior ? "submit" : "button"); string imgsrc = ResolveUrl(ImgSrc ?? ""); if (String.IsNullOrEmpty(NavigateUrl)) click = Page.ClientScript.GetPostBackEventReference(this, ""); else if (NavigateUrl != null) click = String.Format("location.href='{0}'", ResolveUrl(NavigateUrl)); else click = OnClientClick; switch (RenderStyle) { case ImgButtonStyle.Button: if (String.IsNullOrEmpty(NavigateUrl) && UseSubmitBehavior) { output.Write(String.Format( "", ClientID, disabled, CssClass, type, UniqueID, ToolTip, imgsrc, Text )); } else { output.Write(String.Format( "", ClientID, disabled, CssClass, type, UniqueID, click, ToolTip, imgsrc, Text )); } break; case ImgButtonStyle.Anchor: output.Write(String.Format( "\"{4}\"/{6}", ID, disabled, CssClass, click, ToolTip, imgsrc, Text )); break; } } public override void RenderEndTag(HtmlTextWriter writer) { writer.Write(""); } #endregion } 

这是我在我的按钮上使用的CSS(我将“icon”放在按钮的CssClass属性中):

 button.icon { cursor: pointer; } button.icon img { margin: 0px; padding: 0px 5px 0px 5px; vertical-align: middle; } 

如果使用“链接”按钮,则可以添加引导按钮,然后通过CSS“after”属性添加文本。

LinkBut​​ton的:

   

CSS:

 #MainContent_download:after{ content: "Download"; padding-left: 5px; 

}