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模板的優美之處在於生成后您可以按照您的意願來擴展它。

示例下載鏈接TahDo.zip

工具下載鏈接WijmoComponentOne

MVC示例代碼:WijmoMVC.zip

Wijmo產品網站:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo中文文檔:http://wijmo.gcpowertools.com.cn/5/docs/

Wijmo中文學習教程:http://demo.gcpowertools.com.cn/wijmo5/learningwijmo/

 

《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版

 

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

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

 

相關閱讀:

開放才能進步!Angular和Wijmo一起走過的日子

Angular vs React 最全面深入對比

Wijmo已率先支持Angular4 & TypeScript 2.2

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM