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

开始使用

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

mvc5template

在创建的Views|Shared下,打开_Layout.cshtml。模板中添加了一些菜单、按钮、复选框、简单的输入框等Wijmo控件。找到 <ul class="nav navbar-nav"> , 替换为如下代码:

1@Html.ActionLink("Home", "Index", "Home") 2@Html.ActionLink("添加列表", "Create", "TahDoList") 3@Html.ActionLink("About", "About", "Home")

好了,现在让我们运行程序看看初始效果。您可能对这个界面很熟悉。因为Wijmo MVC 5 工程模板是基于Microsoft内置模板创建。我们优化了标记和CSS样式为 Wijmo风格。

final-home

添加模型

下面,为TahDoList和TahDoItem创建一个POCO(Plain Old CLR Objects)模型。需要在Models文件夹中添加一个新类,命名为ToDo.cs,并添加以下代码:

1public class TahDoList 2{ 3[Editable(false)] 4public int Id { get; set; } 5[Required] 6[Display(Name = "标题")] 7public string Title { get; set; } 8[Display(Name = "创建日期")] 9public DateTime? CreatedAt { get; set; } 10[Range(0, 5), UIHint("IntSlider")] 11[Display(Name = "优先级")] 12public int Priority { get; set; } 13[Range(0, 1000000)] 14[Display(Name = "花费")] 15public decimal Cost { get; set; } 16[DataType(DataType.MultilineText)] 17[Display(Name = "摘要")] 18public string Summary { get; set; } 19[Display(Name = "完成日期")] 20public DateTime? DoneAt { get; set; } 21public ICollection<TahDoItem> TahDoItems { get; set; } 22} 23public class TahDoItem 24{ 25[Editable(false)] 26public int Id { get; set; } 27[Required] 28public string Title { get; set; } 29[Display(Name = "创建日期")] 30public DateTime? CreatedAt { get; set; } 31[Range(0, 5), UIHint("IntSlider")] 32public int Priority { get; set; } 33[DataType(DataType.MultilineText)] 34public string Note { get; set; } 35public int TahDoListId { get; set; } 36public TahDoList TahDoList { get; set; } 37[Display(Name = "完成日期")] 38public DateTime? DoneAt { get; set; } 39}

创建控制器和视图

接下来,为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

工具下载链接**:**Studio for ASP.NET Wijmo

本文出自 “葡萄城控件博客” 博客,请务必保留此出处http://powertoolsteam.blog.51cto.com/2369428/1401593

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

PS打包实现AI图像论文,英伟达在实时视频PS之路上越走越远

  编辑:Panda  !(https://nimg.ws.126.net/?urlhttp%3A%2F%2Fdingyue.ws.126.net%2F2020%2F1028%2F88b5e6ffj00qiwi6t000id000l000kup.jpg&thumbnail650x2147483647&quality80&typejpg)

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )