我无法弄清楚如何使其与mvc 6正确对齐。“dropdown”有一个CSS标签,但它只是位置:相对而且根本不做任何事情。这是使用Entity Framework自动生成的脚手架。
<div class="form-horizontal">
<h4>Person</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.PersonId)
<div class="form-group">
@Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DisplayFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DisplayFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Roles, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="dropdown">
@Html.DropDownList("RoleList", null, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Roles, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
PAGE SOURCE
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">BDP New User Tool</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/Location">Locations</a></li>
<li><a href="/Country">Countries</a></li>
<li><a href="/Department">Departments</a></li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="wgihBWaaShrDRYvgLvQl0KJsu0kxsOUARHb-vQI02G1yA71ip-y44MmYKFuXBbkLGCvzB1TeOyyC-Zz5NGEWZm9JR-7iRCsmuAv9osMEobzooZglgT4CeWIvvIlKu6wnTLKcAlJo8DW-ci9aD8kV6A2" /> <ul class="nav navbar-nav navbar-right">
<li>
<a href="/Manage" title="Manage">Hello nathan.mckaskle@email.com!</a>
</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Edit</h2>
<form action="/people/Edit/1" method="post"><input name="__RequestVerificationToken" type="hidden" value="P-S-hQ1lZkis-H2u8xV_ovw4chg0_lTzY9gx3h6xJn77k4HqJFQipnnKp5D2TeSFeTciZeACc9iljdDwmKErGepreF-kc3RMf9d1wFPAUlEaqbhAQ8sOBgcXmr0XlRayMEZt1lfA8OfqkpG3_xhN2A2" /> <div class="form-horizontal">
<h4>Person</h4>
<hr />
<input data-val="true" data-val-number="The field PersonId must be a number." data-val-required="The PersonId field is required." id="PersonId" name="PersonId" type="hidden" value="0" />
<div class="form-group">
<label class="control-label col-md-2" for="FullName">Full Name</label>
<div class="col-md-10">
Nathan McKaskle
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Email">Email</label>
<div class="col-md-10">
nathan.mckaskle@email.com
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Roles">Roles</label>
<div class="dropdown">
<select class="form-control" id="RoleList" name="RoleList"><option selected="selected" value="71758b95-b2b1-410a-8267-ebbd26905102">Admin</option>
<option value="5c0c5cba-fb44-4320-8d9c-e76544e77d60">Basic</option>
<option value="c34e731d-30a2-42e5-9d64-d1c2bd33ef17">Create</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="Roles" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
</form>
<div>
<a href="/people">Back to List</a>
</div>
<hr />
<footer>
<p>© 2017 - My ASP.NET Application</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"fa5c07ac3f3645a88405d2c43af159f5"}
</script>
<script type="text/javascript" src="http://localhost:22384/f8c630454ed048b89d34363a3c17c7fe/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
更新:这是对以下答案推荐的HTML的更新。这使得页面上的每个元素遍布整个地方。见下一个截图。
@model NewUserTool.Models.PersonViewModel
@{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Edit</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Person</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.PersonId)
<div class="form-control-static">
@Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DisplayFor(model => model.FullName, new { @class = "form-control" })
</div>
</div>
<div class="form-control-static">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DisplayFor(model => model.Email, new { @class = "form-control" })
</div>
</div>
<div class="form-control-static">
@Html.LabelFor(model => model.Roles, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="dropdown">
@Html.DropDownList("RoleList", null, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.Roles, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-control-static">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
这是:
答案 0 :(得分:1)
DisplayFor
不接受htmlAttributes
之类的EditorFor
。像FullName
这样的字符串的默认显示是在没有任何HTML的情况下转储字符串值,因此在大多数情况下,没有任何实际添加属性的内容。但是,即使这确实有效,你仍然会在这里使用错误的类,因为你正在寻找的实际上是form-control-static
,它将文本对齐,就好像它是类{{1}的输入一样}。所以你真正需要的代码是:
form-control
此外,您的下拉列表未对齐,因为您没有正确传递HTML属性。匿名对象语法中的匿名对象用于<p class="form-control-static">@Html.DisplayFor(m => m.Email)</p>
。 EditorFor
中的该参数实际上是用于其他视图数据。实际上,您正在为名为EditorFor
的{{1}}添加密钥,默认编辑器模板会在ViewData
中查找此密钥并对其执行操作。但是,对于htmlAttributes
,ViewData
等帮助程序,参数本身也适用于HTML属性。结果,你告诉它添加一个名为TextBoxFor
的属性并给它该匿名对象的值,我甚至不确定帮助器会做什么。长和短,将代码更改为:
DropDownListFor
答案 1 :(得分:1)
在html
内,您从未正确包裹dropdown
。如果你有一行,请确保声明列,总计12。
<div class="form-group">
<label class="control-label col-md-2" for="Roles">Roles</label>
<div class="col-md-10">
<div class="dropdown">
<select class="form-control" id="RoleList" name="RoleList"><option selected="selected" value="71758b95-b2b1-410a-8267-ebbd26905102">Admin</option>
<option value="5c0c5cba-fb44-4320-8d9c-e76544e77d60">Basic</option>
<option value="c34e731d-30a2-42e5-9d64-d1c2bd33ef17">Create</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="Roles" data-valmsg-replace="true"></span>
</div>
</div>
</div>
此外,我确实将您的文字包装成p
标签,并将相同的上边距应用于标签。