考试系统——可输入并自动匹配的下拉框(三)——Html,Web控件级联

原创 2013年12月09日 12:11:47

         本篇博客主要解决JQUery Easy UI框架comboboxdropdownlist的级联传值问题。上篇博客说了easy ui的框架必须按照其自己的实现方案去实现,只要有一点和easy ui的实现框架不一样都实现不了其漂亮,为人民服务的功能。

 

问题一:如何把值从Jquery Easy UICombobox控件传给Web控件DropDownList

                

                   注意平时用的document.getElementById的传值的方式实现不了。

                 首先要解决的问题就是如何通过combobox的点击事件把值传给DropDownlist控件。

                 解决的方法是:由于Easy UI的特殊框架,用框架获取到值,通过点击Combobox把值传给一个隐藏的HtmlText控件:

Combobox控件获取值:

<input id="Course" class="easyui-combobox" data-options="valueField:'CourseID',textField:'CourseName',
				         panelWidth: 350,
				         panelHeight: 'auto',
                                        onSelect: function(rec){   
                                           //给text控件绑定值
                                                document.getElementById('courseid').value = rec.CourseID;

                                         BindExam();
                                            }
                                        "  />


<input type="hidden" id="courseid" name="courseid" />

放在text控件里面,再从隐藏控件里面获取值,这样就可以直接拿过来用了。

//获取Id值
var courseid = document.getElementById('courseid').value;


问题二:如何让DropDownList获取值,并且绑定上数据?

         

   在解决这个问题的过程中,由于为了方便想着把值直接从前台传到后台,不想用一般处理程序去实现。但是由于静态方法里面获取不到前台控件。于是又用了另外一种方案,绑定一般处理程序传值。顺着我的思路去看看吧!

 

方案一:直接把ID值传到后台的cs文件里面

 

绑定一般处理程序绑定总是出现下面的问题,找不到后台的方法。


于是用data传参的方式:

function BindExam() {
           //获取隐藏控件的ID值
               var courseid = document.getElementById('courseid').value;
            //参数
               var params = '{browersType:"' + courseid + '"}';
          //Ajax,Post方式+Data传参
               $.ajax({
                   type: "Post",
                   url: "TeaQueryTemplate.aspx/QueryExamByCourseID",
                   contentType: "application/json; charset=utf-8",

                   data: params,
                   dataType: "json",
                   success: function (strJson) {
                       //bindExam(strJson);
                   },
                   error: function (XmlHttpRequest, textStatus, errorThrown) {
                       alert(XmlHttpRequest.responseText);
                   }
               });


后台代码:

[System.Web.Services.WebMethod()]  //注意必须加上才能传过值来
        public static DataTable QueryExamByCourseID(string browersType)
        {
            DataTable dt = new DataTable();
            ComQueryByBasicSystemBLL comBLL = new ComQueryByBasicSystemBLL();
         //绑定查询结果
            dt = comBLL.GetExamByCourseID(browersType);
      //FindControl遍历寻找控件,绑定数据源
            if (dt.Rows.Count > 0)
            {
                Control frm = (HttpContext.Current.Handler as Page).FindControl("form1");
                if (frm != null)
                {
                    foreach (Control control in frm.Controls)
                    {
                        if (control is DropDownList)
                        {
                            DropDownList Exam = (DropDownList)control;
                            if (Exam.ID == "ddlExam")
                            {
                       
                                Exam.DataSource = comBLL.GetExamByCourseID(browersType);
                                Exam.DataTextField = "ExamName";
                                Exam.DataValueField = "ExamID";
                                Exam.DataBind();
                            }
                        }
                    }
                }

            }


            return dt;

        }


    即定义一个DataTable类型的QueryExamByCourseID函数,该函数必须为静态的,且被[System.Web.Services.WebMethod()]修饰。

注意事项:

1、必须加上:[System.Web.Services.WebMethod()],访问WEB服务。

2、必须是public,是Public后面才能获得值。

3、必须是static才能获取到传过来的值,但是有一个问题,由于是static,获取不到控件,

即使用FindControl也找不到控件。


这个问题没有能解决,所以换方法二了。大神有没有什么解决方案呢?


方案二:通过Ajax传值。

    通过Ajax传值也是最方便,最容易实现的一个。先看代码吧:

前台:获取值

 function BindExam() {
            //获取ID值
               var courseid = document.getElementById('courseid').value;
//Ajax ,get方式传值
               $.ajax({
                   type: "get",
                   url: "../../Linkage/BindExam.ashx?courseid=" + escape(courseid) + "&t=" + new Date().getTime(),
                   success: function (strJson) {
                      //绑定数据
                       bindCourse(strJson);

                   },
                   error: function (XmlHttpRequest, textStatus, errorThrown) {
                       alert(XmlHttpRequest.responseText);
                   }
               });

           }

           //解析json数据,绑定课程下拉列表  
           //将json数据绑定到DropDownList  
           function bindCourse(strJson) {

               var dataArray = eval(strJson);

               $("#ddlExam").empty(); //清空学期下拉框信息  
               //依次遍历传回的json每条数据  
               for (var i = 0; i < dataArray.length; i++) {
                   //传递参数 

                        $("#ddlExam").append($("<option value='" + dataArray[i].ExamID + "'>" + dataArray[i].ExamName + "</option>"));

               }


           }


一般处理程序:把DataTable转换为Json格式的传给前台,前台直接绑定。这样就实现了。

 //将datatable数据转换成Json数据
        public static string DataTableToJson(DataTable dt)
        {
            StringBuilder Json = new StringBuilder();
            Json.Append("[");
            if (dt.Rows.Count > 0)
            {
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    Json.Append("{");
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
                        Json.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":\"" + dt.Rows[i][j].ToString() + "\"");
                        if (j < dt.Columns.Count - 1)
                        {
                            Json.Append(",");
                        }
                    }
                    Json.Append("}");
                    if (i < dt.Rows.Count - 1)
                    {
                        Json.Append(",");
                    }
                }
            }
            Json.Append("]");
            return Json.ToString();

        }

实现效果

课程是用的Easy UI的框架,考试是用的DropDownList下拉框

总结

    一开始实现的时候直接在Easy UIJs代码,直接传值,导致课程也不能用了,后面通过各种测试,得出结论要通过一般处理程序Ajax传值才能实现。就这样一步步实现了这个HTml控件,Web控件级联的问题。最终实现还是很好的。


版权声明:本文为博主原创文章,未经博主允许不得转载。

Web前端开发实战1:二级下拉式菜单之CSS实现

二级下拉式菜单在各大学校网站,电商类网站,新闻类网站等大型?网站很常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的,原理和...

可输入的Web下拉列表框控件

vs2005提供的web下拉列表框 不支持输入,只能选择,我们可以继承该控件来支持输入功能,实现的原理很简单,就是增加一个textbox控件叠加在下拉列表框上,客户端通过脚本来同步这两个控件的值,先看...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

可编辑可自动匹配的联动下拉框实现

html代码 项目城市: 请选择 ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

js+html实现的考试系统

JavaScript在线考试系统
  • asdfzjs
  • asdfzjs
  • 2014年08月05日 15:30
  • 3204

JQuery——级联下拉框

最近看JQuery视频,跟着实现了几个例子,整个过程中感觉不只是学到了新知识,更重新巩固了之前学习的内容,收获着实不小,今天小编敲的级联下拉框效果的视频,很喜欢这个效果,也把学习成果记录下来。  ...

checkbox控制Input是否可以用以及下拉框的级联——easyUI

实现的功能是:1、点击“是否替换”控制input(关联工序)是否可用, 2、点击机种后点击关联工程才会查询出数据(并且是根据机种的ID),关联工序是根据关联工程! 机种——>关联工程——>关联工序...

考试系统——CS文件中不识别Web窗体控件

这一阵总是碰到这样的问题,CS文件中不识别Web窗体中的控件。以前没太在意Page指令,命名控件,这次出了问题,引起了重视。 Page指令 每个.aspx文件只能包含一条@Page指令...

可输入下拉框(html控件)

  • 2013年05月18日 12:57
  • 938B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:考试系统——可输入并自动匹配的下拉框(三)——Html,Web控件级联
举报原因:
原因补充:

(最多只允许输入30个字)