Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Asp.Net MVC3 简单入门第一季(二)详解Asp.Net MVC3项目

Asp.Net MVC3 简单入门第一季(二)详解Asp.Net MVC3项目

作者头像
老马
发布于 2022-11-28 12:28:04
发布于 2022-11-28 12:28:04
1.1K0
举报
文章被收录于专栏:老马寒门IT老马寒门IT

前言

在上一篇文章Asp.Net MVC3 简单入门第一季(一)环境准备中我简单介绍了Asp.Net MVC3项目的安装和第一个Asp.Net MVC3项目的基本情况。没有详细介绍项目中各个文件夹的作用,以及创建的第一个页面是怎样运行起来的?还有好多的疑问,那在这篇文章中我们将详细介绍项目中各个文件夹的作用,并真的第一个项目我们简要介绍一下Asp.Net MVC的URL驱动的是怎么回事。

第一节:Asp.Net MVC3项目介绍

让我们先看一下,一个普通的Asp.Net MVC3项目的样例,如下图所示

跟WebFrom还是有区别的,如果你已经了解Asp.Net MVC2的话,那就感觉异常熟悉了!但还是有些区别的。不管怎样我们都一一介绍一下。

很有意思的事情是即使我们创建一个空的MVC项目,VS也自动帮我们创建以上图所示的目录,这是为何呢?这是由于MVC秉承了“约定大于配置”的思想,我们在使用Asp.Net MVC3开发项目时也要注意,一定要按照它的约定办事,比如:Controller在返回Action后需要一个View进行展示(当然是调用了View()方法时),这时候Asp.Net MVC回到Views文件夹下找到Controller名字相同的文件夹下面找到具体的页面进行渲染,当然如果找不到会去Shared文件夹下去找。看下表所示的就是Asp.Net MVC3中各个文件夹的作用。

文件夹

作用

/Controllers

存放控制器类【职责是:处理用户的请求,指挥具体的页面进行渲染交给客户端】

/Views

存放各个控制器对应的视图文件,如果是Razor引擎的话那后缀是cshtml.如果使用的WebFrom的视图引擎的话,那还是Aspx后缀。

/Content

主要存放照片、CSS、Flash等文件

/Scripts

主要存放脚本文件【微软默认给我们提供了JQuery1.5.1的包,看来JQuery已经成为默认的工业标准了!我们没有退路了,呵呵,当然我个人也非常喜欢JQuery】

/Models

主要存放ViewModel类【当然这个不是严格这样要求的,而是推荐你这么做。】

其他的几个比较有意思的文件:

一个是Web.Config,另外一个是Global.asax虽然我们大家都非常熟悉,但是跟之前我们WebFrom还是有很多的区别的。WebConfig文件中,配置了启用客户端脚本验证、配置了System.Web.Routing、System.Web.Mvc等组件。而Global.asax则在应用启动的时候注册了全局的Area【区域,后面会相信讲解】、全局Filter、路由等。

第二节:Asp.Net MVC的请求处理模型

在上一篇中我们也简单做了个小例子,直接添加一个Controller,然后在Action上添加一个View,直接运行,然后就在我们面前呈现了一个普通的Html页面。那我们详细解释一下这种开发方式或者说开发模型。在讲解之前我们先认识几个概念:

Controller:控制器。在Contrller文件夹添加的以Controller结尾的类就是控制器,它的每个方法就是一个Action。它的职责是从Model中获取数据,并将数据交给View,它是个指挥家的角色,它并不控制View的显示逻辑,只是将Model的数据交给View,而具体的怎样展示数据那是View的职责,所以Controller跟View是一个弱耦合的状态,而且Controller可以任意指定具体的View进行渲染。所以达到了UI层的代码和实体良好的分离。

View:视图.负责数据的展示,当然这个视图代码的编写应该是更接近纯净的Html的,而View层代码的书写又直接跟视图引擎解析的规则有关,所以Razor的语法跟webFrom视图引擎的语法截然不同。而笔者更倾向更喜欢Razor语法的简洁、方便。

Model:很多人把Model理解成领域模型,而MVC本身是一个表现模式,它是更倾向于UI层的一个框架,所以一般我们指定的Model呢在使用时一般作为ViewModel来用,但是总的MVC的思想呢,Model还是领域相关的东西吧。

经过MVC3个模块的了解分析,我们大体也知道了Asp.Net MVC的一些基本的概念。接下来我们分析一个完整的Http的处理过程。看下面一个图:

客户端发送一个Http请求,首先被我们的IIS捕获到,然后根据Url请求的格式,最终交给我们的Route组件,然后它负责解析出我们的Url具体请求的是哪个Controller下的哪个Action。然后MVC经过处理调用我们的Action执行。在Action中我们一般会从业务的Façade层取出数据,然后将传输层的数据转换成ViewModel再交给View的视图引擎渲染,最终生成Html的字节流写回客户端。

回到我们第一个项目中的情况是,请求:Http://localhost/Home/Index请求过来,由Route组件解析出Controller是Home,Action是Index,则通过工厂创建一个Controller的实例,然后调用InvokeAction方法,执行Index的方法,最终执行View()方法返回一个ViewResult实例,再调用自己的EexcuteResult方法,将数据上下文和输出流交给视图引擎,然后最终渲染成Html页面交给客户端,最终就看到了我们的第一个页面。

总结一下:

Asp.Net MVC所有的请求都归结到Action上,而且Asp.Net MVC请求--处理--响应的模型非常清晰,而且没有WebFrom那种复杂的生命周期,整个请求处理非常明晰简单,又回归到了最原始的Web开发方式,就是简单的请求处理响应!

记于:2011年6月12日23:45:26

初识Asp.Net MVC2.0

初识Asp.Net MVC2.0【续】

Asp.Net MVC2.0 Url 路由入门---实例篇

Asp.Net MVC2.0 Url 路由入门

Asp.Net MVC3 简单入门第一季(一)环境准备

Asp.Net MVC3 简单入门第一季(二)详解Asp.Net MVC3项目

Asp.Net MVC3 简单入门第一季(三)详解Controller之Filter

Asp.Net MVC3 简单入门第一季(四)详解Request Processing Pipeline

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2011-06-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
深入探索Nuxt.js:Vue.js的服务端渲染利器
今日推荐《React 拖拽组件 Drag & Drop》 这篇文章介绍了React 提供了多种方式来实现拖拽功能,包括原生的 HTML5 Drag and Drop API 和第三方库如 react-dnd。从浅入深地介绍如何在 React 中实现拖拽功能,并通过代码示例来说明常见问题、易错点及如何避免。
Front_Yue
2024/11/12
5370
深入探索Nuxt.js:Vue.js的服务端渲染利器
Nuxt框架服务端渲染
Nuxt.js是通用的VUE的一个SSR框架(服务器端渲染)。官方介绍是通过对客户端/服务端基础框架的抽象组织,Nuxt.js主要关注的应用的UI渲染。
杜金房
2023/02/28
4.2K0
Nuxt框架服务端渲染
Vue Nuxt.js 概述
1. Nuxt.js 概述 1.1 我们一起做过的SPA SPA(single page web application)单页 Web 应用,Web 不再是一张张页面,而是一个整体的应用,一个由路由系统、数据系统、页面(组件)系统等等,组成的应用程序。 我们之前学习的Vue就是SPA中的佼佼者。 SPA 应用广泛用于对SEO要求不高的场景中 1.2 什么是SEO SEO:搜索引擎优化(Search Engine Optimization), 通过各种技术(手段)来确保,我们的Web内容被搜索引擎
Maynor
2021/12/14
9K0
Vue Nuxt.js 概述
点亮你的Vue技术栈,万字Nuxt.js实践笔记来了
作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮。
WahFung
2020/08/24
24.6K0
点亮你的Vue技术栈,万字Nuxt.js实践笔记来了
用 Nuxt.js 搭建一个服务端渲染(SSR)应用
客户端渲染模式下,服务端把渲染的静态文件给到客户端,客户端拿到服务端发送过来的文件自己跑一遍 JS,根据 JS运行结果,生成相应 DOM,然后渲染给用户。
用户4456933
2021/06/01
8K0
用 Nuxt.js 搭建一个服务端渲染(SSR)应用
Next.js/Nuxt.js/Nest.js/Fastify
安利下:《next.js静态页面渲染技术(静态生成和服务端渲染):BSR/SSG/SSG》
周陆军博客
2023/05/14
3.5K0
Vue 服务端渲染原理解析与入门实战
在以往的概念里,渲染的工作更多的是放在客户端进行的,那么为什么现在我们要让服务端来做这个工作?
西岭老湿
2021/02/22
8.1K0
Vue 服务端渲染原理解析与入门实战
nuxt「建议收藏」
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
全栈程序员站长
2022/09/20
4.3K0
Nuxt.js + koa2 入门
Nuxt是基于Vue的一个应用框架,采用服务端渲染(SSR),可以让用户的Vue单页面应用(SPA)也可以有利于SEO。 非常方便做vue ssr:省去了很多配置的过程 安装项目: 1. 由于使用的是vue3,vue2的很多命令不能用 npm install -g @vue/cli-init 2. 然后进行初始化项目 vue init nuxt-community/koa-template nuxt-learn 3. 进入项目文件,安装模块 cd nuxt-learn npm install 4. 启动项目 npm run dev 如果vue是vue3以上的版本,会出现初始化模板错误 必须调整三个插件的版本才能继续跑通 backpack-core 升级到最新版本 eslint3+ 和 eslint-loader 2+也需要升级. cnpm i backpack-core@latest eslint-loader@latest -D
不愿意做鱼的小鲸鱼
2022/09/24
2K0
Nuxt.js + koa2 入门
Nuxt + Koa2 + Mongodb 手撸一个网上商城
文档地址:https://finget.github.io/2019/08/06/nuxt-koa-mongodb/
FinGet
2019/08/09
10K1
Nuxt + Koa2 + Mongodb 手撸一个网上商城
nuxt
Nuxt.js 是一个基于 Vue.js 的开源框架,旨在简化开发现代 Web 应用的工作流程。无论是服务端渲染 (SSR)、静态网站生成 (SSG),还是单页应用 (SPA),Nuxt.js 都提供了一套强大而灵活的解决方案。
阿超
2025/04/16
2640
Nuxt项目各级目录功能一览
pages 用于构建Nuxt的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
Javanx
2020/06/30
2.6K0
Vue开始使用NUXT框架开发
Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如服务端渲染、SEO、中间件支持、布局支持等。
码客说
2019/10/21
2.4K0
Nuxt.js,Next.js,Nest.js傻傻分不清?
Nuxt.js和Next.js都是服务端渲染框架(SSR),属于前端框架,Nest.js则是node框架,属于后端框架。
用户6297767
2023/11/21
6.2K0
Nuxt.js,Next.js,Nest.js傻傻分不清?
Nuxt.js详解(一)
pages/ --| book/ //同名文件夹 -----| _id.vue -----| index.vue --| book.vue //父组件
陶然同学
2023/02/24
5.6K0
Nuxt.js详解(一)
微服务[学成在线] day12:基于 Nuxt.js 构建搜索前端工程
知识点结合实战应用会更有意义,所以这里我就不再对单个知识点进行拆分成单个笔记,内容会比较多,这里我们可以根据目录进行按需阅读。一、搜索前端技术需求
LCyee
2020/08/05
7.3K0
微服务[学成在线] day12:基于 Nuxt.js 构建搜索前端工程
Nuxt 踩坑记
Nuxt 是一个服务端渲染框架,与普通的前后端分离不同(需要同时开两个端口进行开发),而 Nuxt 只需要开一个服务端的端口。默认是 3000。使用 Nuxt 脚手架建立一个 Express.js 模板,打开 server/index.js,发现其中有一行为 app.use(nuxt.render),这行为 Vue-ssr 全部路由的捕获,在这一行下面的所有应用的路由都无法生效,因为 Express 会从上往下检测路由的可达性,一旦有就停止搜索。所以自定义的 API 路由需要放在这行上面。
Innei
2021/12/28
2.4K0
NUXT简介
通常使用 VUE 开发的是单页应用,简称SPA。随着工程不断变大,打包文件不断增长,页面的整体刷新加载速度慢慢成为瓶颈,越来越无法满足业务对页面响应速度的要求。单页应用由于主体是一个大的js,对搜索引擎不友好。
张云飞Vir
2024/03/06
3340
肝了几个月nuxt项目,想把这些实用知识点分享给你(干货)
转载自:时樾同学 https://juejin.cn/post/6901467138599763975 干了几个月的nuxt项目,差点没把自己给干翻。在公司没开干nuxt项目之前,我也没接触过nuxt
winty
2021/01/05
2.1K0
博客 Nuxt.js 移植重构与服务端渲染入门实现
背景 前段时间做了一个 COVID-19 的疫情数据每日邮箱推送平台(https://ncov.ouorz.com),本着给自己用的小工具顺便练手的精神,尝试接触了一些新的关于 JavaScript 的技术栈。包括 Vue-Cli、Node.js、MongoDB 等,好不一番爽快的开发体验。顺便一提,这个疫情数据订阅平台我拿着去填写在了 Github Trending 爆火的 wuhan2020 项目(https://github.com/wuhan2020/wuhan2020)举办的「黑客马拉松」报名表里
Tony He
2022/11/17
1.1K0
博客 Nuxt.js 移植重构与服务端渲染入门实现
相关推荐
深入探索Nuxt.js:Vue.js的服务端渲染利器
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档