ComponentOne Studio for ASP.NET Wijmo在 MVC4中的应用

<p>ComponentOne Studio for ASP.NET Wijmo最新版本2013V1支持MVC4，其中包括：</p>
<ul>
<li><strong>新增</strong><strong> MVC 4 工程模板 (C# &amp; VB)</strong> 开箱即用的MVC 4 工程模板基于Microsoft内置模板创建，我们仅优化了标记和CSS样式为 Wijmo风格，熟悉的模板布局和界面风格，无疑将缩短您的学习过程、节省开发时间及提高开发效率。</li>
<li><strong>新增国际化主题（Metro）</strong>
<ul>
<li><strong>MVC4 模板自动增强Wijmo</strong> MVC Scaffolding模板，将会为您应用程序中的增删改查(CRUD)操作生成默认的模板文件，这些生成的文件为您的工程构建了起始的工程文件目录结构，当然你也可以修改它，Scaffolding模板的优美之处在于生成后您可以按照您的意愿来扩展它。</li>
<li><strong>Wijmo-增强编辑器模板</strong> 该模板使您可以通过日期选择器、数值输入框和滑动条快速的定制应用。您甚至可以添加其他自定义的模板。</li>
</ul>
</li>
</ul>
<p> </p>
<h1> </h1>
<h1><strong>开始使用</strong></h1>
<p>使用ComponentOne Studio for ASP.NET Wijmo制作MVC4应用程序，首先要做的是安装<a href="http://www.gcpowertools.com.cn/products/download.aspx?pid=4&amp;from=gcdn">Studio for ASP.NET Wijmo</a> 。</p>
<p>测试环境 VS2012、MVC4、Framework4.5、IE10、Studio for ASP.NET Wijmo2013V1</p>
<h2> </h2>
<h2>文件-新建项目</h2>
<p>在安装了Studio for ASP.NET Wijmo2013V1 之后，在 VS2012 中选择新建项目。在 Web 选项卡中，您可以发现Studio for ASP.NET Wijmo2013V1。</p>
<p><a href="http://images.cnitblog.com/blog/139239/201305/09122901-522473ceebf84a549db7e20068868c8a.jpg"><img style="display: inline; border-width: 0px;" title="clip_image002" src="http://images.cnitblog.com/blog/139239/201305/09122912-5169f4bf1ac5416098e9c40c4355b8b3.jpg" alt="clip_image002" width="557" height="331" border="0"></a></p>
<p>好了，现在让我们运行程序看看初始效果。您可能对这个界面很熟悉。因为Wijmo MVC 4 工程模板是基于Microsoft内置模板创建。我们仅优化了标记和CSS样式为 Wijmo风格。</p>
<p><a href="http://images.cnitblog.com/blog/139239/201305/09122913-4136590ed9bd4197b6edd713e14f1c02.jpg"><img style="display: inline; border-width: 0px;" title="clip_image004" src="http://images.cnitblog.com/blog/139239/201305/09122919-e405e0e747b148d8961a29ace4cd62cf.jpg" alt="clip_image004" width="557" height="306" border="0"></a></p>
<h2> </h2>
<h2>添加模型</h2>
<p>下面，让我们使用Wijmo MVC Scaffolding模板创建一个简易的“ToDoList”。首先我们来添加模型。需要添加以下代码：</p>
<pre class="brush: csharp; auto-links: true; collapse: false; first-line: 1; gutter: false; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;">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; }
    }
}</tahdoitem></pre>
<h2> </h2>
<h2>创建控制器和视图</h2>
<p>在添加控制器和视图之前，编译项目。这将使Scaffolding模板识别新增的模型。现在，邮件点击Controllers文件夹，选择“添加控制器”，选择一下选项点击“添加”。</p>
<p><a href="http://images.cnitblog.com/blog/139239/201305/09122920-f69d684ff0454b5b80ad33f589cafcb4.jpg"><img style="display: inline; border-width: 0px;" title="clip_image006" src="http://images.cnitblog.com/blog/139239/201305/09122921-e3446cf2d18c431a904b9ea3b5af5bf9.jpg" alt="clip_image006" width="557" height="364" border="0"></a></p>
<p>Scaffolding将会自动生成控制器和增删改查应用程序所需要的所有视图。最大的亮点是这些生成的文件为您的工程构建了起始的工程文件目录结构，当然你也可以修改它，Scaffolding模板的优美之处在于生成后您可以按照您的意愿来扩展它。</p>
<h2> </h2>
<h2>运行</h2>
<p>仅仅通过以上步骤，我们就实现了简易的ToDoList。切换到ToDoList页面，应用程序会给模型创建数据源，首先展示给我们的是一张空表格。我们可以通过“创建新计划”按钮添加计划。</p>
<p><a href="http://images.cnitblog.com/blog/139239/201305/09122922-e7054733e9204cb789165c099b61072e.jpg"><img style="display: inline; border-width: 0px;" title="clip_image008" src="http://images.cnitblog.com/blog/139239/201305/09122923-48a56092ad0b4fd9bbf7cb12c49a1101.jpg" alt="clip_image008" width="557" height="461" border="0"></a></p>
<p>在创建视图中您会发现展现在眼前的是标准的EditorFor Helpers。然而我们已经在工程中添加了自定义编辑模板。所以如果使用日期或数值等类型时，Scaffolding模板会自动生成编辑器。下面自定义编辑器视图截图：</p>
<p><strong><a href="http://images.cnitblog.com/blog/139239/201305/09122924-65a869b847d54ff894ade4cc686c0fc6.jpg"><img style="display: inline; border: 0px;" title="clip_image010" src="http://images.cnitblog.com/blog/139239/201305/09122924-1b3547e880184d2f919c763f25ac358a.jpg" alt="clip_image010" width="557" height="437" border="0"></a></strong></p>
<p><strong>现在我们就完成了具有增删改查功能的</strong><strong>MVC4</strong><strong>应用程序。</strong>这些生成的文件为您的工程构建了起始的工程文件目录结构，当然你也可以修改它，Scaffolding模板的优美之处在于生成后您可以按照您的意愿来扩展它。</p>
<p><span style="line-height: 1.5;"><br></span></p><p><span style="line-height: 1.5;">Demo源码下载：</span><span style="line-height: 1.5;"> TahDoMvc4.zip (10.95 MB, 下载次数: 159687)

2013-5-9 14:19 上传

点击文件名下载附件 </span></p><p><span style="line-height: 1.5;">工具下载链接：</span><a style="line-height: 1.5;" href="http://www.gcpowertools.com.cn/products/download.aspx?pid=4&amp;from=gcdn">Studio for ASP.NET Wijmo</a></p>