日期:2014-05-16 浏览次数:20918 次
先看一下我要实现的功能界面:
这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好。这个页面主要实现的是授课,即给老师教授的课程分配学生。此页面实现功能的步骤已在页面中有所体现,这里不再赘述,此篇文章主要介绍:我是如何通过js从前台获取数据,然后通过ajax技术向后台一般处理程序传递JSON,后台又是如何获取传来的JSON,并对JSON数据转换,然后将转换后的数据写入数据库的!
介绍这些步骤实现前,先说说自己的辛酸:絮叨辛酸,是因为为了实现这个功能,我真的用了很长时间!为了让用户看着舒服点,这个页面的实现我写了700多行的JS代码和9个一般处理程序!为了避免页面刷新影响效果,又不想使用VS自带的UpdatePanel AJAX控件,感觉这个控件会带来不少后患,所以这个页面的实现我使用了大量JS代码。从后台一般处理程序向前台传递JSON,前台解析JSON并显示在界面,这样的实现网上例子很多,非常容易实现,我也写了一篇博客来记录自己的成长,见《《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中》;而从前台向后台传递JSON用法,却让我费尽周折,最终也没找到一个完整的实例,但最后将问题分成几个步骤,然后一步步解决了!
下面分享下我的经验,希望对用到此功能的战友有所帮助,当然我这样实现有什么缺陷,还希望得到高人指点!
<!--添加各项列表--> <td class="addlist"> <div class="block"> <div class="h"> <span class="icon-sprite icon-list"></span> <h3> 添加信息列表</h3> </div> <div class="tl corner"> </div> <div class="tr corner"> </div> <div class="bl corner"> </div> <div class="br corner"> </div> <div class="cnt-wp"> <div class="cnt" style="width: 450px; height: 400px; overflow: scroll;"> <table class="data-form" id="tabAddList" border="0" cellspacing="0" width="450px" align="center" cellpadding="0"> <tbody> <tr> <th scope="row"> 教师名: </th> <td> <asp:TextBox CssClass="input-normal" ID="txtAddTeacherName" runat="server" Enabled="False"></asp:TextBox> <%--隐藏控件,保存教师id--%> <asp:HiddenField ID="hidFieldSaveTeacherID" runat=&qu