sqlserver+asp.net+devextreme从零开始(2)

上一篇文章中，基本上我进行了简单的入门学习，并且在sqlserver中创建了一个表，加入了32行的数据。现在该前端的部分了。我又浏览了上一篇文章中asp.net的官方教程，决定用database first创建一个简单的网页来练手和熟悉基本的用法，先不用考虑三方控件devexpress。浏览了基本的内容之后，觉得大致明白，但是对asp.net的理解不是很深刻。而这个比较重要，毕竟后面的页面都是asp.net。于是去学习视频教程：

https://mva.microsoft.com/en-US/training-courses/introduction-to-asp-net-mvc-8322?l=nKZwZ8Zy_3504984382

开始的第一节有点简单，但是对MVC的概念理解讲的比较细致，复习了一下。记了几点：

核心1：主要区别，不是取html文件，而是通过访问类的方法去动态生成返回。

in asp.net, you call a method of controller class directly, instead of simply getting a file.

核心2：为啥子用这样的架构，主要还是好结构清晰、维护"to write good code"

•Every web application needs somestructure

•MVC helps you stay organized, startto finish

•Often end up with less code, notmore

•Smoother learning curve as yourproject grows

核心3：传统的ASP架构的问题,将controls作为核心。（没关系，我不想花时间学习传统asp，以及有哪些问题……）

核心4：便于unit test（就灌paper写过unit test……）

跟着视频，走了一遍MvcMusicStore这个基本例子。嗯，不错架构的网页。

然后要学习models那一课的时候发现，人家用了github来管理代码。高端啊。好的，我也整一个，我的github连接。发现几个月前注册过一个，直接用。

https://github.com/jorchid

然后和visual studio集成， 一步步教你如何在 Visual Studio 2013 上使用 Github

http://www.admin10000.com/document/4004.html

嗯，原来是先提交，再同步。学到了。

Models就是类。但是比较重要的细节是可以为其增加注解，包括数据类型，显示信息和验证信息。可用于自动界面生成，以及各种绑定。

吐槽下微软的视频在model这节课自己老出错。。是不是证明了他们家EF的code first巨不靠谱……https://mva.microsoft.com/en-US/training-courses/introduction-to-asp-net-mvc-8322?l=Omf358Zy_1604984382

在视频中发现一个IE和VS代码联合调试的利器http://vswebessentials.com/download，可以定位、修改IE中元素在VS中的代码。当然我自己因为网络原因也没有安装成功。暂时跳过。不过意外的发现page inspector就可以做一样的事情，debug启动时不指定浏览器，而是指定page inspector即可。

学到这里我已经发现可以通过添加基于EF的可读写controller的方式已经可以实现基本的增删查改了，但是暂时不做，先学完视频课程的所有东西再说，还有订制化controller，views，bootstrap入门，和权限入门四课。

视频笔记一：Visual studio

1.可以敲prop和两次tab来快速录入类属性。虽然好像效率没有高多少

2.在schtml中可敲例如ul， table，img，video和一次tab快速录入列表。好像也没什么用。。

3.可以使用 page inspector或者vswebessentials来检查页面元素，加快开发

4.在编辑css文件中的颜色的时候，可以用color: #来使用图形化的界面录入。总之VS有很多特性便于web开发。

总结一下，快速使用片段录入代码，叫Zen coding，自动提示补全的IntelliSense技术，执行时可以用vswebessentials，也可以去sidewaffle.com加强VS的订制。更多的code相关的信息可以在视频主讲人的github上看到：https://github.com/jongalloway

视频笔记二：

可以配置controller的路径，用route属性

用htmlhelper，尽量不要写html代码。例如@Html.DispalyFor(model=>model.Name).这句主要传递的是属性而非值。和这可以把换成m=>m.Name.

视频笔记三：

bootstrap是默认的前端框架，可以很好的相应浏览器尺寸的变化。

css模版的参考网站：

http://bootswatch.com/

总之，视频认真看，学到很多。

 学完视频后试着写一个asp作为一个阶段性成果，毕竟到现在正式代码一行都没写……

1.参照视频使用已有的数据库和EF

https://msdn.microsoft.com/en-us/data/jj200620

发现视频中的EF版本比我的6.0要新。按照这篇文章更新

http://blog.csdn.net/histry/article/details/49923661

还需要安装visual studio tools添加vs中ef的codefirst的wizard

https://www.microsoft.com/en-us/download/details.aspx?id=40762&751be11f-ede8-5a0c-058c-2ee190a24fa6=True

终于在数据-》实体数据模型向导中看到了"来自数据库的codefirst"

2.在Models文件夹下运行 实体数据模型向导，将上一篇文章中的数据库表加入，生成了如下类：

    public partial class Products_ComputerServer
    {
        [Key]
        public int ProductId { get; set; }

        public string ModelNumber { get; set; }

        [Required]
        public string Name { get; set; }

        public byte[] Picture { get; set; }

        public string Description { get; set; }

        public string Price { get; set; }

        public string CompanyName { get; set; }

        public string SecretLevel { get; set; }

        public string Structure { get; set; }

        public int? Size { get; set; }

        public string CPU { get; set; }

        public string Frequency { get; set; }

        public int? StandardCPUNumber { get; set; }

        public int? MaxCPUNumber { get; set; }

        public string MemoryType { get; set; }

        public string MemorySize { get; set; }

        public string MaxMemorySize { get; set; }

        public string HardDriveInterface { get; set; }

        public string StandardHardDriveSize { get; set; }

        public string MaxHardDriveSize { get; set; }

        public string Contact { get; set; }

        public string DataEntryPerson { get; set; }

        public DateTime? LastUpdateTime { get; set; }

        public string Source { get; set; }
    }
}

以及如下Context

  public partial class ProductContext : DbContext
    {
        public ProductContext()
            : base("name=ProductContext")
        {
        }

        public virtual DbSet Products_ComputerServer { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
        }
    }

3.生成asp.net页面

添加包含读写操作的Web Api2 Odata控制器（使用EF），虽然我还不知道ApI2 Odata什么意思……

名称： ComputerServerController

模型类：Products_ComputerServer (MvcMusicStore.Models)

数据上下文：Products_ComputerServer (MvcMusicStore.Models)

然后点击添加，出错了。应该是新生成的类没有build，重新生成解决方案，再添加，成功。

启动访问http://localhost:4751/ComputerServer；发现不对啊，挂了啊。

然后一看views文件夹，根本就没有页面啊。

重新使用MVC的读写控制器，带视图的，重新创建。

名称：ComputerServer

其余同前，模版选择默认的_layout.cshtml

成功后debug，IE启动。

4.好的，nb。居然成功了。完成了一个可以浏览和增删差改的asp页面，ef框架，sqlserver数据库，如下。

表太大，只好缩小。

详情页：

还有很多问题，比如我们不要那么多列，还有表格太弱，不能筛选搜索，各种表头和属性还是数据库默认的英文等等。

但是，考虑到直到现在，还是一行正式代码都没有写。毕竟原则是“用最少的代码，干最多的活”。