当前位置：首页 > 前端开发 > 正文

c 如何调用cshtml

ASP.NET Core中，通过控制器方法返回 IActionResult类型来调用cshtml视图，使用`return View();

ASP.NET Core MVC框架中，.cshtml文件是用于定义视图的Razor页面，要在C#代码中调用和渲染这些.cshtml视图，通常涉及到控制器（Controller）的动作方法（Action Method），以下是详细的步骤和示例，说明如何在C#中调用.cshtml视图。

理解MVC架构

在ASP.NET Core MVC中，应用程序通常遵循模型-视图-控制器（Model-View-Controller, MVC）架构：

  • 模型（Model）：表示数据和业务逻辑。
  • 视图（View）：负责呈现用户界面，通常使用.cshtml文件。
  • 控制器（Controller）：处理用户请求,协调模型和视图。

创建控制器

需要创建一个控制器类，该类继承自Controller基类，控制器包含多个动作方法,每个方法对应一个特定的用户请求。

示例：创建一个HomeController

using Microsoft.AspNetCore.Mvc; namespace YourNamespace.Controllers { public class HomeController : Controller { // 动作方法，返回视图 public IActionResult Index() { // 可以传递数据到视图 var model = new MyViewModel { Title = "欢迎", Message = "这是主页" }; return View(model); } // 其他动作方法 } }

创建视图（.cshtml文件）

在控制器中返回的视图通常是与动作方法同名的.cshtml文件，视图位于Views文件夹下,通常按照控制器名称进行组织。

示例：创建Index.cshtml

在Views/Home文件夹下创建Index.cshtml：

@model YourNamespace.Models.MyViewModel <!DOCTYPE html> <html> <head> <meta charset="utf-8" />@Model.Title</title> </head> <body> <h1>@Model.Message</h1> </body> </html>

配置路由

ASP.NET Core使用基于约定的路由系统，默认情况下，路由配置为{controller}/{action}/{id?}，这意味着访问http://yourdomain/Home/Index将调用HomeController的Index动作方法。

c 如何调用cshtml 第1张

示例：启动配置

在Startup.cs或Program.cs中配置路由：

using Microsoft.AspNetCore.Builder; using Microsoft.Extensions.DependencyInjection; namespace YourNamespace { public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddControllersWithViews(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); }); } } }

传递数据到视图

控制器可以将数据作为模型传递给视图，视图通过@model指令接收并渲染数据。

示例：传递数据

// 控制器中的动作方法 public IActionResult Details(int id) { var item = _dbContext.Items.Find(id); if (item == null) return NotFound(); return View(item); } <!-Views/Item/Details.cshtml --> @model YourNamespace.Models.Item <!DOCTYPE html> <html> <head> <meta charset="utf-8" />@Model.Name</title> </head> <body> <h1>@Model.Name</h1> <p>@Model.Description</p> </body> </html>

部分视图（Partial Views）

有时候需要在视图中复用部分内容，可以使用部分视图，部分视图通常以_开头命名，例如_Partial.cshtml。

示例：创建部分视图

<!-Views/Shared/_Sidebar.cshtml --> <div> <h3>侧边栏</h3> <ul> <li>链接1</li> <li>链接2</li> </ul> </div>

在主视图中调用部分视图

<!-Views/Home/Index.cshtml --> @{ Layout = "_Layout"; // 如果有布局页 } /h2> @Html.Partial("_Sidebar")

使用布局页（Layout Pages）

布局页允许定义一个通用的模板，所有视图都可以共享这个模板，从而避免重复代码，默认的布局页通常位于Views/Shared/_Layout.cshtml。

示例：设置布局页

<!-Views/Shared/_Layout.cshtml --> <!DOCTYPE html> <html> <head> <meta charset="utf-8" />@ViewData["Title"] My ASP.NET Core App</title> <link rel="stylesheet" href="~/css/site.css" /> </head> <body> <header> <nav> <!-导航菜单 --> </nav> </header> <main role="main" class="pb-3"> @RenderBody() </main> <footer> <p>&copy; 2023 My ASP.NET Core App</p> </footer> </body> </html>

在具体的视图中引用布局页：

@ Views/Home/Index.cshtml @ @{ Layout = "_Layout"; ViewData["Title"] = "首页"; } <h1>欢迎来到首页</h1>

强类型视图与@model指令

为了在视图中使用强类型模型，需要在视图顶部指定@model指令,这有助于在编译时检查类型安全。

示例：强类型视图模型

// Models/MyViewModel.cs public class MyViewModel { public string Title { get; set; } public string Message { get; set; } } <!-Views/Home/Index.cshtml --> @model YourNamespace.Models.MyViewModel <!DOCTYPE html> <html> <head> <meta charset="utf-8" />@Model.Title</title> </head> <body> <h1>@Model.Message</h1> </body> </html>

动态加载视图

有时可能需要根据条件动态加载不同的视图，可以通过返回不同的View()来实现。

示例：根据条件返回不同视图

public IActionResult ShowView(bool isHome) { if (isHome) { return View("Home"); // 返回 Views/Home.cshtml } else { return View("About"); // 返回 Views/About.cshtml } }

视图中的脚本和样式

可以在视图中引入JavaScript和CSS文件，以增强用户体验，通常将这些资源放在wwwroot文件夹下。

示例：引入脚本和样式

<!-Views/Home/Index.cshtml --> @{ Layout = "_Layout"; } <h2>主页内容</h2> <!-引入CSS --> <link rel="stylesheet" href="~/css/home.css" /> <!-引入JavaScript --> <script src="~/js/home.js"></script>

确保在_Layout.cshtml中已经包含了必要的资源链接,或者在具体视图中根据需要引入。

c 如何调用cshtml 第2张

使用视图组件（View Components）

视图组件允许封装可重用的用户界面片段，具有自己的逻辑和视图,适用于需要在多个视图中复用的复杂组件。

示例：创建视图组件

// ViewComponents/MyComponent.cs using Microsoft.AspNetCore.Mvc; public class MyComponent : ViewComponent { public IViewComponentResult Invoke() { var model = new MyComponentViewModel { // 初始化数据 }; return View(model); } } <!-Views/Shared/Components/MyComponent/Default.cshtml --> @model YourNamespace.ViewComponents.MyComponentViewModel <div class="my-component"> <h4>@Model.Header</h4> <p>@Model.Content</p> </div>

在视图中调用视图组件

@await Component.InvokeAsync("MyComponent")

异步动作方法和视图渲染

对于需要异步操作的动作方法，可以使用async和await关键字，并在返回视图时使用View()的异步版本。

示例：异步动作方法

public async Task<IActionResult> GetDataAsync() { var data = await _service.GetDataAsync(); return View(data); }

错误处理和异常视图

可以自定义错误视图，以便在发生异常时显示友好的错误页面，需要在Startup.cs中配置异常处理中间件。

示例：配置异常处理

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Home/Error"); // 确保有一个Error.cshtml视图来显示错误信息 } app.UseRouting(); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); }); } <!-Views/Home/Error.cshtml --> @model Microsoft.AspNetCore.Mvc.HandleErrorInfo <!DOCTYPE html> <html> <head> <meta charset="utf-8" />错误</title> </head> <body> <h1>出错了！</h1> <p>@Model.Message</p> </body> </html>

归纳调用流程

  1. 用户发起请求：通过浏览器访问特定的URL，例如http://yourdomain/Home/Index。
  2. 路由匹配：ASP.NET Core的路由系统将请求匹配到对应的控制器和动作方法（如HomeController.Index）。
  3. 执行动作方法：控制器中的Index方法被执行,可能会获取数据并准备模型。
  4. 返回视图：动作方法通过return View(model)返回指定的视图（如Index.cshtml）,并将模型传递给视图。
  5. 渲染视图：Razor引擎解析.cshtml文件,结合传递的模型数据生成HTML内容。
  6. 响应用户：生成的HTML页面发送回用户的浏览器进行展示。

FAQs（常见问题解答）

Q1: 如何在控制器中传递多个模型到视图？

A1: 在控制器中，可以使用ViewBag、ViewData或创建一个包含所有必要数据的复合模型（如一个包含多个属性的ViewModel）来传递多个模型到视图，推荐使用强类型的ViewModel,因为它提供了更好的类型安全性和可维护性。

public class CompositeViewModel { public Model1 Model1 { get; set; } public Model2 Model2 { get; set; } }

在控制器中：

public IActionResult Index() { var model1 = / 获取或创建Model1 /; var model2 = / 获取或创建Model2 /; var composite = new CompositeViewModel { Model1 = model1, Model2 = model2 }; return View(composite); }

在视图中：

@model YourNamespace.Models.CompositeViewModel <h1>@Model.Model1.Property1</h1> <p>@Model.Model2.Property2</p>

c 如何调用cshtml 第3张

html 调用 方法
0

相关文章