前方几乎龙使用jQuery在MVC应用程序中,实现了《jQuery实现两独DropDownList联动(MVC)》http://www.cnblogs.com/insus/p/3414480.html 。此次彩排也是以此基础及开展。

Insus.NET想以MVC编辑状态中落实两单DropDownList联动。这和前者没有多深分别,仅是一个以MVC的长状态,另一个凡是以MVC编辑状态。后者最紧要的凡在MVC初次加载时,要将数据的值绑定至DropDownList的挑项达到。

立即段时间,所召开的MVC练习,实际上是jQuery的练,只是以MVC的应用程序中展开。使用jQuery动态产生了html代码。在jQuery去赢得这些动态产生的html内之价签或者元素,难度还是相当之十分。

 

 既然是编辑,那起MVC编辑开始,需要创造创新存储过程,创建MVC更新视图。
jQuery 1

修改MVC应用程序下之Entities\FruitEntity.cs,添加一个创新的艺术,如下
jQuery 2

去控制器修改Controllrs\FruitController.cs,添加两个ActionResult,一个凡是回到Views(),一个归Json,而且第二只叠加属性httpPost.

 jQuery 3

 

连通下去,应该是创造Update视图的,但是在此之前,需要事先夺Index.cshtml视图上一个链接,让用户点击是链接后,MVC将链转向Update.cshtml视图。需要修改的地方,无非是脚高亮部分的代码:
jQuery 4

吓之,现在足创造Update.cshtml视图了:
jQuery 5

 

 开始写jQuery:
先照搬一个收受地址栏的参数方法,也就是说,接收从Index.cshtml视图传到的参数。Insus.NET前数篇《MVC应用程序使用jQuery接收Url的参数》http://www.cnblogs.com/insus/p/3410473.html 有详解了。
jQuery 6

使jQuery的ajax的冲接收至主键来取得这记录:
jQuery 7

下是齐图自定义函数OutputData(tbody,item)的详实语法:
jQuery 8

高达图中,还有个别独<select>标签。将是为此来展示category和kind的。这里只是动生一个拖欠的标签,稍后Insus.NET会指向她实现绑定数据。要明了一点,这些select的数码为是来源于数据库。

以落实dropdownlist,下拉式列表,得得先要描绘少独扩大自定义函数。
jQuery 9

下面是贯彻下拉列表,有某些需小心的凡,代码都是摹写在方的自定义函数OutputData(tbody,item)内,不然我们是力不从心取jQuery动态产生html的价签的。

 jQuery 10

落得图中序号说明:
1,为率先单下拉列表dategory绑定数据。
2,为次独下拉列表Kind绑定数据。
3,是落实联动变化事件,第一单下拉列表有取舍生成时,第二只下拉列表根据参数来显示相应的数据。
4与5,均是亚只下拉列表记录原category的价值,也就是用户在累加时,所选的category值。
6,7同8,也全都是为着绑定默认值,让生拉列表哪一个挑选是选中的状态。而序号8为何是一个0啊?
只要第一独下拉列表变化时,第二个最初的选料项都为”选择…”。

于MVC编辑记录下的鲜个下拉列表联动实现了。接下来是落实创新的功用,$.ajax也是摹写在方的自定义函数OutputData(tbody,item)内:
jQuery 11

不折不扣需要贯彻之职能,全完了了,看看实时演示操作:
jQuery 12

及此练习结束,所有源程序及数据库,可以以下面链接下充斥得到:
http://download.cnblogs.com/insus/MVC/InsusMVCSiteCS_2013Nov16.rar

相关文章

网站地图xml地图