asp.net_MVC_jq三级联动

数据库结构

建立三张表,Association,Team,Player

关系如下:

asp.net_MVC_jq三级联动

建立asp.net MVC 3项目,在HomeController.cs中利用Linq to SQL获取数据

asp.net_MVC_jq三级联动

首先实例化DataClass1,使得实体类和数据库中的数据进行关联;创建GetAssociation()方法,返回值为Json。(Tips:DataContext类是System.Data.Linq命名空间下的重要类型,是通过数据库连接映射的所有实体的源,表示 LINQ to SQL 框架的主入口点。)

asp.net_MVC_jq三级联动

创建GetTeam(int id)以及GetPlayers(string id)方法,返回Json类型。

asp.net_MVC_jq三级联动

asp.net_MVC_jq三级联动

注意,这里的方法参数必须是id,如果不是则无法调用方法,因为在Global.asax中已确定路由规则为id,我就犯过这个错误,怎么也不进这个方法。如果想改参数,可以改掉或者添加路由规则。

asp.net_MVC_jq三级联动

然后在Views文件夹中的Index.cshtml中添加页面代码,因为本Demo采用asp.net MVC 3,所以会看到这个页面后缀名为.cshtml,在此页面中无head、body等html标签,所有代码以及脚本都可以直接书写。

asp.net_MVC_jq三级联动

下面来添加三个下拉框,定义其ID

asp.net_MVC_jq三级联动

然后添加一段JS,这里引用了asp.net MVC 3中集成的jquery-ui-1.8.11.min.js,通过选择器找到对应下拉框,调用change事件,利用JSON返回数据。

asp.net_MVC_jq三级联动

这样就实现了三级无刷新联动,看看简单的效果~

asp.net_MVC_jq三级联动

asp.net_MVC_jq三级联动

asp.net_MVC_jq三级联动

上一篇:B - Moving Tables


下一篇:2014.12.13 ASP.NET文件上传