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。如果您关注得很深，在使用razor view的情况下，您会看到一些生成的其他html。我可以使用这个额外的html，但是为什么我的设计被破坏了。我检查了css和js文件。一切都还好，但是有些仅与剃刀转换有关。有想法吗？

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

Answer 1

简而言之-这两个HTML不同。它们在一些方面有所不同： -以原始引导程序形式输入的名称，电子邮件和Mac-在生成后具有名称，电子邮件，密码和Mac。

然后，在原始情况下，每个输入标签都用 class =“ form-group row” 包装在div中，仅在生成的第一个输入中包含这些标签，其余输入仅包含“ form-group”。然后在原始的MAC输入组中，您的div带有 class =“ col-sm-10 col-md-2located_relative” ，而在原始情况下，没有这种东西。

在原始情况下，您的div也具有 class =“ form-group row new_mac_wrapper” ，并且在生成的代码中没有。我不会进一步详细介绍，但是您可以看到您有两个不同的代码-很难说出什么是大问题，而没有机会看到整个项目。

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

如何在ASP.NET MVC中将静态HTML转换为razor视图？

1 个答案: