学习ASP .NET MVC5官方教程总结(三)添加视图

           学习ASP .NET MVC5官方教程总结(三)添加视图

        在上一章中我们讲了MVC中的"C",控制器Controllers,这一章我们来讲"V",视图Views的知识.

        首先,打开我们的项目,打开我们的HelloWorldController,并修改Index():

<span style="font-size:14px;">public ActionResult Index()
{
       return View();
}</span>

       上面的Index方法使用一个视图模板来生成浏览器所需的 HTML 代码。控制器方法 (也称为操作方法),如上述,Index方法通常返回的 ActionResult(或从 ActionResult 派生的类),但他不像是基元类型的字符串。

       首先,对 HelloWorld 控制器创建一个视图文件夹。右键单击View,单击添加,然后单击新建文件夹,名字为HelloWorld。

技术分享

      右键单击HelloWorld文件夹并单击添加,然后单击新建搭建基架项。

 

技术分享

然后选择MVC5-视图,在添加视图对话框中,命名视图Index和保留的其他设置的默认值,然后单击添加。

下面显示所创建的 Index.cshtml 文件:

技术分享

打开是这样的代码:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

添加下面的 html 代码<h2>标记下。

<span style="font-size:14px;"><p>Hello from our View Template!</p></span>

然后点击运行:http://localhost:XX/HelloWorld/Index

效果:

技术分享

        我们写的语句就在Index下面,然后我们发现有很多不是我们写的东西在上面,我们来改变他们。

        首先,你希望改变页面顶部的应用程序名称链接,这段文字在每个页面都有,是公用的。尽管它出现在程序中的每个页面,但实际上它只写在一个地方。在解决方案资源管理器中找到 /Views/Shared 文件夹,打开_Layout.cshtml 文件。这个页面叫做布局页,放在所有页面都能用的共享文件夹中。

        布局模板允许你在页面的某个地方指定HTML容器,然后在网站多个页面中应用。找到@RenderBody() 行,RenderBody 是一个占位符,所有你使用了_layout.cshtml文件的视图页面会被显示在这个地方,包装在布局页中。

技术分享

修改布局模板中的ActionLink,将"Application name"改为"MVC Movie"

@Html.ActionLink("MVC Movie", "Index", "Home", null, new { @class = "navbar-brand" })


并且修改title标签处的代码

<title>@ViewBag.Title - Movie App</title>

效果:

技术分享

        运行应用程序,现在已将变成MVC Movie了。单击About链接,你会看到这个页面也显示MVC Movie。我们仅仅修改了布局模板,就为网站中的所有页面换上了新的标题。

          现在让我们来改变Index视图中的title吧。

        打开MvcMovie\Views\HelloWorld\Index.cshtml 。有两个地方需要我们修改:浏览器标题栏中的文本,然后是次要的标题(<h2>元素)。你可以稍微修改一下代码,这样就可以看到哪些代码影响了哪些部分。

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

<h2>My Movie List</h2>
<p>Hello from our View Template!</p>

        为了指明HTML显示的标题,上面的代码中设置了ViewBag对象(在Index.cshtml视图模板中)的Title属性。在布局模板中(Views\Shared\_Layout.cshtml )的<head>节点的<title>标签使用了这个值。

        使用此ViewBag的方法,你可以轻松地其他参数之间传递您的视图模板和布局文件。

       运行应用程序并浏览到http://localhost:xx/HelloWorld。注意这个页面发生的变化:浏览器标题、主标题、此标题都发生了改变(如果你没有看到这些变化,可能是浏览器缓存了之前的内容,在浏览器中按CTRL+F5强制从刷新页面)。

        浏览器标题使我们在Index.cshtml中传递给布局页的参数,布局页又加上了- Movie App”部分。通过这个例子你会看到,布局模板提供了一种简单的修改应用程序中全部页面的方式。

        到目前为止,我们用到的少量数据(像上面例子中的Hello from our View Template!)都是硬编码的。我们用到了MVC中的VView)和CController),但还没用到过MModel)。

        接下来我们就演练一下如何创建数据库,并通过模型来获取数据。

          在讨论数据库和模型之前,让我们先说说从控制器传递数据给视图。控制器类在响应传入的请求时被调用,控制器类是你写代码处理浏览器请求、从数据库中检索数据、并最终决定发送什么类型的响应给浏览器。视图模板被控制器用来生成和格式化HTML响应给浏览器。

        控制器的责任是为视图模板提供必须的数据或对象,用来绘制HTML响应浏览器。一个最佳实践是:视图模板从来不参与业务逻辑,或直接与数据库交互。相反的,视图模板仅与控制器提供的数据一起工作。保持这种关注点分离有助于保持代码的整洁,可测试性和更容易维护。

    首先,我们修改一下HelloWorldController控制器.

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();
        }
   }
}


 

        目前,HelloWorldController 类中的 Welcome 方法需要两个参数:name 和 numTimes,然后直接与将值输出给浏览器。让我们修改控制器,使用视图来替换直接相应string字符串。视图模板会生成一个动态响应,这意味着你需要通过控制器传递一些数据用来生成响应。

    要做到这些,你需要通过在控制器中将数据(参数)放到ViewBag对象中,视图可以访问ViewBag对象。

          ASP.NET MVC 模型绑定系统从地址参数中自动映射命名的参数(name 和 numTimes)到方法中。然后按照建Index页面的方式建立Welcome页面。

技术分享

在<h2>标签下加入这样一段代码:

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

然后运行,地址http://localhost:15032/HelloWorld/Welcome?name=Scott&numtimes=4

你们的要换成你们的端口。

效果:

技术分享

这只是一种从视图向控制器传值的方式。别的方式以后再讲,这一章就讲到这里了。

 

 

 

 


 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。