MVC5 入门学习教程.docx
- 文档编号:11982732
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:45
- 大小:1.85MB
MVC5 入门学习教程.docx
《MVC5 入门学习教程.docx》由会员分享,可在线阅读,更多相关《MVC5 入门学习教程.docx(45页珍藏版)》请在冰豆网上搜索。
MVC5入门学习教程
现在直接开始MVC5的学习系列,学习资源来自Micrsoft.
开始使用Asp.NetMVC5
打开VisualStudio2013,然后新建一个项目,具体如下图:
VS13与12/10不同的是创建Web的时候你不能像以前那样直接选你要创建框架项目,而把这个选择集中在了第二步骤,当你操作完上面点击确定就可以看到一个集中所有web框架供你选择的窗体,具体如下:
然后点击确定,vs会帮我们完成创建mvc应用程序的动作。
创建完成后,我们的VS会呈现如下图所示
具体的信息在截图里做了简单的描述,然后我们来看看vs给我们创建mvc应用程序run起来的效果。
先把浏览器改成经常用的火狐,操作方法如下:
运行结果如下:
一个简介大方的web界面就展现在我们的视线中。
。
。
。
。
宝剑锋从磨砺出,梅花香自苦寒来!
一起努力ing......
添加一个Controller(控制器)
因为我们用的是Asp.NetMVC,MVC最终还是一套框架,所以我们还是需要遵循它才能玩下去,或者说是更好的利用来便于我们的开发,要是对MVC概念还有点模糊的,可以去我以前写的第一话Asp.NetMVC3.0【HelloWorld!
】里开始部分就对此做了阐述。
假定所有跟我一起学的都了解MVC的这么一个概念,我们就开始下面的步骤了:
现在我们开始添加一个Controller,具体如下:
我们选择创建一个空的Controller,然后点击确定:
这里需要给Controller取一个名字,我这里就老一套了叫HelloWorld,然后点击确定如下图:
这里自带了一个返回View()的动作(action),说的绕口就是说这里VS在给我们创建Controller的时候会生产一个返回试图的方法,该方法没有任何操作动作就是接受HTTPGET请求HelloWorld过来执行该方法。
要是你细心的话你会发现在VS我们创建HelloWorldController同时,它默默的在Views文件下为我们默默的创建了一个HelloWorld的文件夹,这样VC在某种机制上是不是对应起来了,这也是一种框架约定。
OK,我们简单的玩下这个我们创建好的Controller,具体代码如下:
这里随便写了2个方法,当然我返回的是一段字符串,然后我们在浏览器模拟HTTP去请求我们的HelloWorldController里面我们写的放回字符串的方法,看它是否会相应我们的发起的请求,我们运行起来我们的程序如下:
然后我们开始模拟HTTP开始请求我们的写的HelloWorldController,具体操作如下图:
我们请求它看是否能返回我们需要的字符串打印到浏览器上,结果如下:
HelloWroldController响应了我们的请求,并且把字符串返回回来打印到浏览器并且我们来检查下我们发起请求的方式不是不是GET,利用火狐的开发人员工具我们可以清楚的看到请求方式:
其实通过上面这个过程我们就可以在此清楚的看到MVC强大的路由机制,这个我好像也说过好多次了o(^▽^)o,不过MVC就是在这个地方强势耶,所以想学好MVC的话还是要多去了解下它路由机制方面的东西,本菜鸟也是入门就不说的那么高深了,来看看VS在给我们创建应用程序的时候,框架自身配置的路由,大多数情况这个自身配置路由是够我们的应用开发的。
来看看项目的RouteConfig.cs配置文件,他位于项目的位置如下:
其实我们刚才模拟HTTP请求HelloWorldController的动作就经典的执行了下上面配置文件的配置。
当我们请求HelloWorld时路由机制会将我们的请求映射到HelloWorldController类(控制器),根据上面配置文件配置描述的话,第二个URL片段上应该是action(动作/方法)也就是方法名,当然你会问我刚才就没有访问Index这个方法,为什么结果会是index方法的字符串怎么不是welcome方法的返回的字符串。
这里呢我就个人观点说下,不对的话还望各位朋友指教!
因为我们没有给它指定Controller里action的名字(方法),所以这里路由机制会字段检索默认方法,这里就检索到index这个方法。
同时这也是为什么我们每次创建一个Controller的时候它都会自动给我们创建一个默认的动作方法,这个地方或许就是它的作用之一吧。
。
。
。
。
。
好了就啰嗦这么多,然后我们在继续模拟HTTP请求下我们的第二个方法,看能不能返回我们想要的字符串,请求访问结果如下:
当我们请求Welcome()方法时候,返回了我们想要得到的字符串打印到页面。
同时还想说明下,同样的HTTP模拟请求,两个方法都是GET请求,你们认为那个方法的执行速度快呢?
哈哈当然是第二了,这里有人会问为什么,因为第二指定了Action名称(方法名称)所有路由机制根据你提供的方法名字就直接去找了,而第一个路由机制有一个检索或者说检查的动作在里面可能在细微上就要稍微慢于第二个方法了,我们看看第二的工作人员工具里返回的信息如下:
在粒度细节上是不是说明了上面的问题。
这个纯属个人观点。
我们可以把我们的welcome()方法稍稍修改下,修改如下:
然后我们在模拟Http拼链接和参数请求该方法,看是否能达到我们预期的目的,操作如下:
这样的拼链接请求是绝对OK的,但是这样人一眼都可以看出来我这个链接是穿参数过去访问方法,这个时候大多数人会说那你这也太垃圾了吧,太弱了吧!
这个不是很容易被各种爆菊么!
o(^▽^)o其实我也绝对这么写垃圾,东西在地址栏是赤裸裸等待爆菊,这时怎么办啊!
有朋友会站出来说简单啊我自己写一个加密解密类在传参数的时候加密在取参数的地方解密,可以这个做法是可以得,当然本菜鸟也搞过这种事情。
但是我们现在用的是mvc,mvc可以自定义路由,这样的话,对于这种URL,我们可以可它配置一条机制,然后以后类似这种的URL都会按照我们的机制走岂不是更好,当然我以前的文章也有这方面的东西在里面,有兴趣的话可以翻翻。
我们现在开始来配置这么一条路由机制,在RouteConfig.cs里面配置哦,可不要随便拉个类以配置,随便配置的话也可以,那就是你要想办法让路由机制认识你的配置就行,我们就在RouteConfig.cs里面配置我们的路由机制,配置如下:
添加这么一条路由机制的话,我们再次来模拟HTTP请求下我们的Welcome()方法,大致如下:
这样的请求URL是不是就漂亮多了哈!
不过我们的这个请求的和我们想要的不是一回事,我们给的24拿出来的是0,这里是因为我们这个welcome这里的参数写的有问题,我们简单的改下,改为如下代码:
然后我们在次模拟HTTP请求,请求结果如下:
OK,今天就暂时先分享到这里吧o(^▽^)o!
宝剑锋从磨砺出,梅花香自苦寒来!
一起努力ing......
添加一个视图(View)
接着上篇的入门系列,上面解说添加一个简单Controller(控制器),这里我们简单的在来添加一个View(视图)来展示我们Controller里执行完(Action)动作/方法后的结果.
我们修改我们的HelloWorldController到默认创建的代码,如下:
然后我们在Views/HelloWorld文件夹里来添加一个Index的视图,在添加的时候我们选择使用模版,具体操作如下:
然后选择_Layout.cshtml作为我们的模板点击确定后项目结构如下。
简单的写下页面代码如下:
,然后我们在VS再带的PageInspector中运行看下效果,操作如下:
运行起来效果:
我们来简单修改下我们的welcome()方法如下:
这里用ViewBag来获取数据,然后返回给视图层,视图层就可以用ViewBag来读出存贮的数据。
我们继续添加一个使用MVC模版的视图welcome.cshtml,代码如下:
然后我们在VS自带的PageInspector中运行看下效果:
我们试着给模拟HTTP给它塞值进去看看能不能达到我们预测的目的,操作如下及结果:
这里简单的演示用的是ViewBig来把数据传给View层,然后View层通过ViewBig对象获取到数据进行展示,其实大家也都知道实际应用或者开发中,传输数据及表示层读取数据往往用的不是ViewBig而是Model,也就是MVC里的M.后面我们继续分析怎么用一个视图模型把控制器里动作执行完的数据转向View层。
关于View就简单的分享这么多吧!
宝剑锋从磨砺出,梅花香自苦寒来!
一起努力ing......
添加Model且简单的使用EF
对于EF(EntityFramework)不了解的朋友可以去XX文科或者在园子里搜一些简资源看下,假如和我一样知道EF的概念,那么就知道EF有一个codefirst的特性,什么意思呢!
说的通俗简单明了点就是:
通过代码映射到数据库!
有朋友会说这里不是添加Model说这个EF干啥呢!
说这个codefirst呢就是我们在一会添加Model的同时我打算利用EF的codefirst特性把我们的Model映射到数据库,这样我们就一次性也把数据库给搞了!
接着上篇我们来添加一个Model,操作如下:
我们添加一个Movie实体类,该类拥有的属性如下:
OK,我们的实体类创建好了以后,我们现在要做的事情就是怎么把这个Model映射到数据库,并且这个Model的每一个属性都对应数据库模型表的纬度(字段)。
下面我们就需要借助与EF来完成这个任务了,我们需要借助与基类DbContext来帮助我们做一些事情,具体实现如下:
我们添加了一个MovieDbContext这个类继承Dbcontext然后通过DbSet<>来完成映射对象等一系列动作,然后我们把这个映射到我们的数据库,比如我本地有一个空数据如下:
然后下来就是我要把这个Model映射到这个空的数据库里,我们该怎么做!
其实这里非常简单只需要在web.config里面配置一句话即可,打开web.config找到connectionStrings节点,配置如下信息:
注意这里添加的连接字符串的名称必须和前面实用EF的类名一致,不然的话当然你就看不到映射到数据库的表了,当添加完这句话的时候,我们可以打开VS的服务资源管理器,效果如下:
做完以上的步骤我们就可以使用强类型模型来在Controller里访问数据,届时你会发现一切变的如此简单明了。
我们来添加一个MovieController,具体操作如下:
这里我们选择使用EF的支架。
然后点击添加按钮。
当然点击添加后VS已经默认的实现了CURD操作,新手的话就不要这么搞的还是一步一步去自己体验吧!
我这里纯粹是为了演示而偷懒,添加完成后我们请求我们的MoviceController,具体操作如下:
OK,当我们添加一条数据后这是我们来打开我们的SQLServer数据库,打开我们刚才的空库,看看我们添加的这条数据是否给我们映射到数据库里,数据只要映射进去那么我们的Model实体也是应该映射进去成为一张模型表,我们打开SQLServer看到的效果如下:
OK,关于Model和EFcodeFrist的简单应用就先分享到这里吧!
后面我们继续学习整个MVC的入门系列......
宝剑锋从磨砺出,梅花香自苦寒来!
一起努力ing......
检查VS生产的编辑方法和编辑窗体
前面我们一步使用强类型,然后创建Controller(控制器)的时候,VS默认已经给我们把CURD都简单的实现了。
这篇的话就简单的看下它默认实现的代码,VS终归强大,但是方便的同时也是在弱化我们,当然大牛级别的这样搞是为了效率,我们新手的话还是建议不要去偷那个懒,至于为什么?
不解释啦.....
我们打开我们的创建的实体对象Movie类,然后再ReleaseDate属性上添加一些标识特性,具体如下:
我们设置了一下ReleaseDate属性的通用属性还有它的类型以及它在A动态数据显示的格式。
然后我们运行起来我们写的简单程序,效果如下:
这里有可以看到MVC的经典读取RoutConfig.cs路由机制,这个是不是类似{controller}/{action}/{id}.........,其实完成这一个动作的话页面上是有一个ActionLink的方法来辅助生产这么炫的html超链接标签,打开index.cshtml页面,我们看下MVC独有的ActionLink,其面貌如下:
里面的参数都是什么呢!
我们来看看:
说通俗点这个就是说你要给链接取一个名称,然后继续看:
说通俗点这个就是说你要去那个方法或者动作,所有这里你要给一个目标的方法名称,即(action名字),然后来看最后一个参数是什么:
这个呢说那么长一串串话,意思就是说问你要传递参数,如果有多个参数可以这么写比如有A,B两个参数,你就可以这么写:
@html.ActionLink("xxxx","xxxx",new{value1=item.A,value2=item.B}),多个参数之间用逗号隔开。
OK继续接着上面的程序跑起来的图我们继续走完这个编辑的流程,当我们点击Edit超链接一瞬间程序干的事情如下,流程效果如下:
然后你就会看到下面的页面:
同时也就是说在我们在首页点击编辑按钮时HTTP是以GET请求了Controller里的Edit方法,注意这里有两个Edit方法但是却别是非常大的,就代码直观上来说第一个Edit是负责接收Get请求Edit动作,而第二则负责接收Post请求的动作,第一个实际上干的事情就是你给我参数我把数据给你拿出来放到你的编辑页面,第二个Edit干的事情就是你对页面的数据做了修改然后要POST给我,我去给你负责保存在数据库中,这个是个人直观上解释。
大家可能会注意在POST的action方法上有这么一个标识,如下图:
其实开始才创建的时候我也觉得好奇,但是试验了好几个都会生产这么一个东西在Action上面,照这么说这应该是mvc4开始的一个改进的地方吧!
这个标识属性其实就是为阻止伪造的请求,而这个Bind(Includ="x,x,x,x")做了一些什么事情,我们看看,其负责的事情如下:
说的通俗易懂点的话,它在这里就是负责绑定参数,不过这个参数是我们Model的属性名称。
Controller里有阻止伪造请求,那么有伪造的数据了这么办,View层是不是应该有什么东西去和这个标识协调工作,我们打开Eidt.cshtml页面看看,其面貌如下:
前台是不是果然有一个东西在和后台的阻止伪造请求的标识协调工作,而且还放了一个隐藏域来存放id,照这么看这个形式是不是有点像数据验证控件里的ValidationSummary控件,只不过这里换了个形式,实质上还是换汤不换药。
。
。
哈哈有兴趣的朋友可以去深入研究下。
我们就伪造的输入几个数据看看有什么效果,具体如下:
是不是起到作用了,到这里Edit流程也基本就说的差不多完了。
后续我们继续学习入门系列知识,目前为止都是VS帮我们干了不少的事情,我们都在学习生产的代码,后续我们来亲手做一个查询来亲自体验下过程。
。
。
宝剑锋从磨砺出,梅花香自苦寒来!
一起努力ing......
搜索/查询流程功能的实现
那现在要做搜索(查询)功能我们第一步应该做什么呢!
第一次是不是我们应该去Controller(控制器)里去搞一个搜索(查询)的方法(action),那么我就说做搜索功能吧!
搜索可能是根据名字搜索,如果根据某一个条件搜索的话,那么我们的方法就需要一个参数,如果是多个条件的话就需要多个参数给方法传递多个参数,这么说你的方法的参数多少是不是就取决你我们的搜索条件。
我们开始就先做一个简单的单条件查询。
我们把这个搜索的功能做到MoiveController里的Index方法(action)里,具体做法如下:
这里的查询语法用的是Linq的写法,里面也含有简单的Lambda表达式,当然这种写法在MVC的Controller具体的Action方法上是很常见的,对于Linq不太熟悉的可以去园子上找一些资料看看。
写完这个Index方法后,这个时候这个Index方法已经具有搜索功能了,我们运行起来看看:
因为我们知道它的默认的路由机制是{controller}/{action}/{id}.....,那么我们现在来模拟HTTP来拼下,这里主要是为了验证我们写的搜索方法看看是不是有效,那么我们现在就模拟HTTP拼写一个请求去访问我们的搜索方法,具体操作如下:
模拟请求完结果还是不动,这里不是本人的粗心而是有意写错的,如果你细心的话,你会发现上面改的Action在返回的时候是存在问题的,这个一般也是新手最容易犯错的地方,首先方法里我们都根据参数去查了一遍所以返回的应该是我们查询的结果,而不是EF的强类型的ToList()集合,所以在这里要多多留心。
那么我们修改上面的方法如下:
改完之后我们在重复上面的模拟HTTP请求的操作,在来看看结果:
这样是不是OK的啦,现在我们的搜索方法是写好了,但是我们总不能是搜索都要去地址栏去拼参数来完成这个操作,这样做是不是就有点太吓了,所以我们要在我们的Index.cshtml页面上添加一个搜索框供用户输入这样是不是就有好多了,下来我们就来做这么一件事,修改index.cshtml代码如下:
Html.BeginFrom也是一个在MVC应用程序常用的属性,它可以以提交From表达类似的动作把当前的From数据以特定的方式提交到对应的Controller(控制器)的方法(Action),与ActionLink一样它也有三个参数,只不过BeginFrom的参数取更加明了,首先第一个参数是说你要提交给那个动作(action)/方法,所以这里你就给一个处理或者说接受的方法名;第二参数是说你要提交到哪里去,说白了你是要交个那个Controller(控制器)来负责,所以这里你要给一个Controller控制器的名字,第三个则是选择你要提交的方式。
言归正传,在Index.cshtml添加完这个东西,我们运行起来再看看我们的首页:
这样的界面相当起来是不是就友好多了。
因为我们MovieController里的Index方法你没有去指定去接受POST的请求还是GET的请求,所以们现在手动写一个接受POST请求的方法,看看POST请求过来都有什么动作,在MovieController添加一个下面的方法,方法如下:
然后我们在运行起来看看执行的结果,如下图:
当然实际应用程序的逻辑可能要比这个复杂百倍所以这个要根据情况而定了,这个时候要是想让你的请求结果在Index的列表页面出现的话,其实也很简单,只需要把Index.cshtml我们刚才写的BeginForm的FormMethod.Post改成FormMethod.Get即可,如下所示:
改完然后运行程序,效果入下:
那现在我的搜索条件要是在稍微复杂一点的话,比如说我要加根据Genre(音乐类型)和Title(音乐名称)一起搜索,并且音乐类型是一个可以选择的而不是我手动去输入的,这个时候比较起刚才的单条件查询就要稍微复杂一点了,首先必须动态读出数据库里所有的音乐类型然后以下拉列表的形式供用户选择,只要做到这一点,那我们的目标就完成90%,好有了需求那么就去搞这么一件事情,为了下拉效果明显,我在数据库里添加一些测试数据,数据如下:
添加完数据,我们现在就是想办法把这个数据读出来然后动态的绑定到页面即可,那我们该怎么做呢!
我们只要音乐类型的话用什么方式来存查询的结果比较合适,应该是数组吧!
那么我们用数组来存读出来的音乐类型数据,具体操作如下:
添加一个参数,然后把查询所有的音乐类型放到集合里通过动态字典接受在页面绑定,查询/搜索的时候传递音乐类型进来不为空的话去数据库匹配一下,找数据到就返回,说的可能不是很严谨,不过实际上干的事情就是这么多。
完了我们看看页面这么绑定这个动态字典,变成我们预期的下拉框呢!
页面修改如下:
这里的DropDownList第一个参数就是接受返回窗体的名字,这时我们把动态字典给他他会自己解析,第二参数是显示的默认值这个值我们可以随便给也可以为null,编辑完页面,我们在运行起来看看效果:
这样是不是就达到预期的效果,随便查询一个结果看看能不能查询到结果:
OK,效果实现了如果更多的参数做法还是一样的,我们的搜索就先做到这里,后续的话我们给Model添加属性,因为我们的数据库是EF根据Model映射出来了,所以在实际应用中有些情况下Model会有一些小小的改动,那如果是通过EFcodefrist映射的数据库的话,我们添加属性会引发那些常见的问题呢!
后面我们继续学习,关于搜索我们就先学习到这里。
宝剑锋从磨砺出,梅花香自苦寒来!
一起努力ing......
添加一个字段
我们现在要给Movie实体模型类添加一个评价的字段该怎么搞!
我们知道我们默认使用EFcodefrist生存的数据库是同步性的,这样才能便于我们更好的开发,如果实体模型和数据库不同步的话,实体框架应该会抛出异常。
codefrisr设置模型库迁移
在VS里我们先移除dataBase,具体操作如下:
删除EF连接,为了是我们的应用程序不出错,我们需要做一下事情,具体操作如下:
完了在控制台窗体输入一下内容:
运行完控制台的命令后我的项目结构变化如下:
多了一个数据迁移的Migrations文件夹,这个文件夹就是codefrist迁移生产的,里面有一个历史记录的类还有一个配置信息类。
我们打开Configuration.cs类,其面貌如下:
我们对Configuration.cs类的Seed方法进行从新构造,修改代码如下:
接下的事情就是我们需要创建一个迁移DbMigration类,该类负责创建一个database,前面我们不是删除了EF创建的database么。
接下来我们在控制台窗体输入下面的命令,具体操作如下:
这个命令就是新构建database并对其进行初始化动作。
动作执行完成后你会发现,VS会自动生成一个这个文件,具体如下:
可以看到这个类里面有2个方法,就代码直观上解释的话这个类在运行时的话有一个是在降级过程中执行的操作,另外一个则是在升级过程中的操作。
生产的这个类包含创建数据库的模式代码,接下来的事情呢!
就是这么把这个数据库创建出来,并且把我们刚才加的测试数据给添加到数据库中,接下来我们继续在控制台窗体操作,具操作如下:
待命令跑完之后我们来运气我们的应用程序看下效果,跑起来我们的程序看我们刚才添加的数据是否能正常显示:
怎么样,效果达到了吧!
关于迁移这里可能有很多描述不是很清楚的地方,所以还请各位前辈朋友多多指教。
现在进入正题如果我给Model实体类添加一个字段的话怎么办,比如我给Movie类添加了下面的字段,如下:
添加一个这个属性后,你会立马想到那是不是所有的页面都要去加这个东西,还有Controller里面Action上带Bind[Inculd(xxx,xxx,xxx,xx)]这些地方是不是都要去加这个东西呢,具体修改的地方如下:
Index.cshtml页面:
Create.cshtml修改如下:
我们现在就直接先把程序运行起来看看会出现什么问题:
来个一个大黄页,为什么呢!
因为我们在代码迁移数据的时候没有给我们刚才新加的字段所以程序在这里不认识了,所以就出
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- MVC5 入门学习教程 入门 学习 教程