Testo su un pulsante Immagine in c # asp.net 3.5

Ho un pulsante immagine. Volevo aggiungere un testo “Cerca” su di esso. Non riesco ad aggiungerlo perché la proprietà “imagebutton” in VS 2008 non ha il controllo del testo al suo interno. Qualcuno può dirmi come aggiungere testo a un pulsante immagine ??

 

  

Non puoi farlo con ImageButton .

Tuttavia, puoi utilizzare un semplice Button , impostare il testo e aggiungere un’immagine di sfondo (bluebutton.gif) usando il CSS per ottenere l’effetto desiderato.

Questo suggerimento da dotnetslave.com ha funzionato per me:

 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; 

}

Non è ansible aggiungere testo all’interno di un pulsante immagine. Ho anche affrontato lo stesso problema. La mia soluzione era usare un pulsante di collegamento invece di un pulsante immagine. La semplice aggiunta dell’immagine nel tag dello stile dovrebbe funzionare.

Non penso che tu possa scrivere testo su un controllo ImageButton di ASP.NET. Puoi generare un’immagine al volo, se è quello che ti serve, e scrivere il testo dal tuo codice, ma sarà troppo complicato, usa invece il pulsante normale con CSS, a meno che l’immagine non possa essere generata dai CSS.

Puoi anche farlo usando un asp: Label, come questo:

  

Mi rendo conto che questo è un vecchio post, ma di recente ho risolto questo stesso problema.

Ho creato un controllo server ImgButton per eseguire il rendering:

  

L’uso del CSS per modellare un’immagine di sfondo presenta alcuni inconvenienti, principalmente:

  • Il testo tende a sovrapporsi all’immagine a meno che tu non sia intelligente con l’immagine allineata a sinistra e il testo allineato a destra (che è quindi scomodo se lanci una lingua RTL nel mix)
  • L’immagine è un’immagine di sfondo e non sembra “sul pulsante” quando clicchiamo sul pulsante non viene “premuto” come il testo

Proverò a inserire il codice qui, ma anche il codice sorgente completo e gli esempi qui: Pulsante con tag Img e Testo didascalia

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 } 

Ecco il CSS che uso sui miei pulsanti (dove metto “icona” nella proprietà CssClass del pulsante):

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

Se si utilizza un pulsante Link, è ansible aggiungere un pulsante di bootstrap e quindi aggiungere del testo tramite la proprietà “after” del CSS.

LinkButton:

   

CSS:

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

}