如何在 mvc 中将静态 html 转换为 asp.net 剃刀视图?

Question

我有以下简单的引导形式：

@{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>Register</h3>
<br>
<form action="/User/Register">
<div class="form-group row">
<label class="col-sm-2 col-md-1 col-form-label">Name</label>
<div class="col-sm-10 col-md-2">
<input name="name" type="text" class="form-control"  placeholder="Enter Name">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-md-1 col-form-label">Email</label>
<div class="col-sm-10 col-md-2">
<input name="email" type="email" class="form-control"  placeholder="Enter email">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-md-1 col-form-label">MAC</label>
<div class="col-sm-10 col-md-2 positioned_relative">
<span class="add-new-icon glyphicon glyphicon-plus-sign" id="add_mac"> </span>
<input type="text" class="form-control" id="mac_addr" placeholder="Enter MAC">
</div>
</div>
<div class="form-group row new_mac_wrapper">
<div class="col-md-offset-3">
<div class="new_mac_container">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary col-sm-offset-1">Register</button>
</form>

我想将其转换为剃须刀视图，如下所示：

@model RouterManagement.Models.UserViewModel
@{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3 class="pull-left">Register</h3> <br />
@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group row">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "col-sm-2 col-md-1 col-form-label" })
<div class="col-sm-10 col-md-2">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "col-sm-2 col-md-1 col-form-label" })
<div class="col-sm-10 col-md-2">
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "col-sm-2 col-md-1 col-form-label" })
<div class="col-sm-10 col-md-2">
@Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Mac, htmlAttributes: new { @class = "col-sm-2 col-md-1 col-form-label" })
<div class="col-sm-10 col-md-2">
@Html.EditorFor(model => model.Mac, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Mac, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-sm-10 col-md-2">
<input type="submit" value="Create" class="btn btn-primary col-sm-offset-1" />
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>

对于此转换，我得到以下渲染的 HTML：

<form action="/Users/Register" method="post"><input name="__RequestVerificationToken" type="hidden" value="IZ_dvCy7QtB1VsoqQGh6x_Yzr1DME9V6LjKs1Fi8KL6KxOoKNNvFlH6mdw8yD4xIj-LKaUXFsNZndDTeHOa8xCVZPdu7b8qNXeL05IdIyiQ1">        <div class="form-group row">
<label class="col-sm-2 col-md-1 col-form-label" for="Name">Name</label>
<div class="col-sm-10 col-md-2">
<input class="form-control text-box single-line" id="Name" name="Name" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-md-1 col-form-label" for="Email">Email</label>
<div class="col-sm-10 col-md-2">
<input class="form-control text-box single-line" id="Email" name="Email" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-md-1 col-form-label" for="Password">Password</label>
<div class="col-sm-10 col-md-2">
<input class="form-control text-box single-line" id="Password" name="Password" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-md-1 col-form-label" for="Mac">Mac</label>
<div class="col-sm-10 col-md-2">
<span class="field-validation-valid text-danger" data-valmsg-for="Mac" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-sm-10 col-md-2">
<input type="submit" value="Create" class="btn btn-primary col-sm-offset-1">
</div>
</div>
</form>

这大约接近我的静态html。如果您非常注意，您可以看到在剃刀视图的情况下生成的一些其他 html。我对这个额外的html没问题，但是为什么我的设计被破坏了。我检查了css和js文件。一切都很好，但只有与剃须刀转换有关的东西。知道吗？

N.S：我正在从PHP切换到ASP。因此，如果我的问题不是在这里提出的标准问题，我深表歉意。谢谢你的时间。

Answer 1

简而言之 - 这两个 HTML 是不一样的。 它们在以下几点上有所不同： - 在原始引导形式中，您有名称、电子邮件和 Mac 的输入 - 在生成的中，您有名称、电子邮件、密码和 Mac。

然后在原始版本中，每个输入标签都包装在div 中，类 = "表单组行"在生成中只有第一个输入具有这些，其余的只有"表单组"。然后在原始的MAC输入组中，你有带有class="col-sm-10 col-md-2 positioned_relative">的div，而在原始输入组中，没有这样的东西。

同样在原文中，你有div 和class="form-group row new_mac_wrapper">，而在生成的代码中没有。 我不会进一步详细介绍，但正如你所看到的，你有两个不同的代码 - 如果没有机会看到整个项目，很难说是什么破坏了事情。

但是，建议是一点一点地开始 - 从原始和生成的代码中的一个字段(名称(开始。 查看差异，并且只有在没有差异时才能继续添加和比较一个字段。