Web框架MVC頁面布局

前端頁面控件布局大部分會采用Div+CSS布局，如果純手工寫的話會比較難以駕馭，很多時候會出現布局凌亂的情況，在快速開發框架中我們引入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是什么？？？

可定義文檔中的分區或節（division/section）,它可以把文檔分割為獨立的、不同的部分，它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。
是一個塊級元素，這意味着它的內容自動地開始一個新行。可以通過  的 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表單數據交互。

 

文章轉載自：Web框架MVC頁面布局
web開發框架 – 雲微平台
本文標題：Web框架MVC頁面布局
本文地址：http://www.hocode.com/