MVCJavaScript代码中获取视图模型的数据Word文件下载.docx
- 文档编号:16568766
- 上传时间:2022-11-24
- 格式:DOCX
- 页数:10
- 大小:125.42KB
MVCJavaScript代码中获取视图模型的数据Word文件下载.docx
《MVCJavaScript代码中获取视图模型的数据Word文件下载.docx》由会员分享,可在线阅读,更多相关《MVCJavaScript代码中获取视图模型的数据Word文件下载.docx(10页珍藏版)》请在冰豆网上搜索。
}
其中通过ViewBag向页面传送一句文本。
那么在页面,我们通过直接书写相同的系统变量名称来访问:
<
h2>
%:
ViewBag.Message%>
/h2>
再看看ViewData,比如我把刚才通过ViewBag传送的值通过ViewData来完成。
所以在Home/Index这个Action里而,修改代码如下:
//ViewBag.Message="
ViewData["
Message"
]="
!
它是以数组的形式,随便取了个游标名以便访问数据,这里定义了一个名为“Message”的文本保存到了ViewData里而。
然后在页面,同样使用相同的语句来访问:
]%>
如果想传递多个变量,直接书写另一个变量就行,然后在页面访问变量名获取数据。
有意思的是,貌似ViewBag和ViewData其实是同种东西的不同表示,比如我们定义:
ViewBag.Message"
在页面,既可以通过ViewBag的句法来访问,也可以通过ViewData的句法来访问。
反之亦可。
但其实上面这些都不是本文我想说的,下面进入主题,如果在JavaScript代码中访问这些数据,进一步说,如何访问由Action传到页面的数据。
在由<
Script>
包围的脚本代码中,自然想到用相同的语法来访问。
我们用ViewData进行传递:
message"
Datafromserver."
然后在JS代码中,看起来应该是这样子的:
script>
$(function(){
vardata=<
})
/script>
然后一运行发现报错,
但神奇的是我们已经完成任务了。
但其实仔细看是不正确的,因为等号后面的语句,不是正常的JavaScript语句。
那为了避免报错同时使代码正常,我们需要用引号将它包起来,所以看起来应该是这样子的:
vardata='
'
对于这样的简单数据,似乎就已经够了。
但一般Action返回的都是模型(Model)等复杂类型的数据。
首先,为了说明方便,到Model文件夹下创建一个类文件,叫PersonalModel,为了简单,其内容大概是这样的:
publicclassPersonModel
publicstringName{get;
set;
publicintAge{get;
很简单的对象,只包含一个字符串类型的Name属性和一个整型类型的Age属性。
下面再写一个方法产生一些静数据,真实情况下这些数据可能是从数据库取的。
为了调用方便这个方法我写在了HomeController类里面,其样子看起来似乎是这样子的:
staticList<
PersonModel>
DummyData()
vardata=newList<
()
newPersonModel()
Name="
Tom"
Age=20
},
Cat"
Age=5
};
returndata;
然后我们去修改IndexAction,让它返回数据。
vardata=DummyData();
returnView(data);
最后我们再去页面的JS代码段里,接收它。
varmodel=<
%=newJavaScriptSerializer().Serialize(Model)%>
debugger;
加了个debugger是为了呆会在浏览器里进入调试模式查看数据的方便。
然后我们再到浏览器查看是否得到了数据(记得浏览器是调试模式,按F12进入)。
我们成功在JS代码片段里获得了传来的数据并序例化成了Json格式。
然后可以通过类似下面的语句来调用。
alert(model[0].Name);
上面说的只是在JS里访问,其实这倒不是主要的需求了,只是我们习惯了在页面的使用方法而突然要在JS里访问这些数据时不知道怎么办。
那在页面里,如何对这种集合类型的数据进行访问。
我们都知道向页面传送一个Model时的情形。
比如下面我们修改IndexAction让它只返回一条数据。
类型当然为PersonModle了。
//vardata=DummyData();
vardata=newPersonModel()
注意之前的data(注释掉的那个)的类型是List<
,它是个集合类型,而现在是PersonModle类型的。
理解这点对我们在页面如何正确获取数据非常重要。
然后再去把页面修改为强类型的,经便接收数据(如妳所见,上面我们在JS中想要获得数据时,不需要页面是强类型的)。
之前的页面类型看起来是这个样子的:
%@PageLanguage="
C#"
MasterPageFile="
~/Views/Shared/Site.Master"
Inherits="
System.Web.Mvc.ViewPage"
%>
现在我们要将它修改为这个样子的:
System.Web.Mvc.ViewPage<
MvcApplication17.Models.PersonModel>
然后我们就可以在页面使用传递来的数据了,用类似这样的语法:
p>
Name:
%=Html.DisplayFor(model=>
model.Name)%>
Age:
model.Age)%>
/p>
当传递来的是集合类型的数据时,就无法这样简单的访问了,需要遍历集合,取到里面的单条数据后才可使用。
下面我们就来看一下集合类型时的情境。
修改IndexAction返回的数据为原来的那个:
然后再去把页面的接收类型相应修改成这个样子的:
IEnumerable<
>
最后在页面,我们需要遍历这个集合来取得数据,可以用类似这样的句法:
%foreach(variteminModel){%>
%=Html.DisplayFor(n=>
item.Name)%>
item.Age)%>
%}%>
这里还只是简单谈到了MVC中数据由服务器端到页面的传递,其实更难的是将数据传回服务器绑定到模型。
当然,如果妳用表单,直接一个Submit,所有的事情框架都为妳做了,模型很容易就绑定好了。
但如果妳的页面有个多模型呢,妳不想用Submit而想自己写Ajax的回传呢,这样的数据传递如何在服务器端获取。
。
有时间再谈了。
可以参考的文章:
1.ASP.NETMVCusingViewDatainjavascript(StackOverFlow)
2.UsingASP.NETMVCv2EditorForandDisplayForwithIEnumerable<
T>
Generictypes
3.
4.http:
//code-inside.de/blog-in/2012/09/17/modelbinding-with-complex-objects-in-asp-net-mvc/
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- MVCJavaScript 代码 获取 视图 模型 数据