当前位置:首页 > > 充电吧
[导读] 先看一下我要实现的功能界面: 这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好。这个页面主要实现的是授课,即给老师教授的课程分配学生。此页面实现功能的步骤已

先看一下我要实现的功能界面:


这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好。这个页面主要实现的是授课,即给老师教授的课程分配学生。此页面实现功能的步骤已在页面中有所体现,这里不再赘述,此篇文章主要介绍:我是如何通过js从前台获取数据,然后通过ajax技术向后台一般处理程序传递JSON,后台又是如何获取传来的JSON,并对JSON数据转换,然后将转换后的数据写入数据库的!


介绍这些步骤实现前,先说说自己的辛酸:絮叨辛酸,是因为为了实现这个功能,我真的用了很长时间!为了让用户看着舒服点,这个页面的实现我写了700多行的JS代码和9个一般处理程序!为了避免页面刷新影响效果,又不想使用VS自带的UpdatePanel AJAX控件,感觉这个控件会带来不少后患,所以这个页面的实现我使用了大量JS代码。从后台一般处理程序向前台传递JSON,前台解析JSON并显示在界面,这样的实现网上例子很多,非常容易实现,我也写了一篇博客来记录自己的成长,见《《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中》;而从前台向后台传递JSON用法,却让我费尽周折,最终也没找到一个完整的实例,但最后将问题分成几个步骤,然后一步步解决了!

下面分享下我的经验,希望对用到此功能的战友有所帮助,当然我这样实现有什么缺陷,还希望得到高人指点!


1.界面层添加信息列表部分html代码

[html]view plaincopy print?

添加信息列表

教师名: <%--隐藏控件,保存教师id--%> 课程名: <%--隐藏控件,保存课程id--%> <%--隐藏控件,保存教师、课程关系indexing--%> 选择上课班: <%----%> 已选授课人数 学生姓名列表

<%----%>


选择完学年学期、教师、课程、学生后,点击"确认添加"按钮,执行"添加授课信息"事件!


2.通过JS获取前台授课数据,并向后台一般处理程序传递

[javascript]view plaincopy print? //*******************************************授课点击事件******************************************// //添加授课信息 functionAddTeachCourse(){ //取得教师ID varstrTeacherID=$("#hidFieldSaveTeacherID").val(); //alert("教师ID="+txtTeacherID); //取得课程ID varstrCourseID=$("#hidFieldSaveCourseID").val(); //alert("课程ID="+txtCourseID); //取得上课班ID varstrTeachClassID=document.getElementById("ddlTeachClass"); varTeachClassID=strTeachClassID.options[strTeachClassID.selectedIndex].value;//得到ID //取得课程分配的ID(Indexing) varIndexing=$("#hidFieldSaveIndexing").val(); //取得学生数量 varstuNum=$("#txtStuNum").val(); //取得listbox框ID varlistStudent=document.getElementById("lsboxStudent"); //取得listbox框中元素长度 varlstStuLength=listStudent.options.length; //varobjJsons=""; //varStuArrayObj=newArray();//创建一个数组,存储学生ID //StuArrayObj[i]=StudentID;//向数组中添加学生ID //*******************以下是:转换json对象的过程*************************// varStuArrayObjs=[];//定义一个空串 for(vari=0;i 以上有几个需要注意的地方:

2.1.转换JSON串使用

[javascript]view plaincopy print? JSON.stringify()

2.2.JS向一般处理程序传递JSON使用

[javascript]view plaincopy print? //与AJAX交互,向一般处理程序传递json字符串数组,并返回结果 $.post("要使用的一般处理程序路径",{TeachCourseJson:TeachCourseJsonString},function(data){ alert(data); });

3.一般处理程序解析JS传递过来的Json数据,并进行解析,写入DataTable中,然后写入数据库

[csharp]view plaincopy print? <%@WebHandlerLanguage="C#"Class="AddTeachCourse"%> /******************************************************************************* *文件:AddTeachCourse.ashx *作者:mzj *所属小组:评教小组 *文件说明:添加授课信息 *创建日期:2013年2月6日17:57:01 *修改作者: *修改日期: *修改描述: *版本号:V1.0 *版本号变更记录: ********************************************************************************/ usingSystem; usingSystem.Web; usingSystem.Collections.Generic; usingSystem.Linq; usingSystem.Data; //json使用命名空间 usingNewtonsoft.Json; usingNewtonsoft.Json.Linq; usingNewtonsoft.Json.Converters; usingSystem.IO; usingSystem.Text; usingTeachSystem.BLL.TeachingBLL; usingTeachSystem.Entity.TeachingEntity; publicclassAddTeachCourse:IHttpHandler { publicvoidProcessRequest(HttpContextcontext) { context.Response.ContentType="text/plain"; //创建一个名为ds_StuTeacherCourse的DataSet //(用于存放表:学生、教师、课程关系表,学生、上课班关系表,课程分配上课班关系表) DataSetdsStuTeacherCourse=newDataSet("ds_StuTeacherCourse"); //手动创建的新数据表-学生、教师、课程关系数据表 DataTabledtAddStudentTeaherCourse=newDataTable("dt_AddStudentTeaherCourse");//创建一个名为dt_AddStudentTeaherCourse的DataTalbe //为dt_AddStudentTeaherCourse表内建立Column(表头),添加数据列:StudentID,Indexing,IsAvailable dtAddStudentTeaherCourse.Columns.Add(newDataColumn("StudentID",typeof(string))); dtAddStudentTeaherCourse.Columns.Add(newDataColumn("Indexing",typeof(int))); dtAddStudentTeaherCourse.Columns.Add(newDataColumn("IsAvailable",typeof(string))); //手动创建的新数据表-学生、上课班关系数据表 DataTabledtAddStudentTeachClass=newDataTable("dt_AddStudentTeachClass");//创建一个名为dt_AddStudentTeachClass的DataTalbe //为dt_AddStudentTeachClass表内建立Column(表头),添加数据列:StudentID,TeachClassID,IsAvailable dtAddStudentTeachClass.Columns.Add(newDataColumn("StudentID",typeof(string))); dtAddStudentTeachClass.Columns.Add(newDataColumn("TeachClassID",typeof(string))); dtAddStudentTeachClass.Columns.Add(newDataColumn("IsAvailable",typeof(string))); //手动创建的新数据表-课程分配、上课班关系数据表 DataTabledtAddCourseTeachClass=newDataTable("dt_AddCourseTeachClass");//创建一个名为dt_AddStudentTeachClass的DataTalbe //为dt_AddCourseTeachClass表内建立Column(表头),添加数据列:TeachClassID,Indexing,IsAvailable dtAddCourseTeachClass.Columns.Add(newDataColumn("TeachClassID",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("Indexing",typeof(int))); dtAddCourseTeachClass.Columns.Add(newDataColumn("IsAvailable",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("OddEven",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("StuNum",typeof(int))); //获取前台传递过来的授课JSON字符串数组 stringss=context.Request.Form["TeachCourseJson"]; //反序列化获取的JSON字符串数组 JArrayjavascript=(JArray)JsonConvert.DeserializeObject(ss); //依次遍历反序列化的json字符串数组 for(inti=0;i

3.1 获取前台传递过来的JSON字符串数组

[csharp]view plaincopy print? //获取前台传递过来的授课JSON字符串数组 stringss=context.Request.Form["TeachCourseJson"];

3.2 反序列化前台传来的JSON字符才能换数组

[csharp]view plaincopy print? //反序列化获取的JSON字符串数组 JArrayjavascript=(JArray)JsonConvert.DeserializeObject(ss);

3.3自定义Dataset,并建立各数据表,将前台传来的数据写入DataTable表

创建Dataset及数据表

[csharp]view plaincopy print? //创建一个名为ds_StuTeacherCourse的DataSet //(用于存放表:学生、教师、课程关系表,学生、上课班关系表,课程分配上课班关系表) DataSetdsStuTeacherCourse=newDataSet("ds_StuTeacherCourse"); //手动创建的新数据表-学生、教师、课程关系数据表 DataTabledtAddStudentTeaherCourse=newDataTable("dt_AddStudentTeaherCourse");//创建一个名为dt_AddStudentTeaherCourse的DataTalbe //为dt_AddStudentTeaherCourse表内建立Column(表头),添加数据列:StudentID,Indexing,IsAvailable dtAddStudentTeaherCourse.Columns.Add(newDataColumn("StudentID",typeof(string))); dtAddStudentTeaherCourse.Columns.Add(newDataColumn("Indexing",typeof(int))); dtAddStudentTeaherCourse.Columns.Add(newDataColumn("IsAvailable",typeof(string))); //手动创建的新数据表-学生、上课班关系数据表 DataTabledtAddStudentTeachClass=newDataTable("dt_AddStudentTeachClass");//创建一个名为dt_AddStudentTeachClass的DataTalbe //为dt_AddStudentTeachClass表内建立Column(表头),添加数据列:StudentID,TeachClassID,IsAvailable dtAddStudentTeachClass.Columns.Add(newDataColumn("StudentID",typeof(string))); dtAddStudentTeachClass.Columns.Add(newDataColumn("TeachClassID",typeof(string))); dtAddStudentTeachClass.Columns.Add(newDataColumn("IsAvailable",typeof(string))); //手动创建的新数据表-课程分配、上课班关系数据表 DataTabledtAddCourseTeachClass=newDataTable("dt_AddCourseTeachClass");//创建一个名为dt_AddStudentTeachClass的DataTalbe //为dt_AddCourseTeachClass表内建立Column(表头),添加数据列:TeachClassID,Indexing,IsAvailable dtAddCourseTeachClass.Columns.Add(newDataColumn("TeachClassID",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("Indexing",typeof(int))); dtAddCourseTeachClass.Columns.Add(newDataColumn("IsAvailable",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("OddEven",typeof(string))); dtAddCourseTeachClass.Columns.Add(newDataColumn("StuNum",typeof(int))); 向数据表填充数据,例如

[csharp]view plaincopy print? //添加课程分配、上课班关系信息表的新行 DataRowdrAddCourseTeachClass=dtAddCourseTeachClass.NewRow();//注意这边创建dt的新行的方法。指定类型是DataRow而不是TableRow,然后不用new直接的用创建的DataTable下面的NewRow方法。 //课程分配、上课班关系信息表对应的各列值 drAddCourseTeachClass["TeachClassID"]=strTeachClassIDs; drAddCourseTeachClass["Indexing"]=intIndexings; drAddCourseTeachClass["IsAvailable"]="是"; drAddCourseTeachClass["OddEven"]=null; drAddCourseTeachClass["StuNum"]=intStuNums; dtAddCourseTeachClass.Rows.Add(drAddCourseTeachClass);//将一整条数据写入表中 将各数据表存入DataSet

[csharp]view plaincopy print? //将各表加入DataSet中: dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse); dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass); dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);

3.4将DataSet中各数据表写入数据库

[csharp]view plaincopy print? //将DataSet中数据表导入数据库 BooleanflagImportStuTeacherCourse=newTeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);

这篇文章仅仅介绍了添加授课功能的实现,所需要的JS文件及一般处理程序文件,导入数据库用到的BLL层类方法等没有介绍,批量导入数据功能的实现见博客《《项目经验》--简单三层使用DataTable向数据库表批量导入数据---向SqlServer一张表中导入数据》《《项目经验》--简单三层使用DataTable向数据库表批量导入数据---向SqlServer多张张表中导入数据》!






本站声明: 本文章由作者或相关机构授权发布,目的在于传递更多信息,并不代表本站赞同其观点,本站亦不保证或承诺内容真实性等。需要转载请联系该专栏作者,如若文章内容侵犯您的权益,请及时联系本站删除。
换一批
延伸阅读

LED驱动电源的输入包括高压工频交流(即市电)、低压直流、高压直流、低压高频交流(如电子变压器的输出)等。

关键字: 驱动电源

在工业自动化蓬勃发展的当下,工业电机作为核心动力设备,其驱动电源的性能直接关系到整个系统的稳定性和可靠性。其中,反电动势抑制与过流保护是驱动电源设计中至关重要的两个环节,集成化方案的设计成为提升电机驱动性能的关键。

关键字: 工业电机 驱动电源

LED 驱动电源作为 LED 照明系统的 “心脏”,其稳定性直接决定了整个照明设备的使用寿命。然而,在实际应用中,LED 驱动电源易损坏的问题却十分常见,不仅增加了维护成本,还影响了用户体验。要解决这一问题,需从设计、生...

关键字: 驱动电源 照明系统 散热

根据LED驱动电源的公式,电感内电流波动大小和电感值成反比,输出纹波和输出电容值成反比。所以加大电感值和输出电容值可以减小纹波。

关键字: LED 设计 驱动电源

电动汽车(EV)作为新能源汽车的重要代表,正逐渐成为全球汽车产业的重要发展方向。电动汽车的核心技术之一是电机驱动控制系统,而绝缘栅双极型晶体管(IGBT)作为电机驱动系统中的关键元件,其性能直接影响到电动汽车的动力性能和...

关键字: 电动汽车 新能源 驱动电源

在现代城市建设中,街道及停车场照明作为基础设施的重要组成部分,其质量和效率直接关系到城市的公共安全、居民生活质量和能源利用效率。随着科技的进步,高亮度白光发光二极管(LED)因其独特的优势逐渐取代传统光源,成为大功率区域...

关键字: 发光二极管 驱动电源 LED

LED通用照明设计工程师会遇到许多挑战,如功率密度、功率因数校正(PFC)、空间受限和可靠性等。

关键字: LED 驱动电源 功率因数校正

在LED照明技术日益普及的今天,LED驱动电源的电磁干扰(EMI)问题成为了一个不可忽视的挑战。电磁干扰不仅会影响LED灯具的正常工作,还可能对周围电子设备造成不利影响,甚至引发系统故障。因此,采取有效的硬件措施来解决L...

关键字: LED照明技术 电磁干扰 驱动电源

开关电源具有效率高的特性,而且开关电源的变压器体积比串联稳压型电源的要小得多,电源电路比较整洁,整机重量也有所下降,所以,现在的LED驱动电源

关键字: LED 驱动电源 开关电源

LED驱动电源是把电源供应转换为特定的电压电流以驱动LED发光的电压转换器,通常情况下:LED驱动电源的输入包括高压工频交流(即市电)、低压直流、高压直流、低压高频交流(如电子变压器的输出)等。

关键字: LED 隧道灯 驱动电源
关闭