Asp.Net MVC4入門指南（10）：第三方控制項Studio for ASP.NET Wijmo MVC4 工具應用

ComponentOne Studio for ASP.NET Wijmo最新版本2013V1支援MVC4，其中包括：

• 新增 MVC 4 工程模板 (C# & VB) 開箱即用的MVC 4 工程模板基於Microsoft內建模板建立，我們僅最佳化了標記和CSS樣式為 Wijmo風格，熟悉的模板布局和介面風格，無疑將縮短您的學習過程、節省開發時間及提高開發效率。
• 新增國際化主題（Metro）
  • MVC4 模板自動增強Wijmo MVC Scaffolding模板，將會為您應用程式中的增刪改查(CRUD)操作產生預設的模板檔案，這些產生的檔案為您的工程構建了起始的工程檔案目錄結構，當然你也可以修改它，Scaffolding模板的優美之處在於產生後您可以按照您的意願來擴充它。
  • Wijmo-增強編輯器模板 該模板使您可以通過日期選取器、數值輸入框和滑動條快速的定製應用。您甚至可以添加其他自訂的模板。

 

  開始使用

使用ComponentOne Studio for ASP.NET Wijmo製作MVC4應用程式，首先要做的是安裝Studio for ASP.NET Wijmo 。

測試環境 VS2012、MVC4、Framework4.5、IE10、Studio for ASP.NET Wijmo2013V1

 檔案-建立項目

在安裝了Studio for ASP.NET Wijmo2013V1 之後，在 VS2012 中選擇建立項目。在 Web 選項卡中，您可以發現Studio for ASP.NET Wijmo2013V1。

好了，現在讓我們運行程式看看初始效果。您可能對這個介面很熟悉。因為Wijmo MVC 4 工程模板是基於Microsoft內建模板建立。我們僅最佳化了標記和CSS樣式為 Wijmo風格。

 添加模型

下面，讓我們使用Wijmo MVC Scaffolding模板建立一個簡易的“ToDoList”。首先我們來添加模型。需要添加以下代碼：

namespace MVC4Wijmo.Models{    public class ToDoList    {        [Editable(false)]        public int Id { get; set; }        [Required]        public string Title { get; set; }        [Display(Name = "Date Created")]        public DateTime? CreatedAt { get; set; }        [Range(0, 5), UIHint("IntSlider")]        public int Priority { get; set; }        [Range(0, 1000000)]        public decimal Cost { get; set; }        [DataType(DataType.MultilineText)]        public string Summary { get; set; }        public bool Done { get; set; }        [Display(Name = "Date Completed")]        public DateTime? DoneAt { get; set; }        public ICollection<TahDoItem> TahDoItems { get; set; }    }    public class TahDoItem    {        [Editable(false)]        public int Id { get; set; }        [Required]        public string Title { get; set; }        [Display(Name = "Date Created")]        public DateTime? CreatedAt { get; set; }        [Range(0, 5), UIHint("IntSlider")]        public int Priority { get; set; }        [DataType(DataType.MultilineText)]        public string Note { get; set; }        public int ToDoListId { get; set; }        public ToDoList ToDoList { get; set; }        public bool Done { get; set; }        [Display(Name = "Date Completed")]        public DateTime? DoneAt { get; set; }    }}

 建立控制器和視圖

在添加控制器和視圖之前，編譯項目。這將使Scaffolding模板識別新增的模型。現在，郵件點擊Controllers檔案夾，選擇“添加控制器”，選擇一下選項點擊“添加”。

Scaffolding將會自動組建控制器和增刪改查應用程式所需要的所有視圖。最大的亮點是這些產生的檔案為您的工程構建了起始的工程檔案目錄結構，當然你也可以修改它，Scaffolding模板的優美之處在於產生後您可以按照您的意願來擴充它。

 運行

僅僅通過以上步驟，我們就實現了簡易的ToDoList。切換到ToDoList頁面，應用程式會給模型建立資料來源，首先展示給我們的是一張空表格。我們可以通過“建立新計劃”按鈕添加計劃。

在建立視圖中您會發現展現在眼前的是標準的EditorFor Helpers。然而我們已經在工程中添加了自訂編輯模板。所以如果使用日期或數值等類型時，Scaffolding模板會自動產生編輯器。下面自訂編輯器視圖：

現在我們就完成了具有增刪改查功能的MVC4應用程式。這些產生的檔案為您的工程構建了起始的工程檔案目錄結構，當然你也可以修改它，Scaffolding模板的優美之處在於產生後您可以按照您的意願來擴充它。

 

Demo源碼下載：TahDoMvc4.zip

工具下載連結：Studio for ASP.NET Wijmo

 完整文檔下載：Asp.Net MVC4入門指南.pdf

-----------------------------------------------------------------------------------------------------------------------------------------------

譯者註：

本系列共9篇文章，翻譯自Asp.Net MVC4 官方教程，由於本系列文章言簡意賅，篇幅適中，從一個樣本開始講解，全文最終完成了一個管理影片的小系統，非常適合新手入門Asp.Net MVC4，並由此開始開發工作。9篇文章為：

1. Asp.Net MVC4 入門介紹

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4

· 譯文地址：http://www.cnblogs.com/powertoolsteam/archive/2012/11/01/2749906.html

2. 添加一個控制器

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-controller

· 譯文地址：http://www.cnblogs.com/powertoolsteam/archive/2012/11/02/2751015.html

3. 添加一個視圖

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view

· 譯文地址：http://www.cnblogs.com/powertoolsteam/archive/2012/11/06/2756711.html

4. 添加一個模型

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-model

· 譯文地址：http://www.cnblogs.com/powertoolsteam/archive/2012/12/17/2821495.html

5. 從控制器訪問資料模型

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/accessing-your-models-data-from-a-controller

· 譯文地址：http://www.cnblogs.com/powertoolsteam/archive/2013/01/11/2855935.html

6. 驗證編輯方法和編輯檢視

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-methods-and-edit-view

· 譯文地址：http://www.cnblogs.com/powertoolsteam/archive/2013/01/24/2874622.html

7. 給電影表和模型添加新欄位

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-new-field-to-the-movie-model-and-table

· 譯文地址：http://www.cnblogs.com/powertoolsteam/archive/2013/02/26/2933105.html

8. 給資料模型添加校正器

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-validation-to-the-model

· 譯文地址：http://www.cnblogs.com/powertoolsteam/archive/2013/03/05/2944030.html 

9. 查詢詳細資料和刪除記錄

· 原文地址：http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-details-and-delete-methods

· 譯文地址：http://www.cnblogs.com/powertoolsteam/archive/2013/03/07/2948000.html

10.第三方控制項Studio for ASP.NET Wijmo MVC4 工具應用

· 地址：http://www.cnblogs.com/powertoolsteam/archive/2013/05/09/3068699.html