前几天使用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更新视图。
图片 1

修改MVC应用程序下的Entities\FruitEntity.cs,添加一个翻新的法子,如下
图片 2

去控制器修改Controllrs\FruitController.cs,添加五个ActionResult,一个是回到Views(),一个回来Json,而且首个附加属性httpPost.

 图片 3

 

接下去,应该是开创Update视图的,不过在此此前,必要先去Index.cshtml视图添一个链接,让用户点击这么些链接之后,MVC将链转向Update.cshtml视图。须求修改的地点,无非是下边高亮部分的代码:
图片 4

好的,今后能够创造Update.cshtml视图了:
图片 5

 

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

动用jQuery的ajax的依照接收到主键来得到此记录:
图片 7

上边是上图自定义函数OutputData(tbody,item)的事无巨细语法:
图片 8

上图中,还有三个<select>标签。将是用来显示category和kind的。那里只是动生一个空的价签,稍后Insus.NET会对它达成绑定数据。要明白一点,那个select的数据也是出自数据库。

为了促成dropdownlist,下拉式列表,得需先要写七个伸张自定义函数。
图片 9

上边是促成下拉列表,有少数要求注意的是,代码均是写在上头的自定义函数OutputData(tbody,item)内,不然我们是无能为力拿到jQuery动态爆发html的标签的。

 图片 10

上图中序号表达:
1,为率先个下拉列表dategory绑定数据。
2,为第四个下拉列表Kind绑定数据。
3,是落实联动变化事件,第三个下拉列表有采纳生成时,第二个下拉列表根据参数来浮现相应的数码。
4与5,均是第一个下拉列表记录原category的值,也等于用户在加上时,所选择的category值。
6,7与8,也均是为着绑定暗中认可值,让下拉列表哪一个取舍是选中的状态。而序号8为啥是一个0吧?
只要第二个下拉列表变化时,第三个最初的选项均为”选用…”。

在MVC编辑记录下的两个下拉列表联动达成了。接下来是落到实处创新的作用,$.ajax也是写在上头的自定义函数OutputData(tbody,item)内:
图片 11

一切要求贯彻的功能,全完了了,看看实时演示操作:
图片 12

到此训练为止,所有源程序与数据库,可以在上面链接下载拿到:
http://download.cnblogs.com/insus/MVC/InsusMVCSiteCS_2013Nov16.rar

相关文章

网站地图xml地图