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

最新推荐文章于 2025-08-07 15:06:12 发布

转载最新推荐文章于 2025-08-07 15:06:12 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/415062

文章标签：

#测试

本文介绍如何使用ComponentOne Studio for ASP.NET Wijmo构建MVC5应用程序，涵盖安装配置、模型创建、控制器及视图生成等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始使用

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

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

         }
        

  