Question

我正在尝试制作一个小修补程序。我正在使用一个很好的HTML5 / CSS模板，并开发了一个ASP.NET Web应用程序。我试图将代码与HTML / CSS合并。所以在ASP.NET中我使用它来表单输入

@using (Html.BeginForm())
                        {
                            @Html.ValidationSummary()
                            <div class="form-group">
                            <p>Vendor Name: @Html.TextBoxFor(m=> Model.VendorName)</p>
                            <p>Vendor Title: @Html.TextBoxFor(m=> Model.VendorTitle)</p>
                            <p>Description: @Html.TextBoxFor(m=> Model.VendorDescription)</p>
                            <p>Start Date: @Html.EditorFor(m=> Model.StartDate)</p>

                            <input type="submit" name="Add Vendor" />
                        }

然而，在我开始在ASP.NET中输入之前，我将其用于我的表单设计

<div class="form-group">
    <label for="focusedinput" class="col-sm-3 control-label">Vendor Name: </label>
    <div class="col-sm-6">
        <input type="text" class="form-control" id="vcvendorname" placeholder="Default Input" />
    </div>

所以我想做的是拿@html.TextBoxFor（m =＆gt; Model.VendorName）并将其与原始HTML代码合并

下图显示了格式良好的HTML，并在其下方显示了基本的TextBoxFor。 enter image description here

所有帮助非常感谢

Answer 1

要复制您拥有的html，除了指定类和占位符之外，还需要使用@Html.LabelFor(x => x.Field)。

例如

@using (Html.BeginForm())
{
    @Html.ValidationSummary()
    <div class="form-group">
        @Html.LabelFor(x => x.FocussedInput, new { @class = "col-sm-3 control-label" })
        <div class="col-sm-6">
            @Html.TextBoxFor(x => x.FocussedInput, new { @class = "form-control", placeholder = "Default Input" })
        </div>
}

Answer 2

嗯，你的HTML根本不符合之前设计的HTML。你有这个：

<div>
    <p>some text <input></p>
</div>

原件有这个：

<div>
    <label>some text</label>
    <div>
        <input>
    </div>
</div>

所以我完全可以期待任何为一个设计的CSS在另一个上不能正常工作。您可能需要匹配结构。像这样：

<div class="form-group">
    @Html.LabelFor(m=> Model.VendorName)
    <div class="col-sm-6">
        @Html.TextBoxFor(m=> Model.VendorName)
    </div>

......等等。

除此之外，您仍需要将{css class属性添加到label和正在生成的input。 我认为就像这样：

@Html.LabelFor(m=> Model.VendorName, new { @class = "col-sm-3 control-label" })

对于input，还需要指定一些内容以匹配原始内容：

@Html.TextBoxFor(m=> Model.VendorName, new { @class = "form-control", id = "vcvendorname", placeholder = "Default Input" })

关键是，为了将预先存在的样式应用于您的标记，您的标记需要与样式匹配。

asp.net格式化字段输入HTML

2 个答案: