delano delano - 3 months ago 24
ASP.NET (C#) Question

How do I put a Bootstrap Component inside an asp:Button in ASP.Net?

How could I add this Bootstrap component code, which is a search bar :

<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->


In that old asp.net code :

<asp:Panel ID="altHeader3SearchPanel" runat="server" DefaultButton="">
<div class="container-inline" id="search">
<div class="form-item" id=
"edit-search-theme-form-1-wrapper">
<label for=
"edit-search-theme-form-1">Search this
site:</label> <asp:textbox class="form-text" id=
"edit_search_theme_form_1" maxlength="50"
name="search_theme_form" runat="server" size="15" title=
"Enter the terms you wish to search for."
type="text" value="" />
</div>
<asp:Button runat="server" ID="edit_submit" CssClass="form-submit" Text="" />


Everything I tried so far gave me an Error Application or Parse Error...

Win Win
Answer

You just need to replace html controls with server controls.

FYI: You want to set button control id to DefaultButton, if you want to trigger click event when user presses enter.

<asp:Panel ID="altHeader3SearchPanel" runat="server" DefaultButton="GoButton">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <asp:TextBox class="form-control"
                    ID="edit_search_theme_form_1"
                    name="search_theme_form"
                    runat="server"
                    placeholder="Search for..." />
                <span class="input-group-btn">
                    <asp:Button ID="GoButton" runat="server" 
                       CssClass="btn btn-default" Text="Go" />
                </span>
            </div>
        </div>
    </div>
</asp:Panel>
Comments