<th id="v9g6b"><track id="v9g6b"></track></th>

  • <em id="v9g6b"><acronym id="v9g6b"></acronym></em>
    <progress id="v9g6b"><pre id="v9g6b"></pre></progress>
    <tbody id="v9g6b"></tbody>
    <button id="v9g6b"><acronym id="v9g6b"></acronym></button>
    <rp id="v9g6b"><ruby id="v9g6b"></ruby></rp>

        <dd id="v9g6b"></dd>

        <em id="v9g6b"></em>

          Web框架MVC页面布局

          前端页面控件布局大部分会采用Div+CSS布局,如果纯手工写的话会比较难以驾驭,很多时候会出现布局凌乱的情况,在Web开发框架中我们引入Bootstrap前端框架, 再配上.Net MVC Hmtl扩展方法,就可以很轻松的实现我们的布局效果。

          Web框架MVC页面布局详解

          示例效果图
          一片代码段
          Div布局
          Bootstrap样式
          MVC Html扩展控件
          整体布局
          扩展知识点
          示例效果图

          搜索区

          一片代码段

          <div class="form-group row">
          <div class="col-md-2">
                 @Html.LabelFor(model => model.FOVH)
          <label>(H mm X V mm)</label>
          </div>
          <div class="col-md-1">
          @Html.TextBoxFor(model => model.FOVH, new { @class = "form-control", placeholder = "H(mm)" })

          </div>
          <div class="col-md-1">
                @Html.TextBoxFor(model => model.FOVV, new { @class = "form-control", placeholder = "V(mm)" })
                @Html.ValidationMessageFor(m => m.FOVV, "", new { @class = "validatetext" })
          </div>

          <div class="col-md-offset-1 col-md-1">
                <label>倍率=<br/>(X)&emsp;</label>
          </div>
          <div class="col-md-1">
                @Html.TextBoxFor(model => model.BL, new { @class = "form-control" })
          </div>
          <div class="col-md-1">
                <input type="submit" class="button-1 search-button btn btn-default" value="速配" />
          </div>
          </div>

          Div布局

          Div是什么???<div> 可定义文档中的分区或节(division/section),它可以把文档分割为独立的、不同的部分,它可以用作严格的组织工具,并且不使用任何格式与其关联。
          <div >是一个块级元素,这意味着它的内容自动地开始一个新行。可以通过 <div > 的 class 或 id 应用额外的样式,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

          Bootstrap样式

          上面代码段中我们可以看到三个这样的样式类form-group、row和col-md-..,是的,这就是页面布局CSS全局样式, form-group表单元素分组,row表单元素成一行,col-md-每个元素所占空间长度百分比,栅格系统与form-inline、form-horizontal、form-group配合使用,可以很容易的控制好页面控件布局,更详细的内容请参考是的,这就是Bootstrap CSS样式栅格系统和表单两部分内容。

          MVC Html扩展控件

          在页面布局中一个数据项基本包括三部分:标签、数据框和数据验证,如代码段中的FOVV属性字段,用到了三个@Html扩展方法LabelFor、TextBoxFor和ValidationMessageFor,分别是标签、数据框和数据验证。
          LabelFor数据绑定属性字段的DisplayName特性,对应web开发框架后台FOVH的DisplayName特性([DisplayName("物方视场")])。 @Html.ValidationMessageFor(m => m.FOVV, "", new { @class = "validatetext" }) 对应Web开发平台后台数据模型的FOVV Required特性([Required(ErrorMessage = "V必填")])。
          Html扩展控件详细信息请参见web框架UI系列--MVC常用控件讲解

          整体布局

          @model CameraLensModel
          @{
          Layout = "~/Views/Shared/_ColumnsOne.cshtml";
          }
          <div class="container">
          <div class="panel panel-default form-panel">
          <div class="panel-heading">
          <h3>镜头相机速配器</h3>
          </div>
          <div class="panel-body">
          <div class="search-input">
          @using (Html.BeginRouteForm("CameraLensSearch", FormMethod.Get))
          {
          <div class="page-header">2、目标</div>
          <div class="form-group row">
          <div class="col-md-2">
          @Html.LabelFor(model => model.FOVH)
          <label>(H mm X V mm)</label>
          </div>
          <div class="col-md-1">
          @Html.TextBoxFor(model => model.FOVH, new { @class = "form-control", placeholder = "H(mm)" }) </div>
          <div class="col-md-1">
          @Html.TextBoxFor(model => model.FOVV, new { @class = "form-control", placeholder = "V(mm)" })
          @Html.ValidationMessageFor(m => m.FOVV, "", new { @class = "validatetext" })
          </div> <div class="col-md-offset-1 col-md-1">
          <label>倍率=<br />(X)&emsp;</label>
          </div>
          <div class="col-md-1">
          @Html.TextBoxFor(model => model.BL, new { @class = "form-control" })
          </div>
          <div class="col-md-1">
          <input type="submit" class="button-1 search-button btn btn-default" value="速配" />
          </div>
          </div>
          }
          </div>
          </div>
          <div class="search-results">
          @if (Model.Products.Count > 0)
          {
          <div class="product-list">
          <div class="row">
          <table class="dataintable">
          <tr>
          <th style="width:25%">型号</th>
          ...
          <th style="width:10%;">详情</th>
          </tr>
          @foreach (var product in Model.Products)
          {
          <tr>
          <td><a href="@Url.RouteUrl(" product", new { sename=product.SeName })">@Text_Truncate(product.Name, 30)</a></td>
          ...
          <td style="text-align:center"><a href="@Url.RouteUrl(" product", new { sename=product.SeName })">详情</a></td>
          </tr>
          }
          </table>
          </div>
          </div>
          }
          </div>
          </div>
          </div>

          视图模型代码段:

          /// 下拉框1
          /// </summary>
          public IList<SelectListItem> AvailableCategories { get; set; }
          /// <summary>
          /// 下拉框1
          /// </summary>
          [DisplayName("下拉框1:")]
          public int Cid { get; set; }

          /// <summary>
          /// ResolutionH
          /// </summary>
          [DisplayName("物方视场")]
          [AllowHtml]
          public string FOVH { get; set; }

          /// <summary>
          /// ResolutionV
          /// </summary>
          [AllowHtml]
          [Required(ErrorMessage = "V必填")]
          public string FOVV { get; set; }

          扩展知识点

          1、新建及视图中引用CameraLensModel视图模型,模型中包含required、Display、AllowHtml等特性。
          2、视图中新增数据字段Html扩展控件及其标签和验证代码。
          3、Pannel、Header、Form、Result等展示区域布局。
          4、web开发框架后台与Ajax及Form表单数据交互。

          网站&系统开发技术学习交流群:463167176

          本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
          转载请注明:文章转载自:华晨软件-云微开发平台 ? Web框架MVC页面布局
          本文标题:Web框架MVC页面布局
          本文地址:http://www.sajuice.com/OrgTec/UI/0007.html

          相关文章: 初识Web框架--Model与ViewModel | web框架UI系列--MVC常用控件讲解

          电话
          电话 18718672256

          扫一扫
          二维码
          本港台开奖 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>