1. 程式人生 > >Asp.Net MVC4入門指南(10):第三方控制元件Studio for ASP.NET MVC4 工具應用

Asp.Net MVC4入門指南(10):第三方控制元件Studio for ASP.NET MVC4 工具應用

ComponentOne Studio for ASP.NET最新版本2013V1支援MVC4,其中包括:

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

開始使用

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

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

檔案-新建專案

在安裝了Studio for ASP.NET 2013V1 之後,在 VS2012 中選擇新建專案。在 Web 選項卡中,您可以發現Studio for ASP.NET 2013V1。

clip_image002

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

clip_image004

新增模型

下面,讓我們使用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資料夾,選擇“新增控制器”,選擇一下選項點選“新增”。

clip_image006

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

執行

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

clip_image008

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

clip_image010

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

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

譯者注:

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

1. Asp.Net MVC4 入門介紹

2. 新增一個控制器

3. 新增一個檢視

4. 新增一個模型

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

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

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

8. 給資料模型新增校驗器

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

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

相關閱讀: