ASP.NET MVC 5– 使用Wijmo MVC 5模板1分鐘創建應用

開始使用

使用ComponentOne Studio for ASP.NET Wijmo制作MVC5應用程序，首先要做的是安裝Studio for ASP.NET Wijmo 。

測試環境 VS2013、MVC5、Framework4.5、IE11、Studio for ASP.NET Wijmo2014V1

文件-新建項目

在安裝了Studio for ASP.NET Wijmo2014V1 之后，在 VS2012 中選擇新建項目。在 Web 選項卡中，您可以發現Studio for ASP.NET Wijmo 2014V1。

在創建的Views|Shared下，打開_Layout.cshtml。模板中添加了一些菜單、按鈕、復選框、簡單的輸入框等Wijmo控件。找到 <ul class="nav navbar-nav"> ， 替換為如下代碼：

@Html.ActionLink("Home", "Index", "Home")
@Html.ActionLink("添加列表", "Create", "TahDoList")
@Html.ActionLink("About", "About", "Home")

好了，現在讓我們運行程序看看初始效果。您可能對這個界面很熟悉。因為Wijmo MVC 5 工程模板是基于Microsoft內置模板創建。我們優化了標記和CSS樣式為 Wijmo風格。

添加模型

下面，為TahDoList和TahDoItem創建一個POCO（Plain Old CLR Objects）模型。需要在Models文件夾中添加一個新類，命名為ToDo.cs，并添加以下代碼：

public class TahDoList
{
[Editable(false)]
public int Id { get; set; }
[Required]
[Display(Name = "標題")]
public string Title { get; set; }
[Display(Name = "創建日期")]
public DateTime? CreatedAt { get; set; }
[Range(0, 5), UIHint("IntSlider")]
[Display(Name = "優先級")]
public int Priority { get; set; }
[Range(0, 1000000)]
[Display(Name = "花費")]
public decimal Cost { get; set; }
[DataType(DataType.MultilineText)]
[Display(Name = "摘要")]
public string Summary { get; set; }
[Display(Name = "完成日期")]
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 = "創建日期")]
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 TahDoListId { get; set; }
public TahDoList TahDoList { get; set; }
[Display(Name = "完成日期")]
public DateTime? DoneAt { get; set; }
}

創建控制器和視圖

接下來，為TahDoList和TahDoItem添加控制器。右鍵點擊Controllers文件夾，選擇“添加控制器”，選擇一下選項點擊“添加”。命名為TahDoListController。然后再模板的Scaffolding選項窗口中選擇如下設置：

單擊Add，Visual Studio將生成所有需要的東西。

Scaffolding將會自動生成控制器和增刪改查應用程序所需要的所有視圖。最大的亮點是這些生成的文件為您的工程構建了起始的工程文件目錄結構，當然你也可以修改它，Scaffolding模板的優美之處在于生成后您可以按照您的意愿來擴展它。

運行

僅僅通過以上步驟，我們就實現了簡易的ToDoList。切換到ToDoList頁面，應用程序會給模型創建數據源，首先展示給我們的是一張空表格。我們可以通過“Lists|Add List”按鈕添加計劃。

填寫完成后，點擊Create，進入Index頁面。

現在我們就完成了具有增刪改查功能的MVC5應用程序。這些生成的文件為您的工程構建了起始的工程文件目錄結構，當然你也可以修改它，Scaffolding模板的優美之處在于生成后您可以按照您的意愿來擴展它。

示例下載鏈接：TahDo.zip

工具下載鏈接：Studio for ASP.NET Wijmo