ASP.NET Core 2.0 布局页面详解

168 浏览量更新于2024-08-29 收藏 134KB PDF 举报

"本文介绍了ASP.NET Core 2.0 布局页面的使用，通过创建一个简单的示例展示了如何在项目中实现共享可见元素、代码块和指令。" 在ASP.NET Core 2.0 中，布局页面是一个强大的特性，它允许开发者定义一个主模板，这个模板可以被多个视图共享，从而实现页面的统一外观和感觉。布局页面通常用于包含那些在多个视图中都需要出现的静态内容，如头部、底部、侧边栏或者导航菜单等，这样可以避免在每个视图中重复编写相同的代码。首先，我们创建一个名为`IGreetingService`的接口，该接口定义了一个`Greet`方法，用于生成问候语。接着实现这个接口的`GreetingService`类，这个服务将接收名字和姓氏，返回一个组合后的问候语。 ```csharp public interface IGreetingService { string Greet(string firstname, string surname); } public class GreetingService : IGreetingService { public string Greet(string firstname, string surname) { return $"Hello {firstname} {surname}"; } } ``` 接下来，在`Startup.cs`文件中注册`GreetingService`，使用依赖注入框架使其在需要时可以自动注入到控制器中。同时注册MVC服务以启用ASP.NET Core MVC功能。 ```csharp public void ConfigureServices(IServiceCollection services) { services.AddScoped<IGreetingService, GreetingService>(); services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { // 省略其他配置... app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); } ``` 然后，创建一个`HomeController`，在其中的`Index`方法中实例化`UserViewModel`，并将数据传递给视图。`UserViewModel`可以是任何你需要在视图中使用的模型。 ```csharp public class HomeController : Controller { private readonly IGreetingService _greetingService; public HomeController(IGreetingService greetingService) { _greetingService = greetingService; } public IActionResult Index() { var model = new UserViewModel { Firstname = "Tahir", Surname = "Naushad" }; return View(model); } } ``` 现在，我们添加布局页面（通常命名为 `_Layout.cshtml`），它位于 `Views/Shared` 目录下。布局页面使用 Razor 语法，可以包含HTML、CSS以及C#代码。在这个布局页面中，我们可以定义通用的头部和尾部，并在`@RenderBody()` 方法处指定内容区域，这样每个继承此布局的视图都将被插入到这里。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewData["Title"] - MyASPNETCoreApp</title>  </head> <body> <header>  </header> <div class="container body-content"> @RenderBody()  </div> <footer>  </footer> </body> </html> ``` 最后，为了让特定视图使用这个布局，我们在视图的开头添加 `@继承 "_Layout"` 指令： ```html @model UserViewModel @{ ViewData["Title"] = "Home Page"; }  ``` 通过这种方式，ASP.NET Core 2.0 的布局页面使得项目中的多个视图可以共享相同的结构，提高了代码复用性和维护性。开发者可以轻松地更新布局页面，所有使用该布局的视图都会自动应用这些更改。同时，依赖注入使得服务可以在控制器和视图之间无缝传递，简化了代码并遵循了单一职责原则。

weixin_38631729

粉丝: 8
资源: 905

ASP.NET Core 2.0 布局页面详解

ASP.NET Core MVC基础学习之局部视图（Partial Views）

Learning ASP.NET Core 2.0

microsoft .net framework 2.0

.net framework 2.0 x64

.NET CORE 2.0小白笔记（四）：asp.net core输出中文乱码的问题

.net framework2.0 3.0 3.5合集

asp.net 2.0网络数据库开发光盘下载

ASP.NET 2.0 中 Web 事件

.net framework 2.0

asp.net 页面布局学习

最新资源