碼農最怕眼高手低
今天來練習mvc Area技術和bootstrap以及異步表單的C#代碼實現。
1.area區域架構對於建立復雜業務邏輯很有幫助，由 AreaRegistration.RegisterAllAreas()方法遍歷路由表，獲得所有注冊的路由。參見
建立類庫Common，下設一個文件夾BookStore
在其中建立model和controller。（注意引用System.Web.Mvc這個dll）
項目結構如圖：
其中book.cs為model模型
namespace Common.BookStore { public class Book { public string bookName { get; set; } public double price { get; set; } public string bookType { get; set; } public int num { get; set; } } }
注意controller中不要忘了繼承Controller
namespace Common.BookStore { public class BookCurdController:Controller {
//添加頁面 public ActionResult BookAdd() { return View(); }
//模擬添加操作頁面 public ActionResult _BookAdd(Book bookModel) { bookModel.num += 1; return View(bookModel); } } }
2.建立一個基本mvc程序，我用的mvc4，在根目錄下建立Areas文件夾，然后右鍵-添加-區域，輸入我們的BookStore
這樣我們添加了一個區域，刪除其中的controller和model文件夾。
接着對生成的BookStoreAreaRegistration進行修改
public class BookStoreAreaRegistration : AreaRegistration { public override string AreaName { get {
//此為區域的名稱，與我們的區域文件夾同名 return "BookStore"; } } public override void RegisterArea(AreaRegistrationContext context) { context.MapRoute( "BookStore_default", "BookStore/{controller}/{action}/{id}", new { action = "Index", id = UrlParameter.Optional }, //命名空間不可少 new string[] { "Common.BookStore" } ); } }
生成Common類庫，在web站點添加對其的引用。
3.現在進行頁面部分的制作，我們先添加bootstrap文件，我從ExtJs源碼中把bootstrap幾個文件扣了出來，添加到web程序中，就像這樣
接着，我們添加頁面上的引用（或者你把它們放到一個局部視圖或者模板視圖中也行）
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.css")" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/Content/bootstrap/js/jqBootstrapValidation.js")"></script>
套用一個bootstrap框架
<div class="container-fluid" style="margin-top:30px;"> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <label class="control-label col-xs-4" for="bookName">書名:</label> <div class=" col-xs-4"> <input id="bookName" class="form-control" type="text" name="bookName" value="" /> </div> </div> </div>
</div> </div>
在這里說明一下，bootstrap依循網格系統，分為12列，最基礎的屬性由less構建（所以想改造它，可以直接修改less），其中.col-xs-* 是針對小尺寸設備（<768px）的樣式。具體參考
http://www.w3cschool.cc/bootstrap/bootstrap-grid-system.html
在設置完樣式之后，我們引入異步代碼
@using (Ajax.BeginForm(
//指定action,controller
"_BookAdd", "BookCurd", null, new AjaxOptions() {
//更新還是替換 InsertionMode = InsertionMode.Replace, HttpMethod = "POST", //標記要更新的div，頁面部分由jquery.validate.unobtrusive.js完成 UpdateTargetId = "showMsg", //提交成功 OnSuccess = "OnSuccess", //提交失敗 OnFailure = "OnFailure", //完成 OnComplete = "OnComplete" }, //這個參數設置form表單的屬性 htmlAttributes: new { name = "nbform", id = "nbform", @class = "form-horizontal" })) { ....... }
最后頁面如下
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>圖書添加</title> <link href="@Url.Content("~/Content/bootstrap/css/bootstrap.css")" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script> <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script> <script type="text/javascript" src="@Url.Content("~/Content/bootstrap/js/jqBootstrapValidation.js")"></script> <script type="text/javascript"> $(function () { $.AddCheckBoxRadioLinster("nbform"); }); function OnSuccess() { alert("提交成功"); } function OnFailure() { alert("提交失敗"); } function OnComplete() { } </script> </head> <body> <div class="container-fluid" style="margin-top:30px;"> @using (Ajax.BeginForm("_BookAdd", "BookCurd", null, new AjaxOptions() { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "showMsg", OnSuccess = "OnSuccess", OnFailure = "OnFailure", OnComplete = "OnComplete" },htmlAttributes: new { name = "nbform", id = "nbform", @class = "form-horizontal" })) { <div class="row"> <div class="col-xs-12"> <div class="form-group"> <label class="control-label col-xs-4" for="bookName">書名:</label> <div class=" col-xs-4"> <input id="bookName" class="form-control" type="text" name="bookName" value="" /> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <label class="control-label col-xs-4" for="price">價格:</label> <div class="col-xs-4"> <input id="price" class="form-control" type="text" name="price" maxlength="16" minlength="1" data-validation-minlength-message="價格最少1位！" data-validation-required-message="不能為空！" required /> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <label class="control-label col-xs-4" for="bookType">種類:</label> <div class="col-xs-4"> <label class="checkbox-inline" > <input type="checkbox" id="bookTypeCheckbox" name="bookTypeCheckbox" value="電子書"/>電子書 </label> <label class="checkbox-inline" > <input type="checkbox" name="bookTypeCheckbox" value="印刷版"/>印刷版 </label> <input type="hidden" id="bookType" name="bookType" /> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <label class="control-label col-xs-4" for="num">數量:</label> <div class="col-xs-4"> <input id="num" class="form-control" type="text" name="num" maxlength="16" minlength="0" data-validation-required-message="不能為空！" required /> </div> </div> </div> </div> <div class="row" > <div class="col-xs-3 col-md-offset-4"> <button type="submit" class="btn btn=default">提 交</button> </div> </div> } </div> <div class="container" id="showMsg"> </div> </body> </html>
效果如圖：
這里還要說明一下，$.AddCheckBoxRadioLinster("nbform");這個是jqBootstrapValidation.js中的函數很好用。我們看一下他的內部實現
$("#" + formId + " input[type='checkbox'],input[type='radio']").each( function () { $(this).change(function() { var name = $(this).attr("name"); var value = ""; $("#" + formId + " input[name='" + name + "']:checked").each(function() { value = value + ";" + $(this).val(); }); var length = $(this).attr("type") == "radio" ? 5 : 8; if (value == "") { $("#" + $(this).attr("name").substr(0, $(this).attr("name").length - length)).val("-1"); } else { $(this).parents(".form-group").first().removeClass("error"); $("#" + $(this).attr("name").substr(0, $(this).attr("name").length - length)).attr("value",length == 5 ? value.substr(1, length) : value + ";"); } }); } );
以字符串拼接的方式來約束字段和處理，它不但可以動態綁定checkbox，radio還可以綁定select下拉框。。。。。。
關於jqBootstrapValidation類似於maxlength 來約束輸入的更多用法，參見：
http://reactiveraven.github.io/jqBootstrapValidation/