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 网站。