猿教程 Logo

ASP.NET MVC 视图

在本节中,您将了解在ASP.NET MVC框架中的视图。

View是一个用户界面。 视图将模型中的数据显示给用户,并使他们能够修改数据。

ASP.NET MVC视图存储在Views文件夹中。 单个控制器类的不同操作方法可以呈现不同的视图,因此Views文件夹包含与控制器同名的每个控制器的单独文件夹,以适应多个视图。 例如,将从HomeController的任何操作方法呈现的视图驻留在View>Home文件夹中。 以相同的方式,将从StudentController呈现的视图将驻留在View>Student文件夹中,如下所示。


注意

Shared文件夹包含视图,布局或部分视图,将在多个视图之间共享。


Razor视图引擎:

Microsoft引入了Razor视图引擎并与MVC 3一起打包。您可以在razor视图中编写html标记和服务器端代码的混合。 Razor使用@字符表示服务器端代码,而不是传统的<%%>。 您可以使用C#或Visual Basic语法在Razor视图中编写服务器端代码。 Razor视图引擎通过最小化写入视图所需的字符数和击键数来最大化写入代码的速度。 Razor视图文件具有.cshtml或vbhtml扩展名。

ASP.NET MVC支持以下类型的视图文件:

查看文件扩展名描述
.cshtmlC#Razor视图。 支持带有html标签的C#。
.vbhtmlVisual Basic Razor视图。 支持使用html标签的Visual Basic。
.aspxASP.Net Web表单
.ascxASP.NET web控件

在下一节中了解Razor语法。 让我们看看如何使用Visual Studio 2013 for Web with MVC 5创建一个新视图。


创建新视图:

我们已经在上一节中创建了StudentController和Student模型。 现在,让我们创建一个学生视图,并了解如何使用模型到视图。

我们将创建一个视图,将从StudentContoller的Index方法呈现。 所以,打开一个StudentController类 - >右键单击Index方法 - >单击添加视图..


在“添加视图”对话框中,将视图名称保留为“Index”。 最好保持视图名称与动作方法名称相同,以便在返回视图时不必在动作方法中明确指定视图名称。

选择脚手架模板。 模板下拉列表将显示可用于创建,删除,详细信息,编辑,列表或空视图的默认模板。 选择“列表”模板,因为我们要在视图中显示学生列表。


现在,从Model类dropdrown中选择Student。 模型类下拉列表自动显示模型文件夹中所有类的名称。 我们已经在上一节中创建了Student Model类,因此它将包含在下拉列表中。


选中“Use a layout page”复选框,并选择此视图的_Layout.cshtml页面,然后单击添加按钮。 我们稍后会看到什么是布局页面,但现在认为它像MVC中的母版页。

这将在View - >Student文件夹下创建index视图,如下所示:


以下代码片段显示了上面创建的Index.cshtml。

相关实例:

@model IEnumerable<MVC_BasicTutorials.Models.Student>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.StudentName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.StudentName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Age)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
            @Html.ActionLink("Details", "Details", new { id=item.StudentId  }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.StudentId })
        </td>
    </tr>
}

</table>

正如你可以在上面的index视图中看到的,它包含Html和Razor代码。 内联razor表达式以@符号开头。 @Html是一个帮助类来生成html控件。 您将在接下来的部分学习Razor语法和html助手。


上面的Index视图如下所示。


注意
ASP.NET MVC中的每个视图都是从包含在System.Web.Mvc命名空间中的WebViewPage类派生的。
要点
  1. View是一个用户界面,显示数据并处理用户交互。 

  2. Views文件夹包含每个控制器的单独文件夹。

  3.  ASP.NET MVC除了传统的.aspx引擎之外,还支持Razor视图引擎。

  4.  Razor视图文件具有.cshtml或.vbhtml扩展名。

在下一节中了解如何集成模型,视图和控制器。


版权声明:本站所有教程均为本站原创或翻译,转载请注明出处,请尊重他人劳动果实。请记住本站地址:www.yuanjiaocheng.net (猿教程) 作者:卿文刚
本文标题: C#环境
本文地址:http://www.yuanjiaocheng.net/mvc/mvc-views.html