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

Question

when applying CSS file into @using section of cshtml file, form is not accepting CSS bootstrap or js file.将 CSS 文件应用到@using文件的@using部分时，表单不接受 CSS 引导程序或 js 文件。 Alignment is getting disturbed when I use @Using (html.beginform())当我使用@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>

Answer 1

You're not applying Bootstrap classes to the form or any form controls, try something like this:您没有将 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"})
}

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

问题描述

1 个解决方案

解决方案1
0 2018-09-19 11:05:23

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

问题描述

1 个解决方案

解决方案1 0 2018-09-19 11:05:23

解决方案1
0 2018-09-19 11:05:23