Terry的学习笔记--ASP.NET MVC 4 HELLO WORLD添加视图(View)

上一章中我们创建了控制器HelloWorldController.cs,现在我们根据HelloWorldController来创建视图

在HelloWorldController中重写Index方法

public ActionResult Index()

        {

            return View();

        }

在view()上点击右键选择Add View

出现添加视图对话,运用默认的模板,直接点击Add

视图文件夹下直接出现了Views/HelloWorld/Index.cshtml这个视图文件。

在图示标签<h2>下面添加

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

是html代码变为

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

注意:在IE9运行你有可能会看不到<p>Hello from our View Template!</p>这句话,你需要打开兼容模式

如果IDE用的是VS2012,可以右键点击index.cshtml然后选择View in Page Inspector如图:

或者运行程序,浏览http://localhost:xxxx/HelloWorldIndex事件直接return View()返回给视图。

修改视图和模板页面

可以看到index.cshtml中只有

<h2>Index</h2>

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

这些东西从何而来呢

就像asp.net中的masterpage一样,这里MVC有在/Views/Shared文件夹下的_Layout.cshtml完成累死的工作

在layout中@RenderBody()是一个占位符,类似Index.cshtml就是通过@RenderBody()插入到HTML里。

在site-title里修改Your Logo Here

<div class="float-left">
    <p class="site-title">@Html.ActionLink("Hello World", "Index", "Home")</p>
</div>

然后在title也做对应修改

<title>@ViewBag.Title – Hello World</title>

刷新页面将会看到新的页面

我们再回到HelloWorld\Index.cshtml

首先修改窗口的Title

令ViewBag.Title = "Hello World";

然后改变小标题,把index变为Hello World

修改后的代码应该是:

@{

    ViewBag.Title = "Hello World";

}

 

<h2>Hello World</h2>

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

修改后的页面如图

 

从控制器往视图中传递数据

我们发现到目前为止我们都是在页面上写一些死代码,没有和数据库的交互,这是之后模型中要讲到的,现在我们还有一个问题要解决,就是从控制器向视图中传递数据的问题。

这里我们讨论一下控制器如何传递信息给视图。控制器的类在url被接收后会被调用,我们可以在控制器类中写入一些页面的业务逻辑,或者从数据库获取数据,然后视图根据控制器生成HTML代码。最理想的情况是视图中不做任何和业务逻辑或者数据库相关的操作,只做一个单纯的显示。

我们来看到现在HelloWorldController类中的方法

现在的Welcome方法接受参数name和numTimes然后直接打印出一句话”Hello xxx, NumTimes is : xxx”,没有生成相关的视图

现在我们对这段代码进行修改,生成Welcome视图并且使控制器和视图传递Name和NumTimes这两个参数。

首先我们把Welcome方法改为

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

            return View();
        }

我们把Name和numTimes都赋值给ViewBag对象, ViewBag对象是一个dynamic 对象,这意味着我们所有的值都可以赋给它。

之后的操作和生成Index视图一样

添加视图,使用默认的模板

视图添加完成后

修改现有代码

@{

    ViewBag.Title = "Welcome";

}

 

<h2>Welcome</h2>

<p>@ViewBag.Message  @ViewBag.NumTimes</p>

在url输入参数后(url类似于HelloWorld/Welcome?name=terry&numTimes=2)

最终界面将显示为

现在我们只是运用ViewBag对象来进行数据传递,之后我们还将介绍如何使用view model来进行传递。

 

 

posted @ 2012-12-22 00:44  terryxym  阅读(408)  评论(0编辑  收藏  举报