WebPages 实例学习笔记

什么是WebPages?

WebPages是一种基于ASP.NET的轻量级Web开发框架,它采用了Razor语言编写视图,可以快速地创建动态Web页面。

实例1:创建一个简单的Web页面

在Visual Studio中创建一个新的Web项目,并添加一个名为"WebPage1.cshtml"的页面。

htmlCopy Code
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>My First WebPage</title> </head> <body> <h1>Hello World!</h1> </body> </html>

这个页面非常简单,仅包含一个标题“Hello World!”。

实例2:使用模板将页面分为多个部分

在Web页面中,我们通常需要将页面分为多个部分,例如头部、导航栏、主体和底部。WebPages提供了一种方便的方式来实现这一点,称为“布局页”。

htmlCopy Code
@{ Layout = "_Layout.cshtml"; } @section content { <h1>Welcome to My Website!</h1> <p>This is the main content of my website.</p> }

在这个示例中,我们引用了一个名为“_Layout.cshtml”的布局页,然后在页面中定义了一个名为“content”的部分。

htmlCopy Code
<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> </head> <body> <header> <h1>My Website</h1> </header> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact Us</a></li> </ul> </nav> <div id="main-content"> @RenderSection("content", required: false) </div> <footer> <p>Copyright (c) 2023</p> </footer> </body> </html>

这是一个名为“_Layout.cshtml”的布局页,其中包含头部、导航栏、主体和底部。注意,在主体部分中我们使用了@RenderSection方法来呈现我们在页面中定义的名为“content”的部分。

实例3:使用数据库显示数据

WebPages可以轻松地与数据库进行交互,从而使我们能够方便地显示数据。以下示例演示如何从数据库中检索数据并将它们显示在一个表格中。

htmlCopy Code
@{ var db = Database.Open("MyDb"); var data = db.Query("SELECT * FROM Products"); Layout = "_Layout.cshtml"; } @section content { <table> <tr> <th>Name</th> <th>Description</th> <th>Price</th> </tr> @foreach(var item in data){ <tr> <td>@item.Name</td> <td>@item.Description</td> <td>@item.Price</td> </tr> } </table> }

在这个示例中,我们首先打开了一个名为“MyDb”的数据库连接,然后使用Query方法从数据库中检索数据。接下来在页面的“content”部分中使用foreach循环将数据逐个显示在表格中。

以上是WebPages的一些基本示例,使用WebPages可以方便、快速地创建动态 Web 页面,有助于我们开发 Web 网站。