前端页面——揭开级联查询的面纱

最近，小编一直在做高校平台的的项目，致力于让全国乃至全球的大学都能够使用，我负责的是学生选课的模块，从中学到了很多，自身也得到了历练。今天我就跟大家分享一下自己的项目经验。

• 1什么是级联查询

也许有人还不知道级联查询是什么，那么我们来解释一下。比如说我们在淘宝或者京东上要添加一个自己的收货地址，那么当我们选择省份的时候，它会自动将本省的城市列出来，当我们选择好市以后，它又会把该市所包含的区都列出来，这个效果就是级联查询。

• 2如何实现

我们知道了什么是级联查询，那么怎么才能实现这个效果呢?
不要着急，我们一点点来。首先，我介绍的是通过MVC实现的，至于什么是MVC，大家可以看浅谈MVC架构—你到底有什么本事。我们来做两个下拉框，一个是课程性质，另一个开课学院，根据不同的课程性质来加载不同的开课学院。

• > 第一步

首先在视图中添加HTML代码（两个下拉框）

 课程性质：
@*课程性质下拉文本框*@

<input id="cp" class="easyui-combobox" value="请选择课程性质" panelheight="auto" data-options="
        valueField: ‘label‘,
        textField: ‘value‘,
        data: [{
            label: ‘人文社科‘,
            value: ‘人文社科‘
        },{
            label: ‘自然科学‘,
            value: ‘自然科学‘
        },{
            label: ‘艺术体育‘,
            value: ‘艺术体育‘
        }]" />

开课学院：
@*开课学院下拉文本框*@
<input id="on" class="easyui-combobox" value="请选择开课学院" panelheight="auto" data-options="valueField:‘OrganizationID‘,textField:‘OrganizationName‘" />

• > 第二步( 添加JS代码)

window.onload = function () {

    // 选择课程性质之后，触发该事件
    $(‘#cp‘).combobox({
        onChange: function (newValue, oldValue) {
            // 开课学院，使用新的URL重新载入列表数据
            $(‘#on‘).combobox(‘reload‘, ‘/Common/LoadOrganizationsByProperty?strProperty=‘ + newValue); 
        }
    });
}

• > 第三步（控制器中添加方法）
  找到自己相应的Controller，然后添加加载的方法。（本例是在CommonController中）

 public class CommonController : Controller
    {
        //
        // GET: /选课学生统计/

        public ActionResult Index()
        {
            return View();
        }
        //根据课程性质，加载相应的开课学院
        //此方法为本地加载的假数据，我们也可以通过调用后台去数据库中查询
        public JsonResult LoadOrganizationsByProperty(string strProperty)
        {
            List<SetGradeViewModel> lsorganizations = null;

            if (strProperty == "人文社科")
            {
                lsorganizations = new List<SetGradeViewModel>();
                SetGradeViewModel o1 = new SetGradeViewModel();
                o1.OrganizationID = Guid.NewGuid();
                o1.OrganizationName = "文学院";
                lsorganizations.Add(o1);

                SetGradeViewModel o3 = new SetGradeViewModel();
                o3.OrganizationID = Guid.NewGuid();
                o3.OrganizationName = "社会发展学院";
                lsorganizations.Add(o3);

                SetGradeViewModel o4 = new SetGradeViewModel();
                o4.OrganizationID = Guid.NewGuid();
                o4.OrganizationName = "外国语学院";
                lsorganizations.Add(o4);

                SetGradeViewModel o13 = new SetGradeViewModel();
                o13.OrganizationID = Guid.NewGuid();
                o13.OrganizationName = "民族学";
                lsorganizations.Add(o13);

                SetGradeViewModel o14 = new SetGradeViewModel();
                o14.OrganizationID =Guid.NewGuid();
                o14.OrganizationName = "教育学院";
                lsorganizations.Add(o14);

            }
            else if (strProperty == "艺术体育" )
            {
                lsorganizations = new List<SetGradeViewModel>();

                SetGradeViewModel o8 = new SetGradeViewModel();
                o8.OrganizationID = Guid.NewGuid();
                o8.OrganizationName = "美术学院";
                lsorganizations.Add(o8);

                SetGradeViewModel o10 = new SetGradeViewModel();
                o10.OrganizationID =Guid.NewGuid();
                o10.OrganizationName = "体育学院";
                lsorganizations.Add(o10);

                SetGradeViewModel o12 = new SetGradeViewModel();
                o12.OrganizationID = Guid.NewGuid();
                o12.OrganizationName = "音乐学院";
                lsorganizations.Add(o12);

            }
            else if (strProperty == "自然科学" )
            {
                lsorganizations = new List<SetGradeViewModel>();
                SetGradeViewModel o9 = new SetGradeViewModel();
                o9.OrganizationID =Guid.NewGuid();
                o9.OrganizationName = "化学与材料科学学院";
                lsorganizations.Add(o9);

                SetGradeViewModel o11 = new SetGradeViewModel();
                o11.OrganizationID =Guid.NewGuid();
                o11.OrganizationName = "生命科学学院";
                lsorganizations.Add(o11);

                SetGradeViewModel o2 = new SetGradeViewModel();
                o2.OrganizationID = new Guid();
                o2.OrganizationName = "经济学院";
                lsorganizations.Add(o2);

                SetGradeViewModel o5 = new SetGradeViewModel();
                o5.OrganizationID = Guid.NewGuid();
                o5.OrganizationName = "管理学院";
                lsorganizations.Add(o5);

                SetGradeViewModel o6 = new SetGradeViewModel();
                o6.OrganizationID =Guid.NewGuid();
                o6.OrganizationName = "数学与信息科学学院";
                lsorganizations.Add(o6);

                SetGradeViewModel o7 = new SetGradeViewModel();
                o7.OrganizationID = Guid.NewGuid();
                o7.OrganizationName = "信息学院物理与电子";
                lsorganizations.Add(o7);

                SetGradeViewModel o15 = new SetGradeViewModel();
                o15.OrganizationID = Guid.NewGuid();
                o15.OrganizationName = "建筑工程学院";
                lsorganizations.Add(o15);
            } 
            else
            {
                SetGradeViewModel o16 = new SetGradeViewModel();
                o16.OrganizationID = Guid.NewGuid();
                o16.OrganizationName = "全部";
                lsorganizations.Add(o16);
            }

            return Json(lsorganizations, JsonRequestBehavior.AllowGet);
        }

    }

• 3总结

至此，我们的级联查询就介绍完了，虽然这是一个小功能，但是我觉得它很常用，我们应该重视这些常用的，设计比较好的功能，只有积累的多了，才能够发挥出强大的威力。之后，我会继续跟大家分享前端页面的开发等项目经验，请大家继续关注