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](http://www.gcpowertools.com.cn/products/download.aspx?pid=4&from=csdn) 。 測試環境 VS2012、MVC4、Framework4.5、IE10、Studio for ASP.NET Wijmo2013V1 ### 文件-新建項目 在安裝了Studio for ASP.NET Wijmo2013V1 之后，在 VS2012 中選擇新建項目。在 Web 選項卡中，您可以發現Studio for ASP.NET Wijmo2013V1。 [](http://images.cnitblog.com/blog/139239/201305/09122901-522473ceebf84a549db7e20068868c8a.jpg) 好了，現在讓我們運行程序看看初始效果。您可能對這個界面很熟悉。因為Wijmo MVC 4 工程模板是基于Microsoft內置模板創建。我們僅優化了標記和CSS樣式為 Wijmo風格。 [](http://images.cnitblog.com/blog/139239/201305/09122913-4136590ed9bd4197b6edd713e14f1c02.jpg) ### ? ### 添加模型 下面，讓我們使用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文件夾，選擇“添加控制器”，選擇一下選項點擊“添加”。 [](http://images.cnitblog.com/blog/139239/201305/09122920-f69d684ff0454b5b80ad33f589cafcb4.jpg) Scaffolding將會自動生成控制器和增刪改查應用程序所需要的所有視圖。最大的亮點是這些生成的文件為您的工程構建了起始的工程文件目錄結構，當然你也可以修改它，Scaffolding模板的優美之處在于生成后您可以按照您的意愿來擴展它。 ### ? ### 運行 僅僅通過以上步驟，我們就實現了簡易的ToDoList。切換到ToDoList頁面，應用程序會給模型創建數據源，首先展示給我們的是一張空表格。我們可以通過“創建新計劃”按鈕添加計劃。 [](http://images.cnitblog.com/blog/139239/201305/09122922-e7054733e9204cb789165c099b61072e.jpg) 在創建視圖中您會發現展現在眼前的是標準的EditorFor Helpers。然而我們已經在工程中添加了自定義編輯模板。所以如果使用日期或數值等類型時，Scaffolding模板會自動生成編輯器。下面自定義編輯器視圖截圖： **[](http://images.cnitblog.com/blog/139239/201305/09122924-65a869b847d54ff894ade4cc686c0fc6.jpg)** **現在我們就完成了具有增刪改查功能的**MVC4**應用程序。**這些生成的文件為您的工程構建了起始的工程文件目錄結構，當然你也可以修改它，Scaffolding模板的優美之處在于生成后您可以按照您的意愿來擴展它。 **Demo源碼下載：**[TahDoMvc4.zip](http://gcdn.grapecity.com/attachment.aspx?attachmentid=5453) **工具下載鏈接：**[Studio for ASP.NET Wijmo](http://www.gcpowertools.com.cn/products/download.aspx?pid=4&from=csdn) ----------------------------------------------------------------------------------------------------------------------------------------------- 譯者注： 本系列共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.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](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.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](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.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](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.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](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.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](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.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](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.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](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.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?](http://www.cnblogs.com/powertoolsteam/archive/2013/03/05/2944030.html%20) 9. 查詢詳細信息和刪除記錄 · 原文地址：[http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-details-and-delete-methods](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](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](http://www.cnblogs.com/powertoolsteam/archive/2013/05/09/3068699.html)