原文地址：http://ddmvc4.codeplex.com/
原文名稱：Design and Develop a website using ASP.NET MVC 4, EF, Knockoutjs and Bootstrap
在開始 UI 部分之前，我們先看一下在 ASP.NET MVC4 中使用 Knockoutjs 和 Bootstrap 有什么好處？
Why Knockoutjs:Knockout 使用 javaScript ViewModel 實現了 MVVM 模式. 在 MVC 中還有一個很棒的因素是從 Javascript 模型序列化為 Json 和從 Json 反序列為模型都很簡單，在 MVC4 中已經包含了這個腳本庫, 這使得在我們開發復雜的 UI 的時候，不論怎樣修改，都只需要很少的編碼，馬上我們用它來實現頁面。Why Bootstrap:Twitter 的 Bootstrap 是包括簡單并且靈活的 HTML, CSS, 以及廣受歡迎的 Javascript 用戶界面組件和交互。包括一組 CSS 樣式，組件和 JavaScript 插件。提供了跨平臺的支持， 消除了不同平臺的不一致問題。處理的非常好，良好的文檔和 Twitter Bootstrap's 站點本事就是現實中很棒的參考。最后，它節省了我大量的時間，只需要很少的測試，幾乎沒有瀏覽器的問題，節約了一半的開發時間，在我們的框架中其它優點還包括。
在下面的步驟中，我們將演練使用測試數據來創建布局，設計 UI ，完成上述的目標。Step 1:
創建空白的應用; 命名為 “Application”
在解決方案上右擊鼠標，添加一個新的 ASP.NET MVC4 項目，選擇 Internet Application 模版，使用 Razor 引擎。
完成第 2 步之后 - 項目的結構如下所示
在 MVC 項目上鼠標右擊，選擇管理 NuGet 包，在搜索框中輸入 Bootstrap ，找到后，點擊 Install 按鈕。
有的時候，我會聯不到 NuGet 網站，你可以直接到 BootStrap 網站下載文件，添加到項目中。
主要是使用了樣式文件bootstrap.css，下載后，保存到 Content 文件夾中。
將下面的兩行代碼添加到 App_Start 文件夾中德 BundleConfig.cs文件中，為所有頁面使用 Knockoutjs 和 Bootstrap 提供支持。
bundles.Add(new ScriptBundle("~/bundles/knockout").Include( "~/Scripts/knockout-{version}.js"));bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap.css"));在 Views/Shared 文件夾中 _Layout.cshtml 文件中，添加下面的行，注冊使用 knockout。
Also in _Layout,cshtml file under Views/Shared folder add below line to register knockout files as :
@Scripts.Render("~/bundles/knockout")在視圖文件夾 Views 中添加一個名為 Contack 的文件夾，在其中添加一個名為 Index.cshtml 的視圖文件 ( 這一步可以通過在控制器中的 Index 方法上點擊右鍵完成 )。然后添加一個名為 ContactController 的控制器，在 Scripts 文件夾中添加一個名為 Contact.js 的腳本文件，項目文件夾如下所示：
修改 Route.config 文件，將默認的路由設置到 Contact 控制器。
routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Contact", action = "Index", id = UrlParameter.Optional } );修改 View/Shared 文件夾中的 _Layout.cshtml 文件，使用 BootStrap 語法，修改后的代碼如下所示。
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>@ViewBag.Title - Contact manager</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/knockout") @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @RenderSection("scripts", required: false)</head><body> <div class="container-narrow"> <div class="masthead"> <ul class="nav nav-pills pull-right"> </ul> <h3 class="muted">Contact Manager</h3> </div> <div id="body" class="container"> @RenderSection("featured", required: false) <section> @RenderBody() </section> </div> <hr /> <div id="footer"> <div class="container"> <p class="muted credit">© @DateTime.Now.Year - Design and devloped by <a >Anand Pandey</a>.</p> </div> </div> </div></body></html>現在可以運行程序，效果如下:
我們使用這個頁面顯示 Screen 1 ，顯示聯系人列表。
首先，我們在 Contact.js 中創建一個模擬的聯系人數據數組， (最后我們從數據庫中獲取), 隨后，我們使用這些數據填充表格。
var DummyProfile = [ { "ProfileId": 1, "FirstName": "Anand", "LastName": "Pandey", "Email": "anand@anandpandey.com" }, { "ProfileId": 2, "FirstName": "John", "LastName": "Cena", "Email": "john@cena.com" }]然后，我們創建 ProfilesViewModel， ViewModel 用來保存聯系人信息，數組用來保存聯系人信息的集合。注意這里使用 ko.observableArray, 相當于常規數組，是觀察者模式中的主題，這意味著它可以在其中的項目發生變化的時候，自動更新界面。
最后，我們需要使用 ko.applyBindings() 來激活 knockout.
var ProfilesViewModel = function () { var self = this; var refresh = function () { self.Profiles(DummyProfile); }; // Public data properties self.Profiles = ko.observableArray([]); refresh();};ko.applyBindings(new ProfilesViewModel());下一步，我們需要在 Index.cshtml 頁面寫一些代碼。以顯示聯系人列表。我們在 tbody 元素上使用 foreach 綁定，使用 knockout 根據聯系人數組中的每一個數據生成對應的子元素，然后告訴 knockout 我們希望使用對每個數據生成 tr 來填充 tbody.
<table class="table table-striped table-bordered table-condensed"> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> <tbody data-bind="foreach: Profiles"> <tr> <td data-bind="text: FirstName"></td> <td data-bind="text: LastName"></td> <td data-bind="text: Email"></td> </tr> </tbody></table> <script src="~/Scripts/Contact.js"></script>
如果現在運行程序，就會看到聯系人的簡單列表
不要忘了，我們使用 Bootstrap 的樣式類來應用到 table 上，在上邊的例子中，如下所示。
<table class="table table-striped table-bordered table-condensed">
現在，我們需要為每一行增加編輯和刪除功能，表格的上邊有一個創建新聯系人的按鈕，做以下工作：
頁面內容如下所示 :
<input type="button" class="btn btn-small btn-primary" value="New Contact" data-bind="click:$root.createProfile" /><hr /><table class="table table-striped table-bordered table-condensed"> <tr> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th></th> </tr> <tbody data-bind="foreach: Profiles"> <tr> <td class="name"><a data-bind="text: FirstName, click: $parent.editProfile"></a></td> <td data-bind="text: LastName"></td> <td data-bind="text: Email"></td> <td><button class="btn btn-mini btn-
新聞熱點
疑難解答
