【MVC】JavaScript代码中获取视图模型的数据

懂点MVC的人都知道MVC 的机制是访问Contoller下的Action,由Action组织好页面需要的数据然后返回视图(return View()/return PartialView())或数据(return Content(“blah”)/ return Json(…)),有的时候返回视图的同时连带返回数据以供页面使用(return View(model))。

 

其实Controller与View之间的传值有很多形式啦,除了传统的Retrun语句向页面返回数据,还可以通过 ViewData,ViewBag等。它们的使用在Razor句法与非Razor句法中稍有不同。

 

比如妳新建一个MVC程序,在初始的Home/Index Action里而,就有如下代码:

 

public ActionResult Index()

        {

            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();

        }

 

其中通过ViewBag向页面传送一句文本。那么在页面,我们通过直接书写相同的系统变量名称来访问:

 

<h2><%: ViewBag.Message %></h2>

 


  

再看看ViewData,比如我把刚才通过ViewBag传送的值通过ViewData来完成。

所以在Home/Index 这个Action里而,修改代码如下:

 

 


public ActionResult Index()

        {

            //ViewBag.Message = "Welcome to ASP.NET MVC!";

            ViewData["Message"] = "Welcome to ASP.NET MVC!!";

            return View();

        }

 

 

它是以数组的形式,随便取了个游标名以便访问数据,这里定义了一个名为“Message”的文本保存到了ViewData里而。

然后在页面,同样使用相同的语句来访问:

  

 

<h2><%: ViewData ["Message"] %></h2>

 

 

如果想传递多个变量,直接书写另一个变量就行,然后在页面访问变量名获取数据。

 

有意思的是,貌似ViewBag和ViewData 其实是同种东西的不同表示,比如我们定义:

 

public ActionResult Index()

        {

            ViewBag.Message = "ViewBag.Message";

            return View();

        }

 

在页面,既可以通过ViewBag的句法来访问,也可以通过ViewData的句法来访问。反之亦可。 

 

 

<h2><%: ViewData ["Message"] %></h2>

<h2><%: ViewBag.Message %></h2>

 

  

 

但其实上面这些都不是本文我想说的,下面进入主题,如果在JavaScript代码中访问这些数据,进一步说,如何访问由Action 传到页面的数据。

 

在由<Script>包围的脚本代码中,自然想到用相同的语法来访问。我们用ViewData进行传递:

 

public ActionResult Index()

        {

           ViewData["message"] = "Data from server.";

            return View();

        }

 

然后在JS代码中,看起来应该是这样子的: 

 

<script >

        $(function() {

            var data =  <%:ViewData["message"] %>;

        })

    </script>

 

然后一运行发现报错, 

 

但神奇的是我们已经完成任务了。但其实仔细看是不正确的,因为等号后面的语句,不是正常的JavaScript语句。

 

那为了避免报错同时使代码正常,我们需要用引号将它包起来,所以看起来应该是这样子的:

 

 

var data = ' <%:ViewData["message"] %>';

 

  

 

对于这样的简单数据,似乎就已经够了。但一般Action返回的都是模型(Model)等复杂类型的数据。

 

首先,为了说明方便,到Model文件夹下创建一个类文件,叫PersonalModel,为了简单,其内容大概是这样的:

 

 

public class PersonModel

    {

        public string Name { get; set; }

        public int Age { get; set; }

    }

 

很简单的对象,只包含一个字符串类型的Name属性和一个整型类型的Age属性。 

 

下面再写一个方法产生一些静数据,真实情况下这些数据可能是从数据库取的。为了调用方便这个方法我写在了HomeController 类里面,其样子看起来似乎是这样子的:

 

static List<PersonModel> DummyData()

        {

            var data = new List<PersonModel>()

                           {

                               new PersonModel()

                                   {

                                       Name = "Tom",

                                       Age = 20

                                   },

                               new PersonModel()

                                   {

                                       Name = "Cat",

                                       Age = 5

                                   }

                           };

            return data;

        }

 

 

然后我们去修改Index Action,让它返回数据。 

 

public ActionResult Index()

        {

            var data=DummyData();

            return View(data);

        }

 

最后我们再去页面的JS代码段里,接收它。 

 

<script >

        $(function() {

            var model = <%= new JavaScriptSerializer().Serialize(Model) %>;

            debugger;

        }) 

    </script>

 

加了个debugger是为了呆会在浏览器里进入调试模式查看数据的方便。 

然后我们再到浏览器查看是否得到了数据(记得浏览器是调试模式,按F12进入)。

 

 

 

我们成功在JS代码片段里获得了传来的数据并序例化成了Json格式。

然后可以通过类似下面的语句来调用。

 

 

<script >

        $(function() {

            var model = <%= new JavaScriptSerializer().Serialize(Model) %>;

            alert(model[0].Name);

            debugger;

        }) 

    </script>

 

  

 

 

 

上面说的只是在JS里访问,其实这倒不是主要的需求了,只是我们习惯了在页面的使用方法而突然要在JS里访问这些数据时不知道怎么办。

 

那在页面里,如何对这种集合类型的数据进行访问。我们都知道向页面传送一个Model时的情形。

比如下面我们修改Index Action让它只返回一条数据。类型当然为PersonModle了。

 

public ActionResult Index()

        {

            //var data=DummyData();

            var data = new PersonModel()

                           {

                               Name = "Tom",

                               Age = 20

                           };

            return View(data);

        }

 

注意之前的data(注释掉的那个)的类型是List<PersonModel>,它是个集合类型,而现在是PersonModle类型的。理解这点对我们在页面如何正确获取数据非常重要。 

 

然后再去把页面修改为强类型的,经便接收数据(如妳所见,上面我们在JS中想要获得数据时,不需要页面是强类型的)。

之前的页面类型看起来是这个样子的:

 


<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

 

 

现在我们要将它修改为这个样子的:

 

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication17.Models.PersonModel>" %>

 

然后我们就可以在页面使用传递来的数据了,用类似这样的语法: 

 

 

<p>

   Name:<%= Html.DisplayFor(model=>model.Name) %>

   Age:<%= Html.DisplayFor(model=>model.Age) %>

</p>

 

  

 

当传递来的是集合类型的数据时,就无法这样简单的访问了,需要遍历集合,取到里面的单条数据后才可使用。

 

下面我们就来看一下集合类型时的情境。

修改Index Action返回的数据为原来的那个:

 

 

public ActionResult Index()

        {

            var data=DummyData();

            return View(data);

        }

 

然后再去把页面的接收类型相应修改成这个样子的: 

 

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication17.Models.PersonModel>>" %>

 

最后在页面,我们需要遍历这个集合来取得数据,可以用类似这样的句法: 

 

 

<% foreach(var item in Model) { %>

        <p>

             Name:<%= Html.DisplayFor(n=>item.Name) %>

             Age:<%= Html.DisplayFor(n=>item.Age) %>

        </p>

    <% } %>

 

  

 

这里还只是简单谈到了MVC中数据由服务器端到页面的传递,其实更难的是将数据传回服务器绑定到模型。当然,如果妳用表单,直接一个Submit,所有的事情框架都为妳做了,模型很容易就绑定好了。但如果妳的页面有个多模型呢,妳不想用Submit而想自己写Ajax的回传呢,这样的数据传递如何在服务器端获取。。。有时间再谈了。

 

 

 

可以参考的文章:

  1. ASP.NET MVC using ViewData in javascript(StackOverFlow)
  2. Using ASP.NET MVC v2 EditorFor and DisplayFor with IEnumerable<T> Generic types
  3. http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
  4. http://code-inside.de/blog-in/2012/09/17/modelbinding-with-complex-objects-in-asp-net-mvc/
时间: 2024-10-27 01:42:46

【MVC】JavaScript代码中获取视图模型的数据的相关文章

如何在onCreate方法中获取视图的宽度和高度

你可以通过视图的getWidth()和getHeight()来获取视图的宽度和高度. 但是,可能会让你失望的是,如果你直接在onCreate方法内调用这两个函数,你会的到0. 为什么呢? 这是因为,当onCreate被调用的时候,视图的内容正在被LayoutInflater来填充xml布局. 这个过程会填充布局,但是暂时不会设置视图的大小. 那么视图到底什么时候获得自己的大小尺寸呢? 实际上是在Layout以后,而layout又是在onCreate调用以后. 那么,如果我们要在onCreate方

eclipse rcp 代码中获取action对象

问题描述 eclipse rcp 代码中获取action对象 请问有没有什么办法可以在Activator中获取extensions中添加的工具栏或者菜单栏按钮对象,这样可以在代码中控制每一个action对应图标的样式,以及各action的可用和不可用状态.

怎么在java代码中获取Sessionlistener和Session失效时间?

问题描述 怎么在java代码中获取Sessionlistener和Session失效时间? 我现在在做Session集中管理的功能,把Session数据存放到Redis中,为了要兼容常见的应用服务器,所以参照SpringSession,实现了自己的一套Session管理机制.写了一个套Session管理,替换了应用服务器的Session管理.现在需要做Session失效和SessionListener功能. 现在遇到两个问题: 1.怎么在java代码中,获取到用户设置的Session失效时间?

java代码中获取进程process id(转)

     另一方面,线程ID=进程ID+内部线程对象ID并不成立,    参考: blog.csdn.net/heyetina/article/details/6633901     如何在java代码中获取进程process id, 实现方法如下所示:    参考: rednaxelafx.iteye.com/blog/716918                 http://www.cnblogs.com/mumuxinfei/p/3678854.html  

Spring在代码中获取bean的方法小结_java

一.通过Spring提供的ContextLoader WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); wac.getBean(beanID); 这种方式不依赖于servlet,不需要注入的方式.但是需要注意一点,在服务器启动时,Spring容器初始化时,不能通过这种方法获取Spring容器 二.实现接口ApplicationContextAware 定义工具类 public class Sp

增量数据获取-如何在SQLServer中获取数据库的增量数据?

问题描述 如何在SQLServer中获取数据库的增量数据? 如何在SQLServer中获取数据库的增量数据? ?有如下要求: 1.是获取整个数据库的增量数据,而不是针对单表. 2.对整个目标数据库只有只读的权限,没有写入的权限. 3.目标数据库的的表结构可能是任意的,我们不能依赖于表结构. 4.指定点可以是一个时间点或者其他. 解决方案 获取数据库增量数据的几种方式获取SqlServer数据库数据,转成JSON对象 解决方案二: 经济条件允许的情况下可以使用SQLSERVER2008企业版中的C

struts2 怎么在js中获取action传回的数据

问题描述 struts2 怎么在js中获取action传回的数据 在action类里 有一个 List users = new ArrayList();action返回之后想要想要在onload里 先把users做一下处理这时在function load(){ .... }中怎么得到users 解决方案 可以用EL表达式var t = ${users} 解决方案二: 在js里可以直接用var t = '' 关键不要忘了最外面的引号 if和iterator可以直接用 不需要引号 解决方案三: 如果

javascript文件中获取当前文件路径详解

1,在jQuery中获取当前JS文件路径 在jQuery中获取当前JS文件的路径比较简单,只需要如下一行代码就搞定. var __FILE__ = $("script").last().attr("src"); 注意,我们一般把这行代码放到文件的开头,让文件加载的时候就立即执行,这样页面中的script元素中,当前文件恰好是最后一个script.我们千万不要把这行代码放到  代码如下 复制代码 $(document).ready(); $(function(){  

oracle中从指定日期中获取月份或者部分数据

  从指定日期中获取部分数据: 如月份: select to_CHAR(sysdate,'MM') FROM DUAL; 或者: select extract(month from sysdate) from dual; 又或者最笨的方法,用to_char()先把日期转化为指定格式的字符串,在通过substr()这个取到想要的数据. select substr(to_char(sysdate,'yyyy-mm-dd'),6,2) from dual; 获取日期其它部分数据和上方法一样.