Asp.Net MVC4入门指南（10）：第三方控件Studio for ASP.NET Wijmo MVC4 工具应用

ComponentOne Studio for ASP.NET Wijmo最新版本2013V1支持MVC4，其中包括：

  • 新增 MVC 4 工程模板 (C# & VB) 开箱即用的MVC 4 工程模板基于Microsoft内置模板创建，我们仅优化了标记和CSS样式为 Wijmo风格，熟悉的模板布局和界面风格，无疑将缩短您的学习过程、节省开发时间及提高开发效率。
  • 新增国际化主题（Metro）
    • MVC4 模板自动增强Wijmo MVC Scaffolding模板，将会为您应用程序中的增删改查(CRUD)操作生成默认的模板文件，这些生成的文件为您的工程构建了起始的工程文件目录结构，当然你也可以修改它，Scaffolding模板的优美之处在于生成后您可以按照您的意愿来扩展它。
    • Wijmo-增强编辑器模板 该模板使您可以通过日期选择器、数值输入框和滑动条快速的定制应用。您甚至可以添加其他自定义的模板。

开始使用

使用ComponentOne Studio for ASP.NET Wijmo制作MVC4应用程序，首先要做的是安装Studio for ASP.NET Wijmo 。

测试环境 VS2012、MVC4、Framework4.5、IE10、Studio for ASP.NET Wijmo2013V1

文件-新建项目

在安装了Studio for ASP.NET Wijmo2013V1 之后，在 VS2012 中选择新建项目。在 Web 选项卡中，您可以发现Studio for ASP.NET Wijmo2013V1。

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

添加模型

下面，让我们使用Wijmo MVC Scaffolding模板创建一个简易的“ToDoList”。首先我们来添加模型。需要添加以下代码：

namespace MVC4Wijmo.Models

{

    public class ToDoList

    {

        [Editable(false)]

        public int Id { get; set; }

        [Required]

        public string Title { get; set; }

        [Display(Name = "Date Created")]

        public DateTime? CreatedAt { get; set; }

        [Range(0, 5), UIHint("IntSlider")]

        public int Priority { get; set; }

        [Range(0, 1000000)]

        public decimal Cost { get; set; }

        [DataType(DataType.MultilineText)]

        public string Summary { get; set; }

        public bool Done { get; set; }

        [Display(Name = "Date Completed")]

        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 = "Date Created")]

        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 ToDoListId { get; set; }

        public ToDoList ToDoList { get; set; }

        public bool Done { get; set; }

        [Display(Name = "Date Completed")]

        public DateTime? DoneAt { get; set; }

    }

}

创建控制器和视图

在添加控制器和视图之前，编译项目。这将使Scaffolding模板识别新增的模型。现在，邮件点击Controllers文件夹，选择“添加控制器”，选择一下选项点击“添加”。

Scaffolding将会自动生成控制器和增删改查应用程序所需要的所有视图。最大的亮点是这些生成的文件为您的工程构建了起始的工程文件目录结构，当然你也可以修改它，Scaffolding模板的优美之处在于生成后您可以按照您的意愿来扩展它。

运行

仅仅通过以上步骤，我们就实现了简易的ToDoList。切换到ToDoList页面，应用程序会给模型创建数据源，首先展示给我们的是一张空表格。我们可以通过“创建新计划”按钮添加计划。

在创建视图中您会发现展现在眼前的是标准的EditorFor Helpers。然而我们已经在工程中添加了自定义编辑模板。所以如果使用日期或数值等类型时，Scaffolding模板会自动生成编辑器。下面自定义编辑器视图截图：

现在我们就完成了具有增删改查功能的MVC4应用程序。这些生成的文件为您的工程构建了起始的工程文件目录结构，当然你也可以修改它，Scaffolding模板的优美之处在于生成后您可以按照您的意愿来扩展它。

Demo源码下载：TahDoMvc4.zip

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

时间： 2024-08-08 15:39:23

Asp.Net MVC4入门指南（10）：第三方控件Studio for ASP.NET Wijmo MVC4 工具应用的相关文章

Asp.Net MVC4入门指南（8）：给数据模型添加校验器

在本节中将会给Movie模型添加验证逻辑.并且确保这些验证规则在用户创建或编辑电影时被执行. 保持事情 DRY ASP.NET MVC 的核心设计信条之一是DRY: "不要重复自己(Don't Repeat Yourself)".ASP.NET MVC鼓励您指定功能或者行为,只做一次,然后将它应用到应用程序的各个地方.这可以减少您需要编写的代码量,并减少代码出错率,易于代码维护. 给ASP.NET MVC 和 Entity Framework Code First 提供验证支持是 DR

Asp.Net MVC4入门指南（9）：查询详细信息和删除记录

在本教程中,您将查看自动生成的Details和Delete方法. 查询详细信息和删除记录 打开Movie控制器并查看Details方法. public ActionResult Details(int id = 0) { Movie movie = db.Movies.Find(id); if (movie == null) { return HttpNotFound(); } return View(movie); } Code First 使得您可以轻松的使用Find方法来搜索数据.一个重要

Asp.Net MVC4入门指南（5）：从控制器访问数据模型

在本节中,您将创建一个新的MoviesController类,并在这个Controller类里编写代码来取得电影数据,并使用视图模板将数据展示在浏览器里. 在开始下一步前,先Build一下应用程序(生成应用程序)(确保应用程序编译没有问题) 用鼠标右键单击Controller文件夹,并创建一个新的 MoviesController控制器.当Build成功后,会出现下面的选项.设定以下选项: · 控制器名称: MoviesController.(这是默认值). · 模板: MVC Controll

Asp.Net MVC4入门指南（7）：给电影表和模型添加新字段

在本节中,您将使用Entity Framework Code First来实现模型类上的操作.从而使得这些操作和变更,可以应用到数据库中. 默认情况下,就像您在之前的教程中所作的那样,使用 Entity Framework Code First自动创建一个数据库,Code First为数据库所添加的表,将帮助您跟踪数据库是否和从它生成的模型类是同步的.如果他们不是同步的,Entity Framework将抛出一个错误.这非常方便的在开发时就可以发现错误,否则您可能会在运行时才发现这个问题. (由

Asp.Net MVC4入门指南（4）：添加一个模型

在本节中,您将添加一些类,这些类用于管理数据库中的电影.这些类是ASP.NET MVC 应用程序中的"模型(Model)". 您将使用.NET Framework 数据访问技术Entity Framework,来定义和使用这些模型类.Entity Framework(通常称为 EF) 是支持代码优先的开发模式.代码优先允许您通过编写简单的类来创建对象模型.(相对于"原始的CLR objects",这也被称为POCO 类)然后可以从您的类创建数据库,这是一个非常干净快

Asp.Net MVC4入门指南（3）：添加一个视图

在本节中,您需要修改HelloWorldController类,从而使用视图模板文件,干净优雅的封装生成返回到客户端浏览器HTML的过程. 您将创建一个视图模板文件,其中使用了ASP.NET MVC 3所引入的Razor视图引擎.Razor视图模板文件使用.cshtml文件扩展名,并提供了一个优雅的方式来使用C#语言创建所要输出的HTML.用Razor编写一个视图模板文件时,将所需的字符和键盘敲击数量降到了最低,并实现了快速,流畅的编码工作流程. 当前在控制器类中的Index方法返回了一个硬编码

Asp.Net MVC4入门指南（2）：添加一个控制器

MVC代表: 模型-视图-控制器 .MVC是一个架构良好并且易于测试和易于维护的开发模式.基于MVC模式的应用程序包含: · Models: 表示该应用程序的数据并使用验证逻辑来强制实施业务规则的数据类. · Views: 应用程序动态生成 HTML所使用的模板文件. · Controllers: 处理浏览器的请求,取得数据模型,然后指定要响应浏览器请求的视图模板. 本系列教程,我们将覆盖所有这些概念,并告诉您如何使用它们来构建应用程序. 首先,让我们创建一个控制器类.在解决方案资源管理器中,用

【部分补充】【翻译转载】【官方教程】Asp.Net MVC4入门指南（4）：添加一个模型

4. 添加一个模型 · 原文地址:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-model · 译文地址:http://www.cnblogs.com/powertoolsteam/archive/2012/12/17/2821495.html 本节博主前言:本节需要连接本地服务器,建议Sql Sever 2012 或 2008.如何生成自己的连接字符串请看 http://www.

【翻译转载】【官方教程】Asp.Net MVC4入门指南（3）：添加一个视图

3. 添加一个视图 · 原文地址:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-view · 译文地址:http://www.cnblogs.com/powertoolsteam/archive/2012/11/06/2756711.html Asp.Net MVC4入门指南(3):添加一个视图 在本节中,您需要修改HelloWorldController类,从而使用视图模板文件,