【MVC5】3.添加一个视图

最新推荐文章于 2022-08-05 15:30:54 发布

VIProgram

最新推荐文章于 2022-08-05 15:30:54 发布

阅读量1.8k

点赞数 1

分类专栏： MVC 文章标签： mvc 教程

MVC 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在这一节中你将修改HelloWorldController类使用的视图模板文件整洁的封装生成HTML响应客户端的过程。

使用“视图引擎”创建一个视图模板文件。基于Razor视图模板有。cshtml文件扩展名，并提供使用C #创建HTML输出一种优雅的方式。剃刀将字符和按键需要编写一个视图模板时的数量，并能够快速、灵活的工作流程。

当前索引方法返回一个字符串，该字符串在控制器类中硬编码的消息。更改索引方法返回一个视图对象，如下面的代码所示：

public ActionResult Index() 
{ 
    return View(); 
}

上述指数的方法是使用一个视图模板生成HTML响应给浏览器。控制器的方法（也被称为行动的方法），如上面的索引方法，通常返回一个ActionResult（或派生于ActionResult类），不是原始类型的字符串。
右键单击 Views\HelloWorld文件夹并单击 Add，然后单击 MVC 5 View Page with (Layout Razor)

在“指定项目”对话框的“指定名称”中，输入索引，然后单击“确定”。

在选择一个页面布局”对话框中，接受默认的_layout.cshtml点击OK。

在上面的对话框中，视图\共享文件夹在左窗格中选择。如果在另一个文件夹中有一个自定义布局文件，可以选择它。我们将在后面的教程中讨论布局文件

MvcMovie\Views\HelloWorld\Index.cshtml文件就创建好了。

添加以下代码。

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

右键单击在浏览器中选择“查看Index.cshtml文件。

你也可以右键单击Index.cshtml文件并选择页面检视视图。查看页面检查教程以了解更多信息。

另外，运行应用程序，浏览到HelloWorld控制器（http://localhost:xxxx/HelloWorld）。在你的控制器的Index方法没做多少工作；它只是把语句返回（view bag），它指定的方法应该使用一个视图模板文件来呈现到浏览器的响应。因为你没有明确指定的视图模板文件的名称使用ASP.NET MVC，默认的视图\ HelloWorld文件夹使用Index.cshtml视图文件。下面的图片显示了从我们的视图模板的字符串“Hello from our View Template!”在视图中的硬编码。

看起来很好。然而，注意到浏览器的标题栏显示“我的ASP.NET应用指数”，在页面顶部的大环节说”应用程序的名称。“这取决于小让你的浏览器窗口，你可能需要点击三栏在右上角看到的家，接触、登记和登录链接。

更改视图和布局页

首先，您要更改页面顶部的“应用程序名称”链接。该文本是常见的每一页。它实际上只是在一个项目中实现的一个地方，即使它出现在应用程序的每一个页面上。去/Views/Shared文件夹在解决方案资源管理器中打开_layout.cshtml文件。这个文件被称为一个布局页，它在共享文件夹中，所有其他页面都使用。

布局模板允许你指定在一个地方网站的HTML布局，然后运用在多个页面在您的网站。找到@renderbody()线。renderbody是占位符在所有视图的特定页面创建显示出来，“包装”的页面布局。例如，如果您选择的链路，意见\家about.cshtml视图呈现在renderbody方法。

更改标题元素的内容。改变连接在布局模板从“应用程序名称”到“MVC的电影”，从家到电影的控制器。完整的布局文件如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

运行并通知应用，现在说“MVC Movie”。点击一下链接，你看如何，页面显示“MVC Movie”，太。我们能够使更改一次在布局模板，并在网站上的所有页面反映新的标题。

当我们第一次创建的Views\HelloWorld\Index.cshtml文件，它包含了下面的代码：

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

以上是explicted Razor代码设置页面布局。审查意见Views\_ViewStart.cshtml文件，它包含了相同的Razor标记。关于Views\_ViewStart.cshtml文件定义了所有的视图将使用常见的布局，因此你可以评论或从视图中删除代码Views\HelloWorld\Index.cshtml 文件。

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

您可以使用布局属性设置不同的布局视图，或将其设置为空，所以没有使用布局文件。

现在，让我们改变索引视图的标题。

打开MvcMovie\Views\HelloWorld\Index.cshtml视图HelloWorld。有两个地方要进行更改：首先，在浏览器标题中出现的文本，然后在第二个标题（<氢>元素）。你会让他们略有不同，所以你可以看到哪一点的代码改变了应用程序的一部分。

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

显示HTML标题显示，上述套ViewBag对象标题属性的代码（这是在Index.cshtml视图模板）。请注意，布局模板（Views\Shared\_Layout.cshtml ）使用这个值在title>元素作为我们修改以前的HTML <head>部分。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

使用ViewBag的方法，你可以很容易的视图模板和你的布局文件之间传递其他参数。

运行应用程序。注意，浏览器标题、主标题和次要标题已更改。（如果您没有看到浏览器的更改，您可能会查看缓存的内容。按Ctrl + F5浏览器力从服务器加载的响应。）浏览器标题是用ViewBag创建。标题我们设置的Index.cshtml视图模板和额外的“电影APP”在布局文件。

同时注意在Index.cshtml视图模板中的内容与_layout.cshtml视图模板和一个单一的HTML响应合并被发送到浏览器。布局模板使应用程序在应用程序中的所有页面都很容易进行更改。

我们的一点点的“数据”（在这种情况下，从我们的视图模板的“你好”！消息）是硬编码的，但。MVC应用程序有一个“V”（看）你已经有了一个“C”（控制器），但没有“M”（模型）吗。不久，我们将步行通过如何创建一个数据库，并从它检索模型数据。

将数据从控制器传递给视图

在我们去一个数据库和谈论模型之前，我们先来谈谈从控制器到视图的传递信息。响应于传入的请求的请求，调用控制器类。一个控制器类是你写的代码，处理传入的浏览器请求，从数据库中检索数据，并最终决定什么类型的响应发送回浏览器。视图模板可以用于从控制器生成和格式的HTML响应给浏览器。

控制器负责提供任何所需的数据或对象，以便查看视图模板以对浏览器进行响应。最好的做法：视图模板不应该执行业务逻辑或直接与数据库交互。相反，视图模板只应与控制器提供给它的数据一起工作。保持这种“关注点分离”有助于保持你的代码干净、可测试的、更易于维护。

目前，在HelloWorldController类欢迎动作方法需要一个名字和一个numtimes参数并输出值直接浏览器。而不是有控制器渲染这个响应作为一个字符串，让我们改变控制器使用视图模板而不是。视图模板将产生一个动态响应，这意味着你需要通过适当的数据位从控制器到视图，以产生响应。你可以通过控制器将动态数据（参数）在ViewBag对象的视图模板可以访问视图模板的需求。

回到helloworldcontroller.cs文件和修改欢迎方法添加一个消息，numtimes值ViewBag对象。ViewBag是一个动态的对象，这意味着你可以把任何你想它；ViewBag对象没有定义的属性，直到你把里面的东西。ASP.NET的MVC模型绑定系统自动地图的命名参数（名称和numtimes）从地址栏中的查询字符串，你的方法参数。

完整的helloworldcontroller.cs文件看起来像这样：

using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

现在ViewBag对象中包含的数据将被传递给视图自动。下一步，您需要一个受欢迎的视图模板！在“生成”菜单，选择“生成解决方案”（或按Ctrl + Shift + B）确保项目编译。右键单击视图\ HelloWorld文件夹并单击“添加”，然后单击“查看页面MVC 5（Layout Razor）。

在“指定名称”对话框中，请输入“欢迎”，然后单击“确定”。

在选择一个页面布局”对话框中，接受默认的_layout.cshtml点击OK。

MvcMovie\Views\HelloWorld\Welcome.cshtml文件就创建好了。

在welcome.cshtml文件替换标记。你将创建一个循环，说“你好”，因为用户说，它应该。完整的welcome.cshtml文件如下所示。

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {
        <li>@ViewBag.Message</li>
    }
</ul>

运行应用程序并浏览到以下网址：

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

现在数据是从网址，并传递给控制器使用模型粘合剂。控制器的数据封装成一个对象，通过ViewBag对象视图。然后视图数据显示为HTML的用户。

在以上示例中，我们使用ViewBag对象把数据从控制器传递给视图。在教程中，我们将使用一个视图模型将数据从控制器传递给视图。视图模型的方法来传递数据一般是首选的视图包的方法。查看博客条目动态V强类型的意见，以了解更多信息。

嗯，这是一种“M”的模型，但不是数据库类型。让我们把我们所学到的，创建一个电影数据库。

VIProgram

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【MVC5】3.添加一个视图

在这一节中你将修改HelloWorldController类使用的视图模板文件整洁的封装生成HTML响应客户端的过程。使用“视图引擎”创建一个视图模板文件。基于Razor视图模板有。cshtml文件扩展名，并提供使用C #创建HTML输出一种优雅的方式。剃刀将字符和按键需要编写一个视图模板时的数量，并能够快速、灵活的工作流程。当前索引方法返回一个字符串，该字符串在控制器类中硬编码的消息。更
复制链接

扫一扫