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

標籤：構建   filter   風格   note   檔案夾   load   工程檔案目錄   ted   簡單   

開始使用

使用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

 

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

1. ASP.NET MVC 5 - 開始MVC 5之旅

2. ASP.NET MVC 5 - 控制器

3. ASP.NET MVC 5 - 視圖

4. ASP.NET MVC 5 - 將資料從控制器傳遞給視圖

5. ASP.NET MVC 5 - 添加一個模型

6. ASP.NET MVC 5 - 建立連接字串(Connection String)並使用SQL Server LocalDB

7. ASP.NET MVC 5 - 從控制器訪問資料模型

8. ASP.NET MVC 5 - 驗證編輯方法(Edit method)和編輯檢視(Edit view)

9. ASP.NET MVC 5 - 給電影表和模型添加新欄位

10. ASP.NET MVC 5 - 給資料模型添加校正器

11. ASP.NET MVC 5 - 查詢Details和Delete方法

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

 

希望這些文章對感興趣的朋友有所協助，另附上PDF版的匯總文檔：

《ASP.NET MVC 5 入門指南》PDF版

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