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

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动作方法。

示例：启动配置

在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中已经包含了必要的资源链接,或者在具体视图中根据需要引入。

使用视图组件（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>
html 调用 方法
0

相关文章