带有MVC的Bootstrap glyphicon

Question

使用Razor语法我可以像这样使用glyphicon：

<div id="addIndirectCityBtn" class="btn btn-success btn-xs">
    <span class="glyphicon glyphicon-plus"></span> Add
</div>

它的工作原理很完美，使用文本框的glyphicon使用razor语法，如下所示

@Html.TextBoxFor(model => model.From.City, new { @id = "cityFrom", @class = "form-control", @placeholder = "City", @style = "margin-bottom: 10px;" })

我应该在哪里使用glyphicon将其放在文本框中或文本框旁边

Answer 1

您可以在bootstrap中使用输入组，表单控件类会将对象的100％宽度放在框中，因此您需要对它们进行分组。

这是一个例子

<div class="input-group">
    @Html.TextBoxFor(model => model.From.City, new { @id = "cityFrom", @class = "form-control", @placeholder = "City", @style = "margin-bottom: 10px;" }
    <span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i> Add</span>
 </div>

Answer 2

如何在Mvc中使用Glyphicons使用模型

• 例如：

<强>模型

public class Menu
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Menuicon { get; set; }
    }

<强>控制器

 [HttpPost]
        public ActionResult Index(Menu m)
        {
            ViewBag.Message = m.Menuicon;
            return View(m);
        }

索引视图

@model projectname.Models.Menu

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.LabelFor(Model => Model.Name)<br />
        @Html.EditorFor(Model => Model.Name)<br />
        @Html.LabelFor(Model => Model.Menuicon)<br />
        @Html.EditorFor(Model => Model.Menuicon)<br />

        <input type="submit" value="Save">
}
<br />

<div>
    <span class="@ViewBag.Message"></span>
</div>

<强>结果