开始使用

使用Wijmo制作MVC5应用程序,首先要做的是安装Wijmo

测试环境 VS2013(VS2010,VS2012支持MVC3,MVC4)、MVC5、Framework4.5、IE11、Studio for ASP.NET Wijmo2014V1,Note:不支持VS的更高版本

文件-新建项目

在安装了Wijmo之后,在 VS2010,VS2013 中选择新建项目分别如下。在 Web 选项卡中,您可以发现Wijmo。

 

在创建的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(, ), UIHint("IntSlider")]

[Display(Name = "优先级")]

public int Priority { get; set; }

[Range(, )]

[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(, ), 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

工具下载链接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分钟创建应用的更多相关文章

  1. [转]ASP.NET MVC 5– 使用Wijmo MVC 5模板1分钟创建应用

    开始使用 使用ComponentOne Studio for ASP.NET Wijmo制作MVC5应用程序,首先要做的是安装Studio for ASP.NET Wijmo . 测试环境 VS201 ...

  2. ASP.NET MVC 5– 采用Wijmo MVC 5模板1创建应用程序分钟

    启用 采用ComponentOne Studio for ASP.NET Wijmo制作MVC5应用,首先要做的就是安装pid=4&from=MVC4DOC">Studio f ...

  3. 【译】ASP.NET MVC 5 教程 - 5:使用 SQL 服务器 LocalDB 创建连接字符串

    原文:[译]ASP.NET MVC 5 教程 - 5:使用 SQL 服务器 LocalDB 创建连接字符串 在上一节中,我们创建了MovieDBContext 类来连接数据库.处理Movie 对象和数 ...

  4. ASP.NET MVC:01理解MVC模式

    ASP.NET MVC是ASP.NET Web应用程序框架,以MVC模式为基础. MVC:Model View Controller 模型-视图-控制器Model(模型):负责对数据库的存取View( ...

  5. Asp .Net MVC4笔记之走进MVC

    一.MVC三层架构: mvc三层架构,大家都比较熟悉了,这里再介绍一下.Mvc将应用程序分离为三个部分: Model:是一组类,用来描述被处理的数据,同时也定义这些数据如何被变更和操作的业务规则.与数 ...

  6. asp.net core轻松入门之MVC中Options读取配置文件

    接上一篇中讲到利用Bind方法读取配置文件 ASP.NET Core轻松入门Bind读取配置文件到C#实例 那么在这篇文章中,我将在上一篇文章的基础上,利用Options方法读取配置文件 首先注册MV ...

  7. ASP.NET Core中使用自定义MVC过滤器属性的依赖注入

    除了将自己的中间件添加到ASP.NET MVC Core应用程序管道之外,您还可以使用自定义MVC过滤器属性来控制响应,并有选择地将它们应用于整个控制器或控制器操作. ASP.NET Core中常用的 ...

  8. ASP.NET MVC概述及第一个MVC程序

    一.ASP.NET 概述        1. .NET Framework 与 ASP.NET                .NET Framework包含两个重要组件:.NET Framework ...

  9. Pro ASP.NET MVC –第三章 MVC模式

    在第七章,我们将创建一个更复杂的ASP.NET MVC示例,但在那之前,我们会深入ASP.NET MVC框架的细节:我们希望你能熟悉MVC设计模式,并且考虑为什么这样设计.在本章,我们将讨论下列内容 ...

随机推荐

  1. C# ORM中Dto Linq Expression 和 数据库Model Linq Expression之间的转换

    今天在百度知道中看到一个问题,研究了一会便回答了: http://zhidao.baidu.com/question/920461189016484459.html 如何使dto linq 表达式转换 ...

  2. java中注解的使用与实例 (二)

    java 注解,从名字上看是注释,解释.但功能却不仅仅是注释那么简单.注解(Annotation) 为我们在代码中添加信息提供了一种形式化的方法,是我们可以在稍后 某个时刻方便地使用这些数据(通过 解 ...

  3. js jquery中判断checkbox是否被选中的方法

    在js中: document.getElementById("checkboxID").checked   返回true或者false jQuery中: $("input ...

  4. install hdp 2.2 on ubuntu 14.04

    http://www.swiss-scalability.com/2014/12/install-hdp-22-on-ubuntu-1404-trusty.html 在新加节点上运行 sed -e & ...

  5. Python for Infomatics 第14章 数据库和SQL应用二(译)

    14.4 创建数据库和表 相比Python的列表和字典,数据库需要更多的已定义结构. 在我们创建数据库表之前,我们必须预先告诉数据库表和列的命名,以及计划保存到列中和数据类型.当数据库软件预先知道每列 ...

  6. 图片采用base64压缩,可以以字符串的形式传送base64给服务端转存为图片

    (function () { var coverImage = document.querySelector('<div id="coverImage">file< ...

  7. 1_MVC+EF+Autofac(dbfirst)轻型项目框架_core层(以登陆为例)

    前言 在上一篇0_MVC+EF+Autofac(dbfirst)轻型项目框架_基本框架中,我已经介绍了这个轻型框架的层次结构,在下面的这篇文章中,我将以教师登陆功能为例,具体来扩充下我的core层的代 ...

  8. 弱省互测#1 t3

    题意 给出一棵n个点的树,求包含1号点的第k小的连通块权值和.(\(n<=10^5\)) 分析 k小一般考虑堆... 题解 堆中关键字为\(s(x)+min(a)\),其中\(s(x)\)表示\ ...

  9. linux shell重定向总结

    command-line1 [-n] > file或文件操作符或设备 command-line1 [-n] >> file或文件操作符或设备 >suc.txt >err. ...

  10. java分享第十七天-03(封装操作mysql类)

     JAVA操作mysql所需jar包:mysql-connector-java.jar代码: import java.sql.*; import java.util.ArrayList; import ...