Asp.net MVC 3实例学习之ExtShop(二)——创建母版页

2024-04-06 02:48

本文主要是介绍Asp.net MVC 3实例学习之ExtShop(二)——创建母版页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

      母版页的作用就是将整个网站的公共元素集中起来,便于维护。在本实例中的母版页内容主要如图1所示,将页面中顶部的导航栏、左边的分类栏和底部的版权信息集中起来。

2-1

图1

      在修改母版页之前,首先在项目根目录增加一个“Images”的目录,用来存放项目图片。在解决方案资源管理器中选择“Extshop”,然后单击鼠标右键选择“添加”,从子菜单中选择“新建文件夹”,然后将文件夹的名称修改为“Images”,最后将项目图片添加到“Images”文件中。

      从上一篇 博文可以了解到,默认的母版页是_Layout.cshtml文件,因此我们需要修改该文件。在编辑器中打开该文件,同时打开Site.css文件。

      首先要修改的是Site.css,将body定义中的font-size修改为14px,并增加以下两行代码:

margin:0;
padding:0;

 

      然后切换到_Layout.cshtml文件,首先完成顶部导航栏,在@RenderBody上加入以下代码:



     从代码中可以看到,因为具体的页面还没有实现,所以所有链接目前都是空的,而“登录”、“免费注册”和“购物车”3个链接因为是调用脚本的,所以都设置了ID,其连接都为“#”。

      在Site.css文件尾加入以下CSS代码:


 

       请注意CSS代码中的背景图片路径,都是以“/”开头的,表示是根目录下的“Images”目录下的文件。这样做的目的,无非是为了方便。

       继续完成余下部分,在页面中添加如下代码:


 

      因为左边的分类浏览是动态的,所以在第4行代码中,通过RenderAction方法调用Catalog控制器里的LeftList方法返回需要的分类信息,而“new {id=PageData["id "]}”参数的目的是允许页面通过具体的id控制列表。

      第8行就是要插入的内容页。

      最后在Site.css加入以下的css代码:


 

      整个页面的框架基本就完成了。不过要测试框架,还需要做点事情。选择“Controllers”目录,然后添加一个“CatalogControl”的控制器。然后在控制器里添加一个LeftList操作,代码如下:

 

 

      代码中,“ChildActionOnly”属性的目的是让这个操作不能通过浏览器直接访问,只能通过RenderAction调用。因为需要将id传递给视图,所以要讲id值保存在“ViewData["id"]”中,以方便视图调用。代码最后一句返回的不是“View”,而是“PartialView”,类似于返回用户自定义控件。

      要使代码能正常运行,还需要在引用中加入以下语句:

 

 

      代码第二句需要引用Linq的动态库,所以需要在项目中增加一个“App_LocalResources”目录,将“DynamicLibrary.cs”文件添加到该目录。

      现在要为操作添加一个视图,在“LeftList”上单击鼠标右键,在菜单中选择“Add View”,将看到如图2所示的结果。

 

2-2

图2

 

      勾上“Create a strongly-typed view”,接着在“Model class”中选择“Extshop.Models.T_Categories”,然后勾上“Create as a partial view”,单击“Add”按钮完成操作。在“LeftList.cshtml”文件中加入以下代码:

 

 

 

      代码中,Model表示从控制器传入的数据。Url.Action方法的作用是构造一个链接,第1个参数代表要执行的操作,第2个参数表示使用那个控制器,第3个参数表示要传递的参数。

       现在为项目增加一个“HomeController.cs”,然后为Index操作增加一个视图。最后修改“Index.cshtml”文件代码如下:


 

     因为是首页,分类浏览的分类要列根类,所以在页面中需要设置参数“PageData["id"]”为空字符串。

      最后选中“Extshop”,在右键菜单“调试”的子菜单中选择“启用新实例”,即可在浏览器中看到如图1所示的结果。

这篇关于Asp.net MVC 3实例学习之ExtShop(二)——创建母版页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/878812

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学