asp.net mvc 5-如何在 cshtml 文件的 @using 部分应用 css bootstrap ,js答案

【问题标题】：asp.net mvc 5- How to apply css bootstrap ,js in @using section of cshtml fileasp.net mvc 5-如何在 cshtml 文件的 @using 部分应用 css bootstrap ,js
【发布时间】：2019-02-23 06:09:09
【问题描述】：

将 CSS 文件应用到 cshtml 文件的@using 部分时，表单不接受 CSS 引导程序或 js 文件。使用时对齐受到干扰 @Using (html.beginform())

@model MVCLogin.Models.LoginClass

@{
    Layout = null;
}

<!DOCTYPE html>






@*<script>
        function ShowMessage() {
            var result = '@ViewData["i"]';
            if (result = 1) {
                return true;
            } else {
                return false;
            }
        }
    </script>*@


<!DOCTYPE html>

<html>
<head>

    <title>Contact V11</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--===============================================================================================-->
    <link rel="icon" type="image/png" href="~/Content/images/icons/favicon.ico" />
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="~/Content/vendor/bootstrap/css/bootstrap.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="~/Content/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="~/Content/fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="~/Content/vendor/animate/animate.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="~/Content/vendor/css-hamburgers/hamburgers.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="~/Content/vendor/select2/select2.min.css">
    <!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="~/Content/css/util.css">
    <link rel="stylesheet" type="text/css" href="~/Content/css/main.css">
    <!--===============================================================================================-->
</head>
<body>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="container-contact100" style="background-image: url('images/bg-01.jpg');">
            <div class="wrap-contact100">
                <form class="contact100-form validate-form">
                    <span class="contact100-form-title">
                        Get in Touch
                    </span>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                        <span class="label-input100">Enter name *</span>
                        @Html.EditorFor(model => model.ClientName, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Your Institute">
                        <span class="label-input100">Your Institution *</span>
                        @Html.EditorFor(model => model.ClientInstitution, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                        <span class="label-input100">Your Address *</span>
                        @Html.EditorFor(model => model.ClientAddress, new { htmlAttributes = new { @class = "input100", size = 50 } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <span class="label-input100">Enter your PIN *</span>
                        @Html.EditorFor(model => model.ClientPIN, new { htmlAttributes = new { @class = "input100", size = 50 } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                        <span class="label-input100">Select Your City *</span><br />
                        @Html.DropDownListFor(model => model.Name, new SelectList(Model.usersinfo, "Name", "Name"), "Select City")
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <span class="label-input100">Enter your GSM1 *</span>
                        @Html.EditorFor(model => model.ClientGSM1, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                        <span class="label-input100">Enter your GSM2  *</span>
                        @Html.EditorFor(model => model.ClientGSM2, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <span class="label-input100">Enter your Phone1 *</span>
                        @Html.EditorFor(model => model.ClientPhone1, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                        <span class="label-input100">Enter your Phone2 *</span>
                        @Html.EditorFor(model => model.ClientPhone2, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <span class="label-input100">Enter your email *</span>
                        @Html.EditorFor(model => model.ClientEmail1, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                        <span class="label-input100">Enter your email *</span>
                        @Html.EditorFor(model => model.ClientEmail2, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <span class="label-input100">Enter ContactPerson *</span>
                        @Html.EditorFor(model => model.ClientContactPerson, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <span class="label-input100">Select  *</span><br />
                        @Html.RadioButtonFor(Model => Model.MultiLocation, "true", new { id = "Active" })
                        @Html.Label("Active", "Yes")
                        @Html.RadioButtonFor(Model => Model.MultiLocation, "false", new { id = "InActive" })
                        @Html.Label("Active", "No")

                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
                        <span class="label-input100">Tell us your LicenseNo *</span>
                        @Html.EditorFor(model => model.LicenseNo, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <span class="label-input100">Enter your LicenseValidUpTo *</span>
                        @Html.EditorFor(model => model.LicenseValidUpTo, new { htmlAttributes = new { @class = "input100" } })
                    </div>

                    <div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
                        <span class="label-input100"> your Activate Status *</span><br />
                        @Html.RadioButtonFor(Model => Model.Activate, "true", new { id = "Active" })
                        @Html.Label("Active", "Active")
                        @Html.RadioButtonFor(Model => Model.Activate, "false", new { id = "InActive" })
                        @Html.Label("Active", "InActive")
                    </div>

                    <div>@ViewData["error"]</div>
                    <input type="submit" value="Save Customer" class="btn btn-success" name="submitButton" />






                    <div id="dropDownSelect1"></div>

                    <!--===============================================================================================-->
                    <script src="~/Content/vendor/jquery/jquery-3.2.1.min.js"></script>

                    <!--===============================================================================================-->
                    <script src="~/Content/vendor/bootstrap/js/popper.js"></script>
                    <script src="~/Content/vendor/bootstrap/js/bootstrap.min.js"></script>
                    <!--===============================================================================================-->
                    <script src="~/Content/vendor/select2/select2.min.js"></script>
                    <!--===============================================================================================-->
                    <script src="~/Content/js/main.js"></script>

                    <!-- Global site tag (gtag.js) - Google Analytics -->
                    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
                    <script>
                        window.dataLayer = window.dataLayer || [];
                        function gtag() { dataLayer.push(arguments); }
                        gtag('js', new Date());

                        gtag('config', 'UA-23581568-13');
                    </script>


            </div>
        </div>
        
    }
</body>
</html>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    @if (Model != null)
    {
        <script type="text/javascript">
            $(function () {
                alert("Inserted Customer ID: " + @Model.ClientID);
            });
        </script>
    }
    @Scripts.Render("~/Content/js/main.js")
    @Styles.Render("~/Content/css/main.css")

    <div>
        @* @Html.ActionLink("Back to List", "http://localhost:50202/ShowClient/Index")*@
        <a href="@Url.Action("Index","ShowClient")">Show Client list</a>
    </div>

【问题讨论】：

能否请您从您的 cshtml 和 css 中显示受影响的代码？
我正在添加我的代码，请尽快回复
你能改进你提供的代码风格吗？真是令人困惑——一个文件中真的有两个<!DOCTYPE html>吗？

标签： javascript css asp.net asp.net-mvc bootstrapping

【解决方案1】：

您没有将 Bootstrap 类应用于表单或任何表单控件，请尝试以下操作：

@using (Html.BeginForm("Text", "ControllerAction", FormMethod.Get, new { 
@class = "form-horizontal" }))
{
    @Html.TextBoxFor(model => model.PropertyName, new { @class="form-control col-sm-3", id="control-id"})
}

【讨论】：