• 四、理解视图层,视图数据和HTML辅助


    这篇文章简洁介绍了ASP.NET MVC视图、视图数据和HTML辅助。看完这篇文章我们会知道
    如何创建视图
    如何从控制层向视图层传输数据
    如何使用HTML辅助生成视图界面
    一、理解视图
    与ASP.NET和ASP不同的是,ASP.NET MVC并不包含直接响影页面代码。在ASP.NET MVC应用程序中,浏览器地址栏中的URL地址并不与硬盘上的页面文件相对应。在ASP.NET MVC应用程序中向页面中传递的内容,我们称之为视图。
    在ASP.NET MVC应用程序中,来自浏览器的请求被映射到控制器的动作上。控制器的动作返回一个视图,当然控制器也可以执行其它类型的动作,如动作重定向。
    下面的代码包含了一个名子叫HoomeController的简单控制器,这个控制器有两个动作Index()和Details()。
    Listing 1 – HomeController.cs
    using System;
    using System.Collections.Generic;
    using System.Linq; using System.Web;
    using System.Web.Mvc;
    namespace MvcApp.Controllers
    {     
       [HandleError]     
       public class HomeController : Controller     
       {          
        public ActionResult Index()          
        {               
         return View();          
        }          
        public ActionResult Details()          
        {               
         return RedirectToAction("Index");          
        }     
       }
    }
    当我们在浏览器地址栏中输入/Home/Index后,会触发第一个动作Index()
    当我们在浏览器地址栏中输入/Home/Details后,会触发第二个动作Details()

    Index()动作使用return View();返回的是一个视图(在以后我们创建的大部分的动作会返回视图),它会把该视图发送到\Views\Home\Index.aspx页面上视图的路径与控制器类名、动作名以及参数名一一对应。当然视图也可以显示命名,如:return View(“Fred”); 则返回一个视图,该视图的名子叫做Fred,它会把视图返回到\Views\Home\Fred.aspx页面上。

    二、创建视图(原创:灰灰虫的家 http://hi.baidu.com/grayworm
    在解决方案管理器中右击Views文件夹,选择“Add”-“New Item”,在弹出的对话框中选择MVC View Page模板,点击“Add”添加到项目中


    《图1》
    需要注意的是,我们不能像添加ASP.NET页面那样向ASP.NET MVC程序中添加新页面。另外我们需要注意的是,我们页面的路径要与控制器相对应。比如,我们为ProductorController控制器创建一个新视图Index,那我们必须要把视图创建在\Views\Product\Index.aspx 路径中。

    三、向视图中添加内容
    视图是一个标准的HTML文档,它可以包含脚本,我们可以使用脚本来动态控制视图的输出。
    例如:下面的代码显示当前的日期和时间
    Listing 2 – \Views\Home\Index.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApp.Views.Home.Index" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml" >     
       <head runat="server">          
        <title>Index</title>     
       </head>     
       <body>          
        <div>               
        The current date and time is: <% Response.Write(DateTime.Now);%>
        </div>     
       </body>
    </html>

    注意到我们的代码中有下面一句:
    <% Response.Write(DateTime.Now);%>
    我们使用<%和%>来标识脚本文件的开始和结束,这里的脚本是用C#代码编写的,用Response.Write来在浏览器中显示当前的日期时间。<%和%>中间可以编写一条或多条语句。
    由于在ASP.NET MVC中使用Response.Write()输出的情况比较多,所以微软提供了<%=和%>的简便形式来调用Response.Write()
    Listing 3 – Views\Home\Index2.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApp.Views.Home.Index2" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml" >     
       <head runat="server">          
       <title>Index2</title>     
       </head>     
       <body>          
        <div>               
        The current date and time is: <%=DateTime.Now%>          
        </div>     
       </body>
    </html>
    我们可以使用.NET所支持的语言在视图中来动态控制显示内容。一般我们使用VB.NET或C#来控制

    四、使用HTML辅助来动态生成视图内容(原创:灰灰虫的家 http://hi.baidu.com/grayworm
    除了可以使用脚本向视图中添加内容,我们还可以使用HTML辅助来实现。HTML辅助是动态生成字符串的一种方法。我们可以使用HTML辅助来动态生成HTML元素,如:文本框,超链接,列表和下拉列表等。
    下面的代码是我们用HTML辅助创建的的用户名和密码文本框,生成登录页面。
    Listing 4 -- \Views\Home\Index3.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApp.Views.Home.Index3" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml" >     
       <head runat="server">          
        <title>Login Form</title>     
       </head>     
       <body>          
        <div>               
        <form method="post" action="/Home/Login">                    
         <label for="userName">User Name:</label><br />                     
        <%=Html.TextBox("userName")%><br />
         <label for="password">Password:</label><br />                     
        <%=Html.Password("password")%>                    
         <br />                   
         <input type="submit" value="Log In" />               
        </form>          
        </div>     
       </body>
    </html>


    《图2》

    在视图层的所有的HTML辅助都使用Html属性调用,比如要呈现文本框,就使用Html.TextBox()方法。
    应当注意的是,我们都是使用<%=和%>来调用HTML辅助的,这是因为,HTML辅助简单生成一个字符串,所以我们需要调用Response.Write()来把字符串写在页面上
    使用HTML辅助方法是可选的,它可以有效地减少我们的HTML代码和脚本,下面的代码也是生成一个登录页面,但没有使用HTML辅助。
    Listing 5 -- \Views\Home\Index4.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index4.aspx.cs" Inherits="MvcApp.Views.Home.Index4" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml" >     
       <head runat="server">          
       <title>Login Form without Help</title>     
       </head>     
       <body>          
        <div>               
        <form method="post" action="/Home/Login">                    
         <label for="userName">User Name:</label>                    
         <br />                    
         <input name="userName" />                    
         <br /><br />                    
         <label for="password">Password:</label>                    
         <br />                    
         <input name="password" type="password" />                    
         <br /><br />                    
         <input type="submit" value="Log In" />               
        </form>          
        </div>     
       </body>
    </html>
    我们当然也可以创建我们自己的HTML辅助,比仿说我们要创建一个GridView()辅助用来生成数据库中的数据表格。这部分内容我们将在Creating Custom HTML Helpers文章中单独讲述。

    五、使用ViewData向视图层传递数据(原创:灰灰虫的家 http://hi.baidu.com/grayworm
    我们可以使用视图的一个属性ViewData来从控制向视图传递数据,代码如下图所示
    Listing 6 – ProductController.cs
    using System; using
    System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    namespace MvcApp.Controllers
    {     
       public class ProductController : Controller     
       {          
        public ActionResult Details()          
        {               
        ViewData["message"] = "Hello World!";               
        return View();          
        }     
       }
    }
    控制器的ViewData属性是一个名-值对的集合,我们在Details方法中向ViewData集合中添加了一个名子为message,值为Hello World的对象。当Details()方法向视图返回View的时候,ViewData会自动被传送到视图层。

    下面的代码是我们在视图层接收ViewData数据,并显示在页面上。
    Listing 7 -- \Views\Product\Details.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Details.aspx.cs" Inherits="MvcApp.Views.Product.Details" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml" >     
       <head runat="server">          
        <title>ProductDetails</title>     
       </head>     
       <body>          
        <div>               
        <%=Html.Encode(ViewData["message"])%>          
        </div>     
       </body>
    </html>

    在上面的代码中在显示ViewData数据的时候,我们使用了Html.Encode()这个HTML辅助。Html.Encode()会对HTML元素进行编码,把<和>转义成&lt;和&gt;以安全的形式显示在页面上。无论什么时候,当我们要在页面上显示数据的时候我们都要注意防止JavaScript注入攻击。虽我在这里我们从控制器输出的数据并没有JavaScript攻击,但我们要养成一种好的习惯,调用Html.Encode()来显示数据。
    在上面的代码中在控制器中使用ViewData向视图层返回一个字符串的数据,当我们想从控制器返回其它类型的数据,如数据记录的集合,那我们需要使用ViewData传递实体类的集合。
    我们还可以从控制器向视图返回强类型的ViewData,关于这方面的内容我们将在Understanding Strongly Typed View Data and Views文章中进行介绍。

    总结(原创:灰灰虫的家 http://hi.baidu.com/grayworm
    这篇文章简单描述了ASP.NET MVC的视图、ViewData和HTML辅助。
    在第一部分我们知道如何向项目中添加一个新的视图,在添加新视图的时候我们应当把视图放在正确的文件夹中,以便控制器动作的调用。
    然后,我们又讨论了HTML辅助,HTML辅助可以帮助我们生成标准的HTML内容
    最后,我们学习了如何使用ViewData从控制层向视图层传递数据。

  • 相关阅读:
    使用Angular2建立项目
    你不知道的JavaScript-0
    项目从0到1
    登录页跳转时保存用户信息-遇坑记
    robotframework-ride快捷方式打不开
    win10 python3.8 wxpython.whl 安装步骤
    QPS
    xmind 文件 打开后会在当前目录生成 configuration,p2和workspace目录,artifacts.xml文件 解决
    JMeter进行压力测试时查看服务器的资源使用
    JMeter和JMeterPlugin的下载安装
  • 原文地址:https://www.cnblogs.com/zxktxj/p/2461454.html
Copyright © 2020-2023  润新知