剃刀巢元素TwitterBootstrapMVC5

Question

如何使用Razor嵌套HTML元素？

以这个简单的HTML为例

<label class="input">
    <i class="icon-prepend fa fa-user"></i>
    <input type="text" name="fname" placeholder="First name">
</label>

Razor的相同之处是什么？对于谁认为这太宽泛了。我基本上想要注册@ Html.Label（）然后继续为它设置子属性，其中包括一个图标和文本框。

甚至可以用剃刀做我想要达到的目标吗？

它将创建类似这样的东西

我试图搞清楚但却失败了。这是我得到的最好的。

<label class="input">
    @Html.Bootstrap().Icon("icon-prepend fa fa-user")
    @Html.Bootstrap().TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>

我也希望用剃须刀制作标签。

Answer 1

您可以这样做：

<label class="input">
    <i class="icon-prepend fa fa-user"></i>
    @Html.TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>

Answer 2

创建custom HTML helper。 HTML助手的输出将是@CarlosAraujo建议的内容：

<label class="input">
    <i class="icon-prepend fa fa-user"></i>
    @Html.TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>

你称之为：

@Html.MyCustomAwesomeTextBoxFor(...)

通过这种方式，您可以在代码中的任何位置封装和重用此组件。