第9章 初识 Web Pages

9.1 Web Pages 的概述 

为什么需要 Web Pages?

  • 移动互联网(MobileInternet,简称MI)是一种通过智能移动终端,采用移动无线通信方式获取业务和服务的新兴业务 
  • 移动互联网被称为下一代互联网Web3.0,如dropbox和uDrop这类应用就是典型的移动互联网应用。移动互联网业务和应用包括移动环境下的网页浏览、文件下载、位置服务、在线游戏、视频浏览和下载等业务 

9.1.1 ASP.NET Web Forms 缺点

 ASP.NET Web Forms 的缺点 

  • 由于控件封装了很多东西,开发者很难了解这背后的HTML是如何运作的 
  • 容易得到一个包含大量ViewState的页面,使得页面尺寸远远超过所需的内容页面的打开速度较慢。 
  • 不容易被测试 

9.1.2 Web Pages 介绍 

 Web Pages 是 3 种 ASP.NET 编程模型中的一种,用于创建 ASP.NET 网站和 Web 应用程序,优点如下 :

  • 易于学习、阅读和使用 
  • 围绕单一网页进行构建 
  • 类似 PHP 和 ASP 
  • 服务器脚本使用 Visual Basic 或 C#
  • 对 HTML、CSS 和 JavaScript 的完全控制 

ASP.NET 的3 种开发模式,即 Web Pages(Web 页面)、MVC(Model View Controller 模型—视图—控制器)和 Web Forms(Web 窗体) 

9.2 Web Pages 项目创建 

创建 Web Pages 项目

  • 打开 Visual Studio 的菜单“文件”→ “新建” →“新建项目”,在弹出的“新建项目”对话框选择“Web” →“先前版本” → “ASP.NET 网站 (Razor v3) 
  • “新建项目”对话框允许输入项目、解决方案的名称和程序源码存放的位置 

  • 点击“确定”按钮后,创建项目并打开 cshtml 文件,查看视图代码 
  • 按下快捷键 F5 运行项目 

9.2.1 Web Pages 目录介绍 

ASP.NET Web Pages 应用程序包含的默认文件和目录,为组织一个良好的应用程序结构提供了一致的方案,这些文件和目录的意义如下 :

  • /Account:文件夹包含登录和安全文件
  • /App_Data:数据的物理存储区,即本地化的数据库文件或数据文件
  • /Content:放置应用程序的静态内容,如 CSS、可下载的文件和音乐文件等
  • /Images:存放图片的目录
  • /Shared:文件夹包含通用文件(如布局和样式文件)
  • /Scripts:放置 JavaScript 和 jQuery 文件,文件后缀名通常为 .js
  • /Web.config:应用程序配置文件 

9.3 Razor 基本语法的概述 

9.3.1 Razor语法特点 

Razor 不是一种代码语言,而是视图中使用的代码引擎。Razor 编写时使用“@ 符号”开头,“@ 符号”是Razor 的标志 

Razor 引擎允许开发人员和界面设计人员直接在 Razor 代码块中编写 C# 和 HTML 混合代码,其有以下几个特点 

  • Razor 是一种向网页添加基于服务器的代码的标记语法  
  • Razor 拥有传统 ASP.NET 标记的能力,但是更易学习和使用  
  • Razor 是一种类似 ASP 和 PHP 的服务器端标记语法  
  • Razor 支持 C# 和 Visual Basic 编程语言 

示例:使用 Razor 向页面输出 C# 变量 

<body>
  <h1> 使用 Razor 输出 C# 变量 </h1>
  <p> 现在时间:@DateTime.Now</p>
</body>

该页面包含常规的 HTML 标记,此外还包含由 @ 标记的 Razor 代码。 Razor 代码的全部工作是检测服务器上的当前时间,然后显示出来(可以指定格式选项,或者仅仅以默认格式显示)。 

9.3.2 Razor基本语法 

在 Razor 语法中,行内表达式(变量和函数)以 @ 开始,可以用 @ 标记来输出变量或者定义代码块(@{…}) 

Razor 语法具体说明如下:

  • Razor 代码块由 @{ … } 包围  
  • 行内表达式(变量和函数)以 @ 开始  
  • 代码语句以分号结束  
  • 变量通过 var 关键词进行声明  
  • 字符串用引号包围 

示例:使用 Razor 声明变量并输出 

<body>
  <!-- 单行代码块 -->
  @{ var myMessage = "Hello World"; }
  <!-- 行内表达式或变量 -->
  <p>The value of myMessage is: @myMessage</p>
  <!-- 多行代码块 -->
  @{
    var greeting = "Welcome to our site!";
    var weekDay = DateTime.Now.DayOfWeek;
    var greetingMessage = greeting + " Today is: " + weekDay;
  }
  <p>The greeting is: @greetingMessage</p>
</body>

9.4 Razor 与 HTML 混合输出 

9.4.1 if 语句和 HTML 混合编写 

Razor 编写时使用“@ 符号”开头,“@ 符号”是Razor 的标志 

 Razor 引擎允许开发人员和界面设计人员直接在 Razor 代码块中编写 C# 和 HTML 混合代码。在视图页面中定义变量,根据 if 语句的判断结果输出不同的内容 

示例:使用if语句完成判断 

<body>
  @{var isOK = true; }
  @if (isOK)
  {
    @: 好!很好
  }
  else
  {
    @: 错!大错
  }
</body>

if 和 else 使用了两个 Razor 代码块,因此在输出文字时,必须添加“@:”符号。 

示例: if语句和HTML混合编写 

<body>
  @{var isOK = true; }
  @if (isOK)
  {
    <h1 style="font-style:italic"> 好,很好! </h1>
  }
  else
  {
    <h1 style="color:red"> 错,大错! </h1>
  }
</body>

 实际运用过程中,如果要循环集合,则可以使用for 语句进行循环操作 

<body>
  @{var list = new List<string>() { " 张三 ", " 李四 ", " 王五 " }; }
  <ul>
    @for (int i = 0; i < list.Count; i++) {
      <li>
        @list[i]
      </li>
    }
  </ul>
</body>

使用foreach 语句进行循环操作 

<body>
  <ul>
    @foreach (string str in list)
    {
      <li style="color:blue">
        @str
      </li>
    }
  </ul>
</body>

for与foreach语句块中加入了HTML标签,在标签中调用集合变量输出,因此在输出时,必须添加符号@ 如果没有加入 @,则系统会当成文字直接输出“list[i] 或 str” 

总结 

  1.  Razor 语法规则中书写行内表达式(变量和函数)以符号 @ 开始  
  2. Razor 代码块用 @{} 包围  
  3. Razor语法中可以将if、for、foreach与HTML混合使用
  4.  Razor 是一种向网页添加基于服务器的代码的标记语法  
  5. Razor 拥有传统 ASP.NET 标记的能力,但是更易学习和使用  
  6. Razor 是一种类似 ASP和 PHP 的服务器端标记语法  
  7. Razor 支持 C# 和 Visual Basic 编程语言 

给TA打赏
共{{data.count}}人
人已打赏
.NET

.NET 应用程序中的日志记录和跟踪

2022-8-23 13:47:24

.NET

第10章 Web Pages 进阶

2022-8-23 19:02:56

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索