Как преобразовать статический HTML в бритву в asp.net MVC? - PullRequest
Новая
       5

Как преобразовать статический HTML в бритву в asp.net MVC?

0 голосов
/ 09 сентября 2018

У меня есть следующая простая форма начальной загрузки: 

@{
    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. Все в порядке, но есть кое-что, связанное только с преобразованием бритвы. Любая идея?

Н.С .: Я перехожу с PHP на ASP. Поэтому я прошу прощения, если мой вопрос не является стандартным, чтобы задать здесь. Спасибо за ваше время.

1 Ответ

0 голосов
/ 10 сентября 2018

Вкратце - эти два HTML-кода не совпадают. Они отличаются в нескольких вещах: - в исходной форме начальной загрузки у вас есть входные данные для имени, электронной почты и Mac - в сгенерированном у вас есть имя, адрес электронной почты, пароль и Mac.

Тогда в оригинале каждый входной тег заключен в div с class = "row-group row" в сгенерированном только первом входе есть эти, а остальные имеют только "form-group". Тогда в оригинале внутри группы ввода MAC у вас есть div с class = "col-sm-10 col-md-2 positioned_relative" , а в оригинале такого нет.

Также в оригинале у вас есть div с class = "строка группы форм new_mac_wrapper" и в сгенерированном коде его нет. Я не буду вдаваться в подробности, но, как вы видите, у вас есть два разных кода - трудно сказать, что ломает вещи, без возможности увидеть весь проект.

Тем не менее, предложение состоит в том, чтобы начинать понемногу - начинать с одного поля (Имя) в оригинале и в сгенерированном коде. Просматривайте различия и только когда их нет, продолжайте добавлять и сравнивать одно поле за раз.

...