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

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


这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好。这个页面主要实现的是授课,即给老师教授的课程分配学生。此页面实现功能的步骤已在页面中有所体现,这里不再赘述,此篇文章主要介绍:我是如何通过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多张张表中导入数据》!






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

9月2日消息,不造车的华为或将催生出更大的独角兽公司,随着阿维塔和赛力斯的入局,华为引望愈发显得引人瞩目。

关键字: 阿维塔 塞力斯 华为

加利福尼亚州圣克拉拉县2024年8月30日 /美通社/ -- 数字化转型技术解决方案公司Trianz今天宣布,该公司与Amazon Web Services (AWS)签订了...

关键字: AWS AN BSP 数字化

伦敦2024年8月29日 /美通社/ -- 英国汽车技术公司SODA.Auto推出其旗舰产品SODA V,这是全球首款涵盖汽车工程师从创意到认证的所有需求的工具,可用于创建软件定义汽车。 SODA V工具的开发耗时1.5...

关键字: 汽车 人工智能 智能驱动 BSP

北京2024年8月28日 /美通社/ -- 越来越多用户希望企业业务能7×24不间断运行,同时企业却面临越来越多业务中断的风险,如企业系统复杂性的增加,频繁的功能更新和发布等。如何确保业务连续性,提升韧性,成...

关键字: 亚马逊 解密 控制平面 BSP

8月30日消息,据媒体报道,腾讯和网易近期正在缩减他们对日本游戏市场的投资。

关键字: 腾讯 编码器 CPU

8月28日消息,今天上午,2024中国国际大数据产业博览会开幕式在贵阳举行,华为董事、质量流程IT总裁陶景文发表了演讲。

关键字: 华为 12nm EDA 半导体

8月28日消息,在2024中国国际大数据产业博览会上,华为常务董事、华为云CEO张平安发表演讲称,数字世界的话语权最终是由生态的繁荣决定的。

关键字: 华为 12nm 手机 卫星通信

要点: 有效应对环境变化,经营业绩稳中有升 落实提质增效举措,毛利润率延续升势 战略布局成效显著,战新业务引领增长 以科技创新为引领,提升企业核心竞争力 坚持高质量发展策略,塑强核心竞争优势...

关键字: 通信 BSP 电信运营商 数字经济

北京2024年8月27日 /美通社/ -- 8月21日,由中央广播电视总台与中国电影电视技术学会联合牵头组建的NVI技术创新联盟在BIRTV2024超高清全产业链发展研讨会上宣布正式成立。 活动现场 NVI技术创新联...

关键字: VI 传输协议 音频 BSP

北京2024年8月27日 /美通社/ -- 在8月23日举办的2024年长三角生态绿色一体化发展示范区联合招商会上,软通动力信息技术(集团)股份有限公司(以下简称"软通动力")与长三角投资(上海)有限...

关键字: BSP 信息技术
关闭
关闭