使用 MVC 引导 glyphicon答案

【问题标题】：Bootstrap glyphicon with MVC使用 MVC 引导 glyphicon
【发布时间】：2015-12-29 15:57:16
【问题描述】：

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

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

而且它使用如下剃刀语法完美运行，带有文本框的字形图标

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

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

【问题讨论】：

您有什么要求。是否要在文本框旁边显示字形图标？
下一个还是里面，没关系
大多数解决方案将涉及使外部 div 看起来是文本框，或者将字形图标绝对定位在父 div 中并对输入应用左侧或右侧填充。看看这个答案：stackoverflow.com/questions/18838964/…

标签： asp.net-mvc twitter-bootstrap razor

【解决方案1】：

你可以在 bootstrap 中使用输入组，form-control 类会将对象放入框的 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>

【讨论】：

【解决方案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>

结果

【讨论】：