c# - 如何调整默认 HTML 代码以匹配模板布局？

Question

这是我为注册帐户并将数据发送到我的数据库（sql）而编写的原始代码。我正在尝试将此代码放入我下载的模板中。当我尝试调整模板代码以便将数据发送到我的 sql 时，布局完全改变了。有没有办法在不丢失布局的情况下调整模板代码？

原始代码：

<h2>Create</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>User</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.u_name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.u_name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.u_name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.u_surname, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.u_surname, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.u_surname, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.u_username, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.u_username, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.u_username, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.u_password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.u_password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.u_password, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.u_role, "u_role", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("u_role", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.u_role, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

模板代码：

<div class="login">
    <div class="container">
        <form>
            <div class="col-md-6 login-do1 animated wow fadeInLeft" data-wow-delay=".5s">
                <div class="login-mail">
                    <input type="text" placeholder="Name" required="">
                </div>
                <div class="login-mail">
                    <input type="text" placeholder="Surname" required="">
                </div>
                <div class="login-mail">
                    <input type="text" placeholder="Username" required="">
                </div>
                <div class="login-mail">
                    <input type="password" placeholder="Password" required="">
                </div>
                <div class="login-mail">
                    <input type="text" placeholder="Role" required="">
                </div>
                <a class="news-letter" href="#">
                    <label class="checkbox1"><input type="checkbox" name="checkbox"><i> </i>I agree with the terms</label>
                </a>

            </div>
            <div class="col-md-6 login-do animated wow fadeInRight" data-wow-delay=".5s">
                <label class="hvr-sweep-to-top login-sub">
                    <input type="submit" value="Submit">
                </label>
                <p>Already register</p>
                <a href="login.html" class="hvr-sweep-to-top">Login</a>
            </div>
            <div class="clearfix"> </div>
        </form>
    </div>


</div>

标签： c#htmlcss

Answer 1

您必须确保包含样式表（.css）和引导库。尝试这样的事情：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Title</title>
    <link href="~/css/styleExample.min.css" rel="stylesheet">
    <link href="~/Content/Site.css" rel="stylesheet" />

</head>
<body id="page-top" class="sidebar-toggled">


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="login">
        <div class="container">
            <form>
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="col-md-6 login-do1 animated wow fadeInLeft" data-wow-delay=".5s">
                    <div class="login-mail">
                        @Html.EditorFor(model => model.u_name, new { htmlAttributes = new { @class = "form-control", @placeholder="Name", @type = "text"   } })
                        @Html.ValidationMessageFor(model => model.u_name, "", new { @class = "text-danger" })
                    </div>
                    <div class="login-mail">
                        @Html.EditorFor(model => model.u_surname, new { htmlAttributes = new { @class = "form-control", @placeholder="Surname", @type = "text"  } })
                        @Html.ValidationMessageFor(model => model.u_surname, "", new { @class = "text-danger" })
                    </div>
                    <div class="login-mail">
                        @Html.EditorFor(model => model.u_username, new { htmlAttributes = new { @class = "form-control", @placeholder="Username", @type = "text" } })
                        @Html.ValidationMessageFor(model => model.u_username, "", new { @class = "text-danger" })
                    </div>
                    <div class="login-mail">
                        @Html.EditorFor(model => model.u_password, new { htmlAttributes = new { @class = "form-control", @placeholder = "Password", @type = "password" } })
                        @Html.ValidationMessageFor(model => model.u_password, "", new { @class = "text-danger" })
                    </div>
                    <div class="login-mail">
                        @Html.DropDownList("u_role", null, htmlAttributes: new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.u_role, "", new { @class = "text-danger" })
                    </div>
                    <a class="news-letter" href="#">
                        <label class="checkbox1"><input type="checkbox" name="checkbox"><i> </i>I agree with the terms</label>
                    </a>

                </div>
                <div class="col-md-6 login-do animated wow fadeInRight" data-wow-delay=".5s">
                    <label class="hvr-sweep-to-top login-sub">
                        <input type="submit" value="Submit">
                    </label>
                    <p>Already register</p>
                    <a href="login.html" class="hvr-sweep-to-top">Login</a>
                </div>
                <div class="clearfix"> </div>
            </form>
            }
        </div>
         @Html.ActionLink("Back to List", "Index")
    </div>


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>

我希望这可以帮助你。