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

Question

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

  <asp:ImageButton ID="Searchbutton" runat="server" AlternateText="Search" 
        CssClass="bluebutton"
        ImageUrl="../Graphics/bluebutton.gif" Width="110px" 
        onclick="Searchbutton_Click"/>

Answer 1

<button runat="server" 
  style="background-image:url('/Content/Img/stackoverflow-logo-250.png')" >
  your text here<br/>and some more<br/><br/> and some more ....
  </button>

Answer 2

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

<asp:LinkButton 
    CssClass="lnkSubmit" 
    ID="lnkButton" 
    runat="server">SUBMIT</asp:LinkButton>

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;

}

Answer 3

你不能用ImageButton做到这一点。

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

Answer 4

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

Answer 5

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

<style type="text/css">
    .faux-button
    {
        cursor:pointer;
    }
</style>

<div class="faux-button">
    <asp:ImageButton ID="ibtnAddUser" 
        runat="server" 
        ImageUrl="~/Images/add.gif" 
        AlternateText="Add a user image" />
    <asp:Label ID="lblAddUser" 
        runat="server" 
        Text="Add User" 
        AssociatedControlID="imgClick" />
</div>

Answer 6

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

Answer 7

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

LinkBut​​ton的：

<asp:LinkButton id="download" CssClass="btn btn-primary" Text="Download" OnCommand="OnButtonClick" CommandName="Download" runat="server">
                <span aria-hidden="true" class="glyphicon glyphicon-download-alt"></span></asp:LinkButton>

CSS：

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

}

Answer 8

我更喜欢以下解决方案：

                    <div style="padding: 5px; float: left;overflow: auto;height: auto;">
                        <asp:ImageButton ID="ImageButton2" ImageUrl="./icons/search24.png" ToolTip="Search"  runat="server" />
                        <p><asp:Label ID="Label7" runat="server" Text="Search"></asp:Label></p>
                    </div>

您可以更改style以使其居中对齐等。

Answer 9

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

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

<button> <img src="button_icon.png" /> Caption Text </button>

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

• 文本倾向于与图像重叠，除非你巧妙地使用左对齐图像和右对齐文本（如果你将RTL语言抛入混合中则会很不方便）
• 图像是背景图像，当我们点击按钮时它不会“按下”按钮，它不会像文本一样被“按下”

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

ImgButton.cs：

[DefaultProperty("Text")]
[DefaultEvent("Click")]
[ToolboxData("<{0}:ImgButton runat=server></{0}:ImgButton>")]
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 <span> 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(
                        "<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" title=\"{5}\"><img src=\"{6}\" alt=\"{5}\"/>{7}</button>",
                        ClientID,
                        disabled,
                        CssClass,
                        type,
                        UniqueID,
                        ToolTip,
                        imgsrc,
                        Text
                    ));
                }
                else
                {
                    output.Write(String.Format(
                        "<button id=\"{0}\" {1}class=\"{2}\" type=\"{3}\" name=\"{4}\" onclick=\"javascript:{5}\" title=\"{6}\"><img src=\"{7}\" alt=\"{6}\"/>{8}</button>",
                        ClientID,
                        disabled,
                        CssClass,
                        type,
                        UniqueID,
                        click,
                        ToolTip,
                        imgsrc,
                        Text
                    ));
                }
                break;

            case ImgButtonStyle.Anchor:
                output.Write(String.Format(
                    "<a id=\"{0}\" {1}class=\"{2}\" onclick=\"javascript:{3}\" title=\"{4}\"><img src=\"{5}\" alt=\"{4}\"/>{6}</a>",
                    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;
}