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/HelloWorld，Index事件直接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来进行传递。