开发者社区> powertoolsteam> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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 中选择新建项目分别如下。
+关注继续查看

开始使用

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ASP.NET MVC 5– 使用Wijmo MVC 5模板1分钟创建应用
原文:ASP.NET MVC 5– 使用Wijmo MVC 5模板1分钟创建应用 开始使用 使用ComponentOne Studio for ASP.NET Wijmo制作MVC5应用程序,首先要做的是安装Studio for ASP.NET Wijmo 。
901 0
《精通 ASP.NET MVC 3 框架(第三版)》----1.5 ASP.NET MVC 3的新特性
MVC 3版的主要特性是引入了Razor视图引擎。以前的MVC版本一直依赖于ASP.NET的视图引擎,它依赖于ASP.NET的<%和%>代码块(如果你曾做过任意一种ASP.NET开发,你肯定看到过它的使用)。
1292 0
《精通 ASP.NET MVC 4》----1.5 ASP.NET MVC 4的新特性
第4版MVC框架在第3版的基础上提供了许多改进。有一些重大的新特性,例如,对Web API应用程序的支持(第25章描述)、对移动设备的支持(第24章),以及一些将内容发送给客户端的有用的优化技术(第24章)等。
1353 0
返璞归真 asp.net mvc (6) - asp.net mvc 2.0 新特性
原文:返璞归真 asp.net mvc (6) - asp.net mvc 2.0 新特性[索引页][源码下载] 返璞归真 asp.net mvc (6) - asp.net mvc 2.0 新特性 作者:webabcd介绍asp.
1131 0
返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性
原文:返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性 [索引页][源码下载] 返璞归真 asp.net mvc (13) - asp.net mvc 5.0 新特性 作者:webabcd介绍asp.
1036 0
+关注
powertoolsteam
经过30年来在控件领域的不断积累,葡萄城已经成为全球最大的控件提供商,旗下多款产品在国际软件行业屡获殊荣,并且在全球被数十万家企业、学校和政府机构等选用。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Java Spring Boot开发实战系列课程【第7讲】:Spring Boot 2.0安全机制与MVC身份验证实战(Java面试题)
立即下载
蚂蚁金服大数据开放式创新实践
立即下载
低代码开发师(初级)实战教程
立即下载