Search code examples
c#twitter-bootstraprazorglyphicons

add a glyphicon-user to a TextBoxFor control in MVC ASP.NET


I want to show a glyphicon-user at the end of a textBoxFor control in MVC C# but I can't accomplished yet, in the code I show (razor commented @* *@) the span tags that I tried in order to get the glyphicon but didn't work out, could you please help me

            <div class="form-group">
                @Html.LabelFor(model => model.usuario, new { @class = "control-label col-md-2" })  
                <div class="col-md-10">
                    @*<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>*@

                    @Html.TextBoxFor(model => model.usuario, new { @class = "form-control", @placeholder = "Usuario", @type = "text" })
                    @*<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>*@
                    <p class="text-danger"> @Html.ValidationMessageFor(model => model.usuario)</p>
                </div>
            </div>

Solution

  • You are close. You just forgot to include a div element with the class name input-group.

    <div class="form-group">
        @Html.LabelFor(model => model.usuario, new { @class = "control-label col-md-2" })
        <div class="col-md-10">  
            <div class="input-group"> // missing div 
                @Html.TextBoxFor(model => model.usuario, new { @class = "form-control", @placeholder = "Usuario" })
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <p class="text-danger">@Html.ValidationMessageFor(model => model.usuario)</p>
            </div>
        </div>
    </div>
    

    Also you don't need this in your TextBoxFor.. @type = "text"

    Here is Bootply.

    Hopefully this helps.