ASP.NET MVC开发专题博客

ASP.NET MVC开发专题博客，为您精选ASP.NET MVC开发教程，助您开发愉快！

公告信息
欢迎光临ASP.NET MVC开发专题博客，祝您开发愉快！
文章档案
最新评论

ASP.NET MVC 5 入门教程三：添加视图

在本节中，你要去修改HelloWorldController类，使用视图模板文件，以干净利索地封装的过程中，客户端生成HTML响应。

您将创建一个视图模板文件使用Razor视图引擎 。 剃刀模板。CSHTML的文件扩展名，提供一种优雅的方式使用C＃创建HTML输出。 剃须刀一个视图模板时，需要记录的字符和按键的数量降至最低，并能够进行快速的，流体的编码工作流。

目前的Index方法返回一条消息，是在控制器类中硬编码的字符串。 更改Index方法返回一个View对象，如下面的代码所示：

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

上述Index的方法使用视图模板生成一个HTML的响应浏览器。 控制器的方法（也被称为行动方法 ），如上面的Index方法，一般情况下返回的ActionResult （或一类来自的ActionResult ），而不是原始类型，如字符串。

首先，创建一个视图文件夹的HelloWorld控制器。 右键单击视图 ，单击“ 添加”，然后单击“ 新建文件夹”。

命名文件夹的HelloWorld。

的HelloWorld文件夹中右键单击，然后单击“ 添加 ”，然后单击“ 脚手架”。




在添加脚手架对话框，单击MVC 5查看 。 然后单击“ 添加 ”。 



在模板项中，选择“ 空”（模型），其他设置保持默认值，然后单击“ 添加”。 

的MvcMovie \浏览\的HelloWorld \ Index.cshtml文件被创建。

下面显示了Index.cshtml文件创建：

HelloWorldIndex

添加以下HTML下<h2>标签。

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

完整MvcMovie \浏览\的HelloWorld \ Index.cshtml文件如下所示。

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Index.cshtml文件右键单击并选择“ 查看”页督察 。

PI

您也可以右击Index.cshtml文件，并选择“ 在浏览器中查看。有关更多信息，请参阅页督察教程 。

另外，运行应用程序和浏览到HelloWorld控制器（http://localhost:xxxx/HelloWorld）。 在你的控制器方法的Index并没有做太多的工作，它只是运行语句return View()指定该方法应该使用一个视图模板文件呈现到浏览器的响应。 因为你没有明确指定ASP.NET MVC视图模板文件使用的名称，拖欠Index.cshtml视图文件使用\浏览\ HelloWorld的文件夹中。 下面的图片显示字符串“Hello，从我们的视图模板！” 硬编码在视图中。

看起来还不错。 但是，请注意浏览器的标题栏中显示“索引我的ASP.NET应用”，页面顶部的大环上说：“应用程序名称。” 根据多么小，你让你的浏览器窗口中，您可能需要在右上角单击“三条杠”，看到首页 ， 关于我们 ， 联系方式， 注册 ， 登录链接。

更改视图和布局页

首先，你要改变在页面顶部的“应用程序名”链接。 文本是常见的每一页。 它实际上是在项目实施中，只有一个地方，即使它出现在每个页面中的应用。 转到/查看/共享文件夹在解决方案资源管理器中，打开_Layout.cshtml文件。 此文件被称为布局页 ，它是所有其他网页使用的共享文件夹。

_LayoutCshtml

布局模板允许您指定您的网站的HTML容器布局在一个地方，然后将其应用在您的网站在多个页面。 查找@RenderBody()线。 RenderBody是一个占位符，所有的特定视图创建页面中显示，“包装”在布局页。 例如，如果您选择的关于链接， 查看\首页\ About.cshtml视图内呈现RenderBody方法。

在布局模板“应用程序名称”更改的ActionLink “MVC电影”。

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Home", null, new { @class = "brand" })
                <div class="nav-collapse collapse">
                    <ul class="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>

title元素的内容替换为以下标记：

<!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>

运行应用程序并注意到它现在说“MVC电影”。 关于点击链接，你看怎么样，页面显示“MVC电影”，也。 我们能够做出改变一次在布局模板，并在网站上的所有页面反映新的标题。

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

开放MvcMovie \查看\的HelloWorld \ Index.cshtml。 有两个地方做出改变：第一，在浏览器的标题显示的文本，然后在二级头（的<h2>元素）。 所以你可以看到，你会让他们略有不同位代码更改应用程序的一部分。

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

<h2>My Movie List</h2>

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

要注明的HTML标题显示，上面的代码中设置一个Title属性的的ViewBag对象（这是在Index.cshtml视图模板）。 请注意，布局模板（\共享\ _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.Title我们创建浏览器标题Index.cshtml视图模板和额外的“ -电影APP补充说：”在布局文件中。

同时注意到Index.cshtml视图模板中的内容如何被合并的的_Layout.cshtml视图模板和一个HTML响应发送给浏览器。 布局模板，使得它很容易进行修改适用于所有在你的应用程序的页面。

我们点点的“数据”（在这种情况下，“从我们的​​视图模板！”消息）是硬编码的，虽然。 MVC应用程序有一个“V”（视图），你已经有了一个“C”（控制器），但没有“M”（模型）还。 不久，我们将演练如何创建一个数据库和检索模型数据。

传递数据从控制器到视图

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

控制器负责提供的任何数据或对象中需要为了一个视图模板呈现到浏览器的响应。 最好的做法： 不应该执行业务逻辑视图模板或直接与数据库交互 。 相反，视图模板应该只由控制器，提供给它的数据。 保持这种“关注点分离”有助于保持代码的整洁，可测试性和更容易维护。

目前，的Welcome动作方法，在HelloWorldController类需要一个name和一个numTimes参数的，然后直接与浏览器输出的值。 而非控制器使这个作为一个字符串响应，让我们的控制器更改为模板，而不是使用一个视图。 视图模板会生成一个动态响应，这意味着你需要通过相应的位数据从控制器中的视图来生成响应。 你可以做到这一点通过控制器把动态数据（参数），视图模板需要ViewBag对象在一个视图模板，然后可以访问。

返回的HelloWorldController.cs文件，并改变Welcome方法来添加一个Message和的NumTimes值ViewBag对象。ViewBag是一个动态的对象，这意味着你可以把任何你想要它ViewBag对象没有定义的属性，直到你把它里面的东西。ASP.NET MVC模型绑定系统自动映射的命名参数（ name和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对象包含的数据将被自动传递给视图。

接下来，你需要一个Welcome视图模板！ 在生成菜单中，选择“ 生成解决方案 （或按Ctrl + Shift + B），以确保项目被编译。

右键点击次数\ HelloWorld的文件夹，并单击“ 添加 ”，然后单击“ 脚手架”。




在添加脚手架对话框，单击MVC 5查看 。 然后单击“ 添加 ”。 

在“添加视图”对话框，命名视图。 在模板项中，选择“ 空”（模型），其他设置保持默认值，然后单击“ 添加”。

该MvcMovie \查看\ HelloWorld的\ Welcome.cshtml文件被创建。

添加下面的代码下<h2>元素在新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

现在，数据取自该URL，并传递给控制器，使用模型粘合剂 。 控制器包数据到ViewBag对象，通过该对象的观点。 的视图以HTML格式的数据，然后显示给用户。

在上面的示例中，我们使用了ViewBag对象从控制器将数据传递到一个视图。 后者在本教程中，我们将使用视图模型数据从控制器传递到视图。 视图模型传递数据的方法通常更喜欢在查看购物袋的方法。 请参阅博客条目的动态V强类型查看更多信息。

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

关键字 mvc5,入门教程,添加视图
如果涉及数据库操作，推荐一款配套的ORM框架：CYQ.Data 通用数据层框架
新浪微博粉丝精灵，刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"

2013/9/17 15:08:25 | ASP.NET MVC入门基础教程 | |

#4louis vuitton outlet[112.111.174.*]2014/8/19 11:03:07
Nice post. I study something more challenging on totally different blogs everyday. It's going to always be stimulating to read content from different writers and follow a bit of something from their store. I抎 want to use some with the content on my blog whether you don抰 mind. Natually I抣l give you a hyperlink on your web blog. Thanks for sharing.
#3ray ban sunglasses[112.111.174.*]2014/8/18 1:05:32
It抯 arduous to search out knowledgeable individuals on this topic, but you sound like you realize what you抮e talking about! Thanks
#2ray ban aviator[112.111.174.*]2014/8/11 17:20:20
Spot on with this write-up, I really assume this website needs far more consideration. I抣l most likely be once more to learn way more, thanks for that info.
#1louis vuitton luggage[112.111.172.*]2014/8/8 0:54:47
I抎 have to check with you here. Which is not one thing I usually do! I get pleasure from studying a post that can make people think. Also, thanks for permitting me to remark!
  • 发表评论