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

修改MVC应用程序下的Entities\FruitEntity.cs,添加一个更新的方法,如下

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

接下来,应该是创建Update视图的,但是在此之前,需要先去Index.cshtml视图添一个链接,让用户点击这个链接之后,MVC将链转向Update.cshtml视图。需要修改的地方,无非是下面高亮部分的代码:

好的,现在可以创建Update.cshtml视图了:

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

使用jQuery的ajax的根据接收到主键来获取此记录:

下面是上图自定义函数OutputData(tbody,item)的详细语法:

上图中,还有两个<select>标签。将是用来显示category和kind的。这里只是动生一个空的标签,稍后Insus.NET会对它实现绑定数据。要知道一点,这些select的数据也是来自数据库。

为了实现dropdownlist,下拉式列表,得需先要写两个扩展自定义函数。

下面是实现下拉列表,有一点需要注意的是,代码均是写在上面的自定义函数OutputData(tbody,item)内,不然我们是无法获取jQuery动态产生html的标签的。

上图中序号说明:
1,为第一个下拉列表dategory绑定数据。
2,为第二个下拉列表Kind绑定数据。
3,是实现联动变化事件,第一个下拉列表有选择变化时,第二个下拉列表根据参数来显示相应的数据。
4与5,均是第二个下拉列表记录原category的值,也就是用户在添加时,所选择的category值。
6,7与8,也均是为了绑定默认值,让下拉列表哪一个选项是选中的状态。而序号8为何是一个0呢? 只要第一个下拉列表变化时,第二个最初的选项均为"选择..."。

在MVC编辑记录下的两个下拉列表联动实现了。接下来是实现更新的功能,$.ajax也是写在上面的自定义函数OutputData(tbody,item)内:

整个需要实现的功能,全完成了,看看实时演示操作:

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

MVC编辑状态两个DropDownList联动的更多相关文章

  1. jQuery实现两个DropDownList联动(MVC)

    近段时间原本是学习MVC的,谁知道把jQuery也学上了.而且觉得对jQuery更感兴趣,比如今早上有写了一个练习<jQuery实现DropDownList(MVC)>http://www ...

  2. GridView中两个DropDownList联动

    GridView中两个DropDownList联动 http://www.cnblogs.com/qfb620/archive/2011/05/25/2057163.html Html: <as ...

  3. [C1] C1ComboBox 的非编辑状态优化

    一.前言 先看看 WPF 自带的 ComboBox 在非编辑状态,自定义 ItemTemplate 的情况下,效果如下图所示: 其当前选中的项(红框内)与自定义的 ItemTemplate 一样: 但 ...

  4. ArcGIS学习记录—ArcGIS ArcMap编辑状态中线打断的问题

    摘要:在处理数据时,我们经常会遇到线打断的问题,比如需要指定在线上某处打断线,或者新建网络数据集时需要在线的交点处打段线等等.现将桌面版中我所遇到的线打断的工具总结如下: 在ArcGIS矢量处理数据时 ...

  5. DataGridView的DataGridViewComboBoxColumn列点击一次,自动处于编辑状态

    本文转载:http://www.cnblogs.com/Johnny_Z/archive/2012/02/12/2348235.html Winform中的DataGridView数据绑定控件有时会用 ...

  6. [转]ASP.NET MVC中的两个Action之间值的传递--TempData

    本文转自:ASP.NET MVC中的两个Action之间值的传递--TempData 一. ASP.NET MVC中的TempData 在ASP.NET MVC框架的ControllerBase中存在 ...

  7. cad.net 在位编辑的原理猜测及找到在位编辑状态的图元

    在位编辑的时候会产生一个名为 0-RefEdit0 的图层,原因不明.... 在位编辑的本质是一个长事务,长事务是使用编辑库的对象替换源对象,相当于剪辑.不理解没关系,请看下面的聊天记录.... [贵 ...

  8. Devexpress WinForm GridControl实现单元格可编辑状态更改

    之前做项目的时候,需要实现这样的功能.在gridcontrol中,根据是否修改(checkbox)列的选中和未选中状态来联动另外一列的编辑状态.实现如下: private void gridView1 ...

  9. 鸿蒙内核源码分析(Shell编辑篇) | 两个任务,三个阶段 | 百篇博客分析OpenHarmony源码 | v71.01

    子曰:"我非生而知之者,好古,敏以求之者也." <论语>:述而篇 百篇博客系列篇.本篇为: v71.xx 鸿蒙内核源码分析(Shell编辑篇) | 两个任务,三个阶段 ...

随机推荐

  1. Python中is和==的区别

    Python中有很多运算符,今天我们就来讲讲is和==两种运算符在应用上的本质区别是什么. 在讲is和==这两种运算符区别之前,首先要知道Python中对象包含的三个基本要素,分别是:id(身份标识) ...

  2. Scala 深入浅出实战经典 第44讲: scala中view bounds代码实例

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  3. 表单验证Jquery扩展方法类

    /** 表单数据验证 **/ $.fn.Validform = function () { var Validatemsg = ""; var Validateflag = tru ...

  4. 菜鸟调错(七)——控制台中执行mvn命令后提示‘cmd’不是内部或外部命令

    最近在cmd下使用mvn命令时,在执行完以后总会出现一句“‘cmd’不是内部或外部命令,也不是可执行程序或批处理文件”,如下图: 虽然命令执行成功了,不会有什么影响,但是身为强迫症晚期的我是绝对不能忍 ...

  5. 使用PopupWindow实现Menu功能

    参考:http://www.cnblogs.com/sw926/p/3230659.html 注意: PopupWindow会给PopupView设置Padding,会导致ContentView的左右 ...

  6. 如何通过XShell传输文件

    转载孟光孟叔的博客:  https://learndevops.cn/index.php/2016/06/14/how-to-transfer-file-using-xshell xshell目前最好 ...

  7. CSS-JQUERY笔记

    Ready $(document).ready(function(){ }) Input_div_span Input-长度限制 <input maxLength="2"&g ...

  8. C# MailMessage Attachment 中文名附件发邮件-Firefox中文显示正常,网页打开邮件附件中文名乱码

    一.故事 首先通过CDO.Message来获取邮件EML相关数据:邮件标题.邮件内容.邮件附件.发件人.收件人.CC主要就这么几个,其次通过MailMessage来组织邮件通过Python来发送邮件! ...

  9. [转]silverlight Datagrid 行上增加ToolTip

    有两种办法: 1. 直接在后台处理在数据绑定后 ,注册LoadingRow 事件this.DataGrid.LoadingRow += new EventHandler<DataGridRowE ...

  10. Web Uploader文件上传插件

    http://www.jq22.com/jquery-info2665   插件描述:WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现 ...