专栏首页葡萄城控件技术团队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。

在创建的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

工具下载链接: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版

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

    背景 在前一篇文章《【初学者指南】在ASP.NET MVC 5中创建GridView》中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类...

    葡萄城控件
  • 【初学者指南】在ASP.NET MVC 5中创建GridView

    介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样。服...

    葡萄城控件
  • ASP.NET MVC 5 - 添加一个模型

    在本节中,您将添加一些类,这些类用于管理数据库中的电影。这些类是ASP.NET MVC 应用程序中的"模型(Model)"。 您将使用.NET Framewor...

    葡萄城控件
  • .NET Core EFCore零基础快速入门简单使用

    Entity Framework (EF) Core 是轻量化、可扩展和跨平台版的对象关系映射程序 (O/RM)数据访问技术,。 它将开发人员从编写大量 SQL...

    跟着阿笨一起玩NET
  • 如何运用领域驱动设计 - 实体

    本文将介绍领域驱动设计(DDD)战术模式中另一个常见且非常重要的概念 - 实体。相对战术模式中其他的一些概念(例如 值对象、领域服务等)来说,实体应该比较容易让...

    句幽
  • 关于EF Code First模式不同建模方式对建表产生的影响

    今天在学EF Code First模式的时候,发现几个很有趣的问题,问题如下: 1、当编写玩实体后,不指定任何主键约束,EF会找长的最像Id的,然后设置其为主键...

    郑小超.
  • .NET 状态机Automatonymous快速入门

    Automatonymous是.NET开发人员的状态机库。它提供了一种流畅的语法来声明状态机,包括状态,事件(支持触发器和数据事件)以及状态/事件活动。尽管Au...

    李明成
  • 基于Siamese Network进行问题句子相似性判定sentence-similarity

    问题句子相似度计算,即给定客服里用户描述的两句话,用算法来判断是否表示了相同的语义。 项目地址:https://github.com/yanqiangmiff...

    致Great
  • Github 项目推荐 | 给黑客使用的机器学习引擎 —— Juice

    Juice 是一个为黑客设计的开放的机器学习框架,用于构建经典、深度或者混合的机器学习应用程序。

    AI研习社
  • 开源导入导出通用库Magicodes.ExporterAndImporter发布

    https://github.com/xin-lai/Magicodes.ExporterAndImporter

    心莱科技雪雁

扫码关注云+社区

领取腾讯云代金券