• 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来进行传递。

  • 相关阅读:
    repo manifest xml 文件修改后提交命令
    linux下i2c驱动笔记 转
    这么多年至今今天遇到的一件令我气愤还无法想象的,希望看到的人引以为戒吧。不明白现在的孩子怎么了!
    GitLab 之 Linux十分钟快装
    Mongodb For Mac OSX && 登录验证
    Grunt 5分钟上手:合并+压缩前端代码
    回顾:前端模块化和AMD、CMD规范(全)
    通过NPM快速发布你的NodeJS模块(组件包)
    【linux】netlink
    【Java基础知识】JNI入门
  • 原文地址:https://www.cnblogs.com/terryxym/p/2828717.html
Copyright © 2020-2023  润新知