Die Anwendung von CSS .NET ImageButton

Habe ich Folgendes CSS, die ich anwenden können, um ein HTML-input-tag.

#headerSearch
{
    width: 265px;
}

#headerSearch .text
{
    width: 215px;
}

#headerSearch #searchButton
{
    background: url(../images/searchButton.png) no-repeat 0 0;
    width: 36px;
    border: 1px solid #ccc;
    margin: 0;
}

#headerSearch #searchButton:hover
{
    background: url(../images/searchButton.png) no-repeat 0 -28px;
}

Und die HTML auf die ich es anwenden...

<div id="headerSearch" class="float">
  <input id="txtSearch" class="text left" type="text" />
  <input id="searchButton" class="submit right" type="submit" value="" />
</div>

Funktioniert es auch wunderbar.

Aber ich will ein ImageButton-Steuerelement anstelle der input-tag, weil ich will die Seite Einreichen Verhalten der ImageButton (die Auftritt, wenn Sie darauf klicken, und klicken Sie auf Ereignis ausgelöst wird, etc.), aber ich bin nicht sicher, wie man über das mischen von CSS mit den ImageButton. Ich habe versucht, etwas einfaches wie

<asp:ImageButton ID="ibtnSrch" runat="server" CssClass="searchBtn" onclick="ibtnSrch_Click" AlternateText="Search" />

aber was geschieht, ist das Bild zeigt ein rotes X in einem weißen Kasten (der Standard-Bild-fehlt-Symbol), über.

So, kurz und bündig, wie kann ich mix-elegant mit CSS .NET ImageButton?

InformationsquelleAutor Jagd | 2011-04-13

  1. 0

    Kurz gesagt, ich würde nicht verwenden Sie die asp-image-Taste.

    Ich würde verwenden Sie Ihren aktuellen html-Steuerelemente und fügen Sie einige javascript, klicken Sie auf eine versteckte asp:Button-Steuerelement, wenn Sie Ihre submit input geklickt wird.

    <div id="headerSearch" class="float">
  <input id="txtSearch" class="text left" type="text" />
  <input id="searchButton" class="submit right" type="submit" value="" onclick="<% hiddenSearch.ClientID %>.click();" />
  <asp:Button ID="hiddenSearch" runat="server" style="display:none;" />
</div>

    Ich weiß nicht Recht erinnern, ob das die korrekte syntax, um die client-id...

    Nicht, und hier ist warum. Ich habe RequiredFieldValidators auf der Webseite, und wenn Sie den input-tag abschickt wird auf der Seite des RFV ' s ausgelöst werden und kann dazu führen, die Seite Einreichen, um zu scheitern. Letztlich, das ist, was führte mich zu wollen, zu verwenden .NET ImageButton, weil es die CausesValidation-Attribut und kann die Seite senden, ohne dass der RFV zu initiieren.
    So setzen CausesValidation auf den <asp:Button /> ?
    Ahh, warten Sie ich sehen. Ändern Sie es von einem submit-input-Typ zu einem regulären button.
    Und wenn das nicht funktioniert, verwenden Sie einfach ein normales Bild und legen Sie die onclick auf div.
    Egal, was ich versuche zu sagen ist, dass die asp-Kontrollen sind ein Schmerz, mit zu arbeiten stilistisch. Lassen Sie mich wissen, wenn Sie irgendwelche beunruhigenden Umsetzung es auf meine Weise. Ich werde versuchen zu helfen.

    InformationsquelleAutor Biff MaGriff

  2. 1

    basiert auf der Beispiel-code, den Sie festgelegt haben, dass das <asp:ImageButton /> CssClass zu "searchBtn" aber es ist kein CSS für .searchBtn

    vielleicht fügen Sie diese zu Ihrer css -

    .searchBtn {
    background: url(../images/searchButton.png) no-repeat 0 0;
    border: 1px solid #ccc;
    margin: 0;
}

.searchBtn:hover {
    background: url(../images/searchButton.png) no-repeat 0 -28px;
}

    einer <asp:ImageButton /> macht nach unten zu <input type="image" name="ibtnSrch" id="ibtnSrch" class="searchBtn" src="" alt="Search" style="border-width:0px;" />

    da die Steuerung ist ein Bildeingabe-kein Bild-Quelle, die ist, warum Ihr red x

    InformationsquelleAutor MikeM

  3. 1

    Wenn Sie Ihren searchButton Stil eine Klasse sein, dann können Sie einfach eine <asp:Button>

    <asp:Button ID="ibtnSrch" runat="server" 
            CssClass="submit right searchButton" OnClick="ibtnSrch_Click" />

    Können Sie dann setzen Sie diese Taste in einem separaten ValidationGroup oder set CausesValidation="false".

    Wenn Sie wollen, um es zu halten alle client-Seite und machen die Umleitung der Suchseite in JavaScript, sondern auch wollen, um die Vorteile der ASP.NET die Validierung, die Sie festgelegt haben, um auf die Steuerelemente, die Sie verwenden können, die client-Seite ASP.NET validation.

    InformationsquelleAutor Town

Schreibe einen Kommentar