ASP.NET MVC 5– 使用Wijmo MVC 5模板1分鐘創(chuàng)建應(yīng)用

開始使用

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

測(cè)試環(huán)境 VS2013、MVC5、Framework4.5、IE11、Studio for ASP.NET Wijmo2014V1

文件-新建項(xiàng)目

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

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

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

好了，現(xiàn)在讓我們運(yùn)行程序看看初始效果。您可能對(duì)這個(gè)界面很熟悉。因?yàn)閃ijmo MVC 5 工程模板是基于Microsoft內(nèi)置模板創(chuàng)建。我們優(yōu)化了標(biāo)記和CSS樣式為 Wijmo風(fēng)格。

添加模型

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

public class TahDoList
{
[Editable(false)]
public int Id { get; set; }
[Required]
[Display(Name = "標(biāo)題")]
public string Title { get; set; }
[Display(Name = "創(chuàng)建日期")]
public DateTime? CreatedAt { get; set; }
[Range(0, 5), UIHint("IntSlider")]
[Display(Name = "優(yōu)先級(jí)")]
public int Priority { get; set; }
[Range(0, 1000000)]
[Display(Name = "花費(fèi)")]
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 = "創(chuàng)建日期")]
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; }
}

創(chuàng)建控制器和視圖

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

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

Scaffolding將會(huì)自動(dòng)生成控制器和增刪改查應(yīng)用程序所需要的所有視圖。最大的亮點(diǎn)是這些生成的文件為您的工程構(gòu)建了起始的工程文件目錄結(jié)構(gòu)，當(dāng)然你也可以修改它，Scaffolding模板的優(yōu)美之處在于生成后您可以按照您的意愿來擴(kuò)展它。

運(yùn)行

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

填寫完成后，點(diǎn)擊Create，進(jìn)入Index頁面。

現(xiàn)在我們就完成了具有增刪改查功能的MVC5應(yīng)用程序。這些生成的文件為您的工程構(gòu)建了起始的工程文件目錄結(jié)構(gòu)，當(dāng)然你也可以修改它，Scaffolding模板的優(yōu)美之處在于生成后您可以按照您的意愿來擴(kuò)展它。

示例下載鏈接：TahDo.zip

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