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数据库,如下。




表太大,只好缩小。
详情页:

还有很多问题,比如我们不要那么多列,还有表格太弱,不能筛选搜索,各种表头和属性还是数据库默认的英文等等。
但是,考虑到直到现在,还是一行正式代码都没有写。毕竟原则是“用最少的代码,干最多的活”。





你可能感兴趣的:(网站开发,asp.net,devextreme,mvc,数据库,sql,server)