1. 程式人生 > >ASP.NET MVC 5– 使用Wijmo MVC 5模板1分鐘建立應用

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

開始使用

使用Wijmo製作MVC5應用程式,首先要做的是安裝Wijmo

測試環境 VS2013(VS2010,VS2012支援MVC3,MVC4)、MVC5、Framework4.5、IE11、Studio for ASP.NET Wijmo2014V1,Note:不支援VS的更高版本

檔案-新建專案

在安裝了Wijmo之後,在 VS2010,VS2013 中選擇新建專案分別如下。在 Web 選項卡中,您可以發現Wijmo。

image image

在建立的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風格。

final-home

新增模型

下面,為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選項視窗中選擇如下設定:

clip_image006

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

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

執行

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

final-indexlist

填寫完成後,點選Create,進入Index頁面。

final-indexlist

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

《ASP.NET MVC 5 入門指南》12篇文章彙總如下:

希望這些文章對感興趣的朋友有所幫助,另附上PDF版的彙總文件:

我們不但需要知識,也需要好工具來幫助我們更好地進行開發。

使用 Wijmo 能讓您的應用開發更加高效,省時又省力。

相關閱讀: