创建一个ASP.Net Core 6.0 Web App with Razor Page,Bootstrap框架,创建一个可点击并跳转新页面的单词列表,并且最下方包含两个按钮
时间: 2024-03-02 13:48:39 浏览: 156
好的,下面是创建ASP.NET Core 6.0 Web App with Razor Page,Bootstrap框架,创建一个可点击并跳转新页面的单词列表,并且最下方包含两个按钮的步骤:
1. 打开Visual Studio 2022,选择“创建新项目”,选择“ASP.NET Core Web 应用程序”,然后单击“下一步”按钮。
2. 在“新建 ASP.NET Core Web 应用程序”对话框中,选择“Web 应用程序”模板,选择.NET 6.0作为目标框架,选择“Razor Page”作为项目模板,然后单击“下一步”按钮。
3. 输入项目名称并选择保存位置,然后单击“创建”按钮。
4. 在“新建 ASP.NET Core Web 应用程序”对话框中,选择“单击以在项目中添加身份验证”选项,然后选择“无身份验证”,单击“创建”。
5. 打开NuGet包管理器控制台,安装Bootstrap和jQuery:
```
Install-Package bootstrap
Install-Package jQuery
```
6. 创建一个新页面,用于显示单词的详细信息。打开Pages文件夹,右键单击该文件夹,选择“添加” -> “新建项”,选择“Razor Page”,设置名称为“Details.cshtml”,单击“添加”。
7. 打开Details.cshtml文件,并替换其内容为以下代码:
```
@page "{id:int}"
@model DetailsModel
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>单词详情</h1>
<div>
<h3>@Model.Word</h3>
<p>@Model.Definition</p>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
```
8. 打开Index.cshtml文件,并替换其内容为以下代码:
```
@page
@model IndexModel
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>单词列表</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>单词</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/Details/1">hello</a></td>
<td>你好</td>
</tr>
<tr>
<td><a href="/Details/2">world</a></td>
<td>世界</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary">添加单词</button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-danger">删除单词</button>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
```
9. 运行项目,点击单词列表中的任何一个单词,会跳转到该单词的详细信息页面。
这样就完成了ASP.Net Core 6.0 Web App with Razor Page,Bootstrap框架,创建一个可点击并跳转新页面的单词列表,并且最下方包含两个按钮的创建过程。
阅读全文