ASP.NET Core MVC中的视图（Views）

接下来我将详细讲解ASP.NET Core MVC中的视图（Views）。

视图是什么？

视图是MVC中的一部分，它是网页用户界面的一部分，也就是网页的HTML代码。在MVC框架中，控制器（Controller）返回模型数据给视图（View），视图负责展示这些数据。视图文件通常采用Razor语法，可以添加HTML代码和模型数据内容，最终被浏览器渲染成网页。

如何创建视图？

在ASP.NET Core MVC中，我们可以使用Visual Studio或者其他类似的IDE自动生成视图文件。创建视图有以下几步：

打开控制器文件，找到需要添加视图的动作（Action），右键点击动作方法名，选择“添加视图”（Add View）。
在“添加视图”窗口中，可以设置视图模板（View Template）、视图名称（View Name）、视图引擎（View Engine）等，可以根据需要设置相关属性。
选择所需的设置后，点击“添加”按钮，即可在Views文件夹下生成对应的视图文件。

视图文件结构及其常见用法？

视图文件由HTML代码和Razor语法组成，Razor语法由@字符表示，可以嵌入C#代码来访问模型数据。以下是一个简单的视图文件示例。

@model IEnumerable<Person>

<h2>Person List</h2>

<ul>
    @foreach (var person in Model)
    {
        <li>@person.Name</li>
    }
</ul>

在这个视图文件中，@model关键字表示这个视图接收的模型数据类型，Model则表示模型数据本身。@foreach语句可以遍历模型数据，渲染出一份人名列表。我们可以在控制器中创建模型数据，然后传递给视图文件进行渲染。以下是一个控制器中传递模型数据给视图的代码示例。

public class PersonController : Controller
{
    public IActionResult Index()
    {
        var persons = new List<Person>
        {
            new Person { Name = "Tom" },
            new Person { Name = "Jerry" },
            new Person { Name = "Bob" },
        };

        return View(persons);
    }
}

在这个控制器中，我们创建了一个包含三个Person对象的列表，然后调用View方法将这个列表传递给视图文件。在视图文件中，我们使用了@model关键字来声明接受的模型数据类型。

除了渲染模型数据，视图还可以包含表单、超链接、JavaScript、CSS等内容，在HTML中添加相应的标签即可。

视图布局及共享？

视图布局是指将重复的HTML代码抽象出来，放在单独的文件中，达到共享的效果。在ASP.NET Core MVC中，可以使用布局来避免重复代码，提高程序的可维护性。以下是一个布局文件的示例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewData["Title"] - My ASP.NET Core Application</title>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a></li>
            </ul>
        </nav>
    </header>
    <div class="container">
        @RenderBody()
    </div>

    <footer>
        <p>&copy; 2020 - My ASP.NET Core Application</p>
    </footer>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
                integrity="sha384-J6qa4849blE2+poT8rRBg5pZssOWLKTE/6+aZs2X/i9TCpYGKS3X2y2QvHBVYZGf"
                crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
                integrity="sha384-UO2eT0CpDhq61zGzyn3FK4QpXwD3w3p6G0vPD7X2fYkGhRqnazwYg8KksFdj+nj"
                crossorigin="anonymous"></script>
    </environment>
</body>
</html>

在这个布局文件中，我们将公共的HTML元素（如头部、导航、页脚等）放在一起，然后用@RenderBody()命令表示渲染页面的内容部分。当一个View文件被渲染时，将自动插入到布局页面中所定义的位置，并生成HTML页面。我们在需要使用布局的视图文件中使用@layout关键字指定要使用的布局文件，如下所示。

@{
    ViewData["Title"] = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>@ViewData["Title"]</h1>
<p>Welcome to my first ASP.NET Core MVC webpage!</p>

<hr />

<h3>Some Featured Articles</h3>
<ul>
    <li><a href="#">A Beginner's Guide to the ASP.NET Core framework.</a></li>
    <li><a href="#">A Comprehensive Tutorial on How to Build a Blog Site From Scratch Using ASP.NET Core.</a></li>
    <li><a href="#">Using ASP.NET Core to Build a Web API with CRUD Operations.</a></li>
</ul>

在这个视图文件中，我们使用了@layout关键字指定了使用的布局文件，此外还使用了@ViewData关键字来定义视图的标题。这样，当这个视图文件被渲染时，将自动嵌入到布局文件中，最终生成完整的HTML页面。

示例说明

以下分别是一个带有表单的视图文件示例和一个使用了布局文件的视图文件示例。

带有表单的视图文件

以下是一个简单的视图文件示例，其中包含一个表单。

@model ContactViewModel

<h2>Contact Us</h2>

<form method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label asp-for="Name"></label>
        <input asp-for="Name" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Email"></label>
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Subject"></label>
        <input asp-for="Subject" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="Message"></label>
        <textarea asp-for="Message" class="form-control"></textarea>
    </div>
    <div class="form-group">
        <label asp-for="Attachments"></label>
        <input asp-for="Attachments" type="file" multiple class="form-control-file" />
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

在这个视图文件中，我们使用了ContactViewModel作为模型数据类型，@model语句声明使用的模型数据类型。表单中包含多个表单元素，如文本框(input)、文本域(textarea)、文件上传(input[type="file"])等。在控制器中处理提交表单的请求，并参照模型数据类型获取表单信息，最终返回到视图文件中完成渲染。

使用布局文件的视图文件

以下是一个简单的视图文件示例，其中使用了一个布局文件。

@{
    ViewData["Title"] = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>@ViewData["Title"]</h1>
<p>Welcome to my first ASP.NET Core MVC webpage!</p>

<hr />

<h3>Some Featured Articles</h3>
<ul>
    <li><a href="#">A Beginner's Guide to the ASP.NET Core framework.</a></li>
    <li><a href="#">A Comprehensive Tutorial on How to Build a Blog Site From Scratch Using ASP.NET Core.</a></li>
    <li><a href="#">Using ASP.NET Core to Build a Web API with CRUD Operations.</a></li>
</ul>

在这个视图文件中，我们使用了@layout关键字指定了使用的布局文件(_Layout.cshtml)，此外还使用了@ViewData关键字来定义视图的标题。这样，当这个视图文件被渲染时，将自动嵌入到布局文件中，最终生成完整的HTML页面。

以上就是关于ASP.NET Core MVC中的视图的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP.NET Core MVC中的视图（Views） - Python技术站