今天学点什么呢?
想来想去觉得DropDownList还是要加强功力,因为以前写ASP.NET网站时,此功能用的非常之多。在练习之前,先温习一下以前练习的《Html.DropDownListFor练习(2)http://www.cnblogs.com/insus/p/3383277.html 是直接使用Rzaor语法实现。近段时间有jQuery与MVC一起学习,所以不如尝试使用jQuery来实现DropDownList。

温习之后,发觉以前写的,是在视图中还要实例化Entity:

@{
var fcEntity = new FruitCategoryEntity();
}

如果使用jQuery来实现的话,就不必这样写了。因为我们可以使用jQuery的$.get(),$.post或$.getJSON()方法中的任一方法获取数据。

怎样写呢?

也就是说,在MVC应用程序的Controllers目录下的CategoryController.cs控制器写JsonResult() Action。
DropDownList的JSON的数据源准备好了。我们现在可以创建一个新视图来实现这个DropDownList了。

创建视图前,先去控制器FruitController.cs创建一个Create() Action:

在应用程序的Views/Fruit/下,创建Create.cshtml视图。

在视图中的第#17行代码,有放select 标签。后面我们就可以为这个标签使用jQuery绑定数据。
现在我们可以写jQuery代码了:

上图中的1部分,是为了给DropDownList添加一个Item。第2部分是给DropDownList绑定数据。另外第2部分还可以使用下面代码来替代:

Insus.NET较习惯后一种写法,因为更直观。

最后来看看这个DropDownList的效果:

jQuery实现DropDownList(MVC)的更多相关文章

  1. jQuery+ASP.NET MVC基于CORS实现带cookie的跨域ajax请求

    这是今天遇到的一个实际问题,在这篇随笔中记录一下解决方法. ASP.NET Web API提供了CORS支持,但ASP.NET MVC默认不支持,需要自己动手实现.可以写一个用于实现CORS的Acti ...

  2. jquery调用spring mvc接口返回字符串匹配

    背景:有个增删改页面,用jquery祭出ajax异步调用接口,spring mvc响应对象是个json字符串,jquery根据响应结果判断,如果删除成功给出提示.那么问题来了,接口里响应的字符串怎么匹 ...

  3. WebForm使用JQuery实现DropDownList无刷新联动

    目录(?)[-] 1  JS代码 2 页面相关控件用的是平台封装的控件普通DropDownList也可以 3 后台C代码 注意事项   原来用的微软封装的Ajax控件UpdatePannel和Scri ...

  4. jquery获取dropdownlist的value和text值

    1.jquery //获取value值 $("#ddlSubmodel").val(); //获取text值 $("#ddlSubmodel").find(&q ...

  5. jquery.uploadify+spring mvc实现上传图片

    一.前端页面 1.下载jquery.uploadify 去uploadify官网(http://www.uploadify.com/download/)下载压缩包,解压后放在如下路径: 2.html结 ...

  6. jquery 绑定,mvc和webform的三种方式

    asp.net里的绑定方式,on的绑定方式无效 $('#SelCommandType').bind('click', function () { }); mvc里的绑定方式 $('#DownList' ...

  7. Jquery与.net MVC结合,通过Ajax

    在工作中做了这么一个东西. Html端: @using Test.fh.Project.Storefront.ViewModels @using Test.fh.Project.Storefront. ...

  8. jquery change dropdownlist selected option

    <select name="corporation"> <option value="1">corporation1</optio ...

  9. Jquery 操作DropDownList 根据条件选中

    $("#<%=DDLCounty.ClientID%> option").each(function () { if ($(this).text() == $(&quo ...

随机推荐

  1. poj 1129 搜索

    Channel Allocation Time Limit: 1000 MS Memory Limit: 10000 KB 64-bit integer IO format: %I64d , %I64 ...

  2. Python 学习第三部分函数——第一章函数基础

    函数是python 为了代码最大程度的重用和最小代码冗余而提供的最基本的程序结构.使用它我们可以将复杂的系统分解为可管理的部件. 函数相关语句 def...          创建一个对象并将其赋值给 ...

  3. TaskCreationOptions.LongRunning 运行比可用线程数更多的任务

    最近在学WebSocket,服务端需要监听多个WebSocket客户端发送的消息. 开始的解决方法是每个WebSocket客户端都添加一个线程进行监听,代码如下: /// <summary> ...

  4. .NET Core 跨平台 串口通讯 ,Windows/Linux 串口通讯,flyfire.CustomSerialPort 的使用

    目录 1,前言 2,安装虚拟串口软件 3,新建项目,加入 flyfire.CustomSerialPort 4,flyfire.CustomSerialPort 说明 5,开始使用 flyfire.C ...

  5. MariaDB 数据库系统概述(1)

    MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...

  6. Django(命名URL和URL反向解析)

    day67 参考: https://www.cnblogs.com/liwenzhou/articles/8271147.html#autoid-1-4-0 反向解析URL             本 ...

  7. css经典布局—Sticky footers布局

    参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果:将footer固定到底部.文章内容不足满屏时 footer在底部,超 ...

  8. cmd下【java监视和管理控制台】

    不需要安装插件,只要jmeter的运行环境配置好就可以了:打开这个小工具的步骤很简单,如果你已经配置好了Jmeter运行的环境,那么你也就不用去做其他的配置,直接 点击:开始——>运行——> ...

  9. Hive中的Row_Number()使用

    语法:row_number() over (partition by 字段a order by 计算项b desc ) rank --这里rank是别名 partition by:类似hive的建表, ...

  10. Win7删除网络位置那些不用的网络位置(驱动器)

    1.初始状态: 映射成功的网络位置如下图 2.要删除这个网络位置:点击"打开网络和共享中心",然后如下图设置: 3.重启电脑之后,删除的"网络位置"不会在资源管 ...