我在 ASP.NET MVC 4 中迈出了第一步。制作表单时,我在样式方面没有什么问题。下面您可以看到我的 MVC 元素中的内容。它工作正常,但没有任何风格。
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<p>Welcome!</p>
<legend><h2>Log in</h2></legend>
<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Password)
@Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.RememberMe)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.RememberMe)
</div>
<p>
<input type="submit" value="Enter"/>
</p>
</fieldset>
}
下面你可以看到我用传统 html 单独标记的内容。这里的每个元素都有自己的样式,因为我使用了巨大的 css 文件。
<div class="container">
<header>
<h1><strong>Welcome!</strong></h1>
<h2>Log in</h2>
</header>
<section class="main">
<form class="form-3">
<p class="clearfix">
<label for="login">Log in</label>
<input type="text" name="login" id="login" placeholder="Username">
</p>
<p class="clearfix">
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="Password">
</p>
<p class="clearfix">
<input type="checkbox" name="remember" id="remember">
<label for="remember">Запомнить</label>
</p>
<p class="clearfix">
<input type="submit" name="submit" value="Enter">
</p>
</form>
</section>
</div>
问题:如何正确地将我在传统 html 中使用的相同样式(css 文件)应用到我的 MVC 元素中?
编辑:
<div class="container">
<header>
<h1><strong>Welcome</strong></h1>
<h2>Log In</h2>
</header>
<section class="main">
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<form class="form-3">
<p class="clearfix">
<label for="login">Username</label>
<!--<input type="text" name="login" id="login" placeholder="Username">-->
@Html.EditorFor(model => model.UserName, new { id = "login", placeholder = "Username", type = "text", name = "login" })
@Html.ValidationMessageFor(model => model.UserName)
</p>
<p class="clearfix">
<label for="password">Password</label>
<!--<input type="password" name="password" id="password" placeholder="Password">-->
@Html.EditorFor(model => model.Password, new { id = "password", type = "password", name = "password", placeholder = "Password" })
@Html.ValidationMessageFor(model => model.Password)
</p>
<p class="clearfix">
<!--<input type="checkbox" name="remember" id="remember">-->
@Html.EditorFor(model => model.RememberMe, new { type = "checkbox", name = "remember", id = "remember" })
<label for="remember">Remember</label>
</p>
<p class="clearfix">
<input type="submit" name="submit" value="Enter">
</p>
</form>
}
</section>
</div>
最佳答案
如果您希望使用一个或多个 css 文件,您可以执行以下操作:
- 将 CSS 添加到内容文件夹
- 定义捆绑(执行此操作,您可以免费获得缩小和捆绑。有关更多信息 here)
- 将其添加到 _layout.cshtml 中的 header
第 1 步:
第 2 步(App_Start/BundleConfig.cs):
bundles.Add(new StyleBundle("cssPathName").Include(new []
{
"~/Content/Css/Base/style.css"
}
));
第 3 步:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>
</title>
@Styles.Render("cssPathName")
</head>
<body>
</body>
</html>
不想使用捆绑和缩小?
忽略第 2 步并将其用于第 3 步:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>
</title>
<link href="@Url.Content("~/Content/Css/Base/style.css")" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
例如编辑器的内联类
@Html.EditorFor(model => model.RememberMe, new{@class="css-class-name"})
关于jquery - MVC 表单中的自定义样式 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34693123/