MVC编辑状态两个DropDownList联动

前几天使用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联动

时间: 2024-08-10 17:22:05

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

jQuery实现两个DropDownList联动(MVC)

近段时间原本是学习MVC的,谁知道把jQuery也学上了.而且觉得对jQuery更感兴趣,比如今早上有写了一个练习<jQuery实现DropDownList(MVC)>http://www.cnblogs.com/insus/p/3413749.html,是jQuery实现DropDownList的.就在此基础上,也使用jQuery实现两个DropDownList之间的联动. 两个DropDownList联动,第一个DropDownList实现并没有过多技术上的考虑,而第二个DropDownL

MVC省市区三级下拉菜单联动

控制器端代码(都在同一个表中): using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication10.Models; namespace 下拉列表联动显示_中国省市_.Controllers { public class HomeController : Controller { [HttpGet] //刚

FormView控件的InsertItemTemplate中3个DropDownList联动及绑定问题

在InsertItemTemplate中DropDownList联动和绑定不能同时实现,需要去掉SelectedValue='<%# Bind("CompanyID") %>即可实现联动,另外SqlDataSource应该放在InsertItemTemplate中. <%@ Page Title="" Language="VB" MasterPageFile="~/Manage/Site.master" Au

[WPF] C1ComboBox的非编辑状态

一.前言 先看看WPF自带的 ComboBox 在非编辑状态,自定义 ItemTemplate 的情况下,效果如下图所示: 其当前选中的项(红框内)与自定义的 ItemTemplate 一样: 但是 C1ComboBox 的非编辑状态(IsEditable="False"): 总感觉它的非编辑状态并没有完成,虽然数字和英文无法输入,但在红框内依旧可以输入中文文本(QQ拼音输入法的中文输入状态):并且在非编辑状态下并非像 Combobox 的非编辑状态可以显示自定义的 ItemTempl

ArcGIS学习记录&mdash;ArcGIS ArcMap编辑状态中线打断的问题

摘要:在处理数据时,我们经常会遇到线打断的问题,比如需要指定在线上某处打断线,或者新建网络数据集时需要在线的交点处打段线等等.现将桌面版中我所遇到的线打断的工具总结如下: 在ArcGIS矢量处理数据时,我们经常会遇到线打断的问题,比如需要指定在线上某处打断线,或者新建网络数据集时需要在线的交点处打段线等等.现将桌面版中我所遇到的线打断的工具总结如下: 一.手工打断线 Editor工具条中的split tool.   使用该工具时,选中要打断的线 若需要精确打断,可以再Editor/snappin

EditView不可编辑状态和可编辑状态动态切换 及 EditView的其它特效

不可编辑状态: 两种选择: 第一个 不可编辑但是会弹出输入法 android:editable="false" 第二个 不可编辑同时不会弹出输入法 android:focusable="false" 代码动态控制: editText.setFocusable(false);和editText.setEnabled(false);时不可编辑,但是editText.setFocusable(true);和 editText.setEnabled(true);也是不可编辑

JTable只要一双击就进入编辑状态,禁止的方法实现

我用JTable做了一个表格,表格内容只供查看和选择,可每次只要一双击,就进入编辑状态,可是现在我不需要当双击的时候修改表格的内容.这时候需要重载isCellEditable方法. 下面是我的实现的代码: DefaultTableModel model = new DefaultTableModel(date, columnNames) { public boolean isCellEditable(int row, int column) { return false; } }; 这样设置的话

winform如何实现一个窗体显示后,他的窗体处于不可编辑状态

1)可以使用this.Enabled = false;是窗体处于不可编辑状态. 2)使用showDialog(),showDialog()是一个对话框窗口界面```执行结果以新窗口界面出现```不允许进行后台运行```就是你想编辑什么的时候```非得先关闭showDialog()窗口界面才可以进行其他操作

玩转web之JQuery(二)---改变表单和input的可编辑状态(封装的js)

var FormDeal = { /** * 功能 :将表单的所有input都设为可编辑的 *@param 要操作表单的id */ formWritable: function (formId) { $("#"+formId+" input,textarea").removeAttr("readonly"); $("#"+formId+" input,textarea").css('backgroundCo