ASP.NET Core MVC 教程

在本教程中,将学习如何在ASP.NET Core MVC中创建一个简单的项目,并通过添加服务、定义模型和视图来构建一个基本的应用程序。还将探讨如何使用布局页面和导入页面来重用和共享视图之间的视觉元素和公共代码。

创建项目和添加服务

首先,需要创建一个ASP.NET Core MVC项目。在创建项目后,需要修改Startup类以添加MVC的服务和中间件。

public void ConfigureServices(IServiceCollection services) { services.AddScoped(); services.AddMvc(); } public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); }

在上述代码中,向服务容器中添加了一个名为IGreetingService的接口和一个名为GreetingService的实现类。还配置了MVC中间件,并定义了一个默认路由。

定义服务和模型

接下来,定义一个服务接口和模型。

public interface IGreetingService { string Greet(string firstname, string surname); } public class GreetingService : IGreetingService { public string Greet(string firstname, string surname) { return $"Hello {firstname} {surname}"; } } public class UserViewModel { public string Firstname { get; set; } public string Surname { get; set; } }

在这段代码中,定义了一个IGreetingService接口,它有一个Greet方法,用于生成问候语。还定义了一个GreetingService类,它是IGreetingService的实现。此外,还定义了一个UserViewModel类,用于存储用户的名字和姓氏。

添加控制器和视图

现在,需要添加一个控制器和相应的视图。

public IActionResult Index() { var model = new UserViewModel { Firstname = "Tahir", Surname = "Naushad" }; return View(model); }

在这段代码中,定义了一个Index方法,它创建了一个UserViewModel对象,并将其作为模型传递给视图。

添加布局页面

布局页面用于在页面之间共享公共视觉元素。将创建一个名为_Layout.cshtml的布局页面,并将其添加到Views/Shared文件夹中。

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"/> <title>@ViewBag.Title</title> </head> <body> <div> <h1>I'm in Layout page</h1> @RenderBody() @RenderSection("footer", required: false) @if (IsSectionDefined("links")) { @RenderSection("links", required: false) } else { <em>No social media links supplied</em> } </div> </body> </html>

在布局页面中,使用@RenderBody方法来渲染视图的内容。还使用@RenderSection方法来决定视图中定义的节将放置在哪里。这些节可以是必需的或可选的。

添加视图

接下来,需要添加一个名为Index.cshtml的视图。

@model UserViewModel @{ ViewBag.Title = "ASP.NET Core MVC"; } <h2>I'm in View page</h2> <p>@Greeter.Greet(@Model.Firstname, @Model.Surname)</p> @section footer{ <h3>I'm in footer section</h3> }

在视图中,使用@model指令来指定模型类型。还使用@ViewBag.Title来设置页面标题。此外,还使用@section指令来定义一个名为footer的节。

添加导入页面

导入页面用于声明对一个或多个视图通用的指令。将创建一个名为_ViewImports.cshtml的导入页面,并将其添加到Views文件夹中。

@using Fiver.Mvc.Layout.Models.Home @inject IGreetingService Greeter

在导入页面中,使用@using指令来导入命名空间,使用@inject指令来注入依赖项。

添加启动页面

启动页面用于运行对所有视图通用的代码。将创建一个名为_ViewStart.cshtml的启动页面,并将其添加到Views文件夹中。

@{ Layout = "_Layout"; }

在启动页面中,使用Layout属性来设置所有视图使用的布局页面。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485