威尼斯wns.9778官网 > 计算机教程 > Bootstrap 垂直(默认)表单

原标题:Bootstrap 垂直(默认)表单

浏览次数:103 时间:2019-06-28

Nuget 确实是个神器,能够将绝大部分开源项目直接应用到项目上,本文将Bootstrap集成到MVC4 中也是通过Nuget来操作的。

在建立asp.net mvc视图中,默认的表单是垂直表单,与vs 自动创建的T4模板是水平表单,相比较,没有了<div > 和 class=control-label ,也没有列布局项 比如col-md-2 <div >了。但<>仍然保留。

 

如下视图代码表示了一个垂直表单。

1.    将twitter.bootstrap.mvc4集成到MVC4中,可通过关键字:twitter.bootstrap.mvc4 或 bootstrap.mvc搜索到。

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div >
@Html.LabelFor(model => model.CategoryID)
@Html.DropDownList("CategoryID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CategoryID, "", new { @class = "text-danger" })
</div>

该包依赖twitter.bootstrap, 会自动将bootstrap集成到项目中。

<div >
@Html.LabelFor(model => model.Title)
@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })

包中的文件说明:

</div>

a.       App_Start BootstrapBundleConfig:配置脚本,样式文件。

<div >
@Html.LabelFor(model => model.Content)
@Html.EditorFor(model => model.Content)
</div>

b.      BootstrapSupport ControlGroupExtensions.cs 扩展HtmlHelper, 方法BeginControlGroupFor,用例:

<div >
@Html.LabelFor(model => model.AuthorName)
@Html.EditorFor(model => model.AuthorName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.AuthorName, "", new { @class = "text-danger" })

Control-group是Bootstrap中用来布局Form的样式,参考:http://twitter.github.com/bootstrap/base-css.html#forms

</div>

             图片 1

<div >
@Html.LabelFor(model => model.PostTime)
@Html.EditorFor(model => model.PostTime, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PostTime, "", new { @class = "text-danger" })

@Html.BeginControlGroupFor(model=>model.Name)

</div>

@Html.LabelFor(model => model.Name,new {@})

<input type="submit" value="新建" />
}

        <div >

 

            @Html.EditorFor(model => model.Name,new {@})

更一般的原始html标记为:

            @Html.ValidationMessageFor(model => model.Name,null,new{@})

<form class="form-horizontal" role="form">     <div class="form-group">        <label for="firstname" class="col-sm-2 control-label">名字</label>        <div class="col-sm-10">           <input type="text" class="form-control" id="firstname"               placeholder="请输入名字">        </div>     </div>     <div class="form-group">        <label for="lastname" class="col-sm-2 control-label">姓</label>        <div class="col-sm-10">           <input type="text" class="form-control" id="lastname"               placeholder="请输入姓">        </div>     </div>     <div class="form-group">        <div class="col-sm-offset-2 col-sm-10">           <div class="checkbox">              <label>                 <input type="checkbox"> 请记住我              </label>           </div>        </div>     </div>     <div class="form-group">        <div class="col-sm-offset-2 col-sm-10">           <button type="submit" class="btn btn-default">登录</button>        </div>     </div>  </form>    </body>  </html>

       </div>

 

@Html.EndControlGroup()


 

生成的代码等效:

<div class="control-group">

……

</div>

 

注意:强烈推荐使用该扩展方法,当提交后台验证不通过后,会在这个div上加上错误样式。例:

        图片 2 

 

c.       BootstrapBaseController.cs, 提供方法显示不同样式(Success,Alert,Error等)的消息。

图片 3

d.      Scripts/ jquery.validate.unobtrusive-custom-for-bootstrap.js,

重写jquery.validate.unobtrusive.js,验证不通过后,用Bootstrap的样式替换原来的错误提示样式。通过学习这个js,可以将其他的任意错误信息样式替换MVC4 中的默认样式。这个是可以修改HTML结构的哦,可比简单的修改css要强大。

         图片 4 

 

e.      Views/Shared/_alerts.cshtml

本文由威尼斯wns.9778官网发布于计算机教程,转载请注明出处:Bootstrap 垂直(默认)表单

关键词:

上一篇:05.php_pdo引用不恰当libmysql.dll导致Apache崩溃

下一篇:没有了