摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015
通過js獲取前台數據向一般處理程序傳遞Json數據,並解析Json數據,將前台傳來的Json數據寫入數據庫表中
先看一下我要實現的功能界面:
這個界面的功能在圖中已有展現,課程分配(教師教授哪門課程)在之前的頁面中已做好。這個頁面主要實現的是授課,即給老師教授的課程分配學生。此頁面實現功能的步驟已在頁面中有所體現,這里不再贅述,此篇文章主要介紹:我是如何通過js從前台獲取數據,然后通過ajax技術向后台一般處理程序傳遞JSON,后台又是如何獲取傳來的JSON,並對JSON數據轉換,然后將轉換后的數據寫入數據庫的!
介紹這些步驟實現前,先說說自己的辛酸:絮叨辛酸,是因為為了實現這個功能,我真的用了很長時間!為了讓用戶看着舒服點,這個頁面的實現我寫了700多行 的JS代碼和9個一般處理程序!為了避免頁面刷新影響效果,又不想使用VS自帶的UpdatePanel AJAX控件,感覺這個控件會帶來不少后患,所以這個頁面的實現我使用了大量JS代碼。從后台一般處理程序向前台傳遞JSON,前台解析JSON並顯示在 界面,這樣的實現網上例子很多,非常容易實現,我也寫了一篇博客來記錄自己的成長,見《《項目經驗》--后台一般處理程序向前台JS文件傳遞JSON,JS解析JSON,將數據顯示在界面--顯示在DropDownList 或 顯示在動態創建的table中》;而從前台向后台傳遞JSON用法,卻讓我費盡周折,最終也沒找到一個完整的實例,但最后將問題分成幾個步驟,然后一步步解決了!
下面分享下我的經驗,希望對用到此功能的戰友有所幫助,當然我這樣實現有什么缺陷,還希望得到高人指點!
1.界面層添加信息列表部分html代碼
- <!--添加各項列表-->
- <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="server" />
- </td>
- </tr>
- <tr>
- <th scope="row">
- 課程名:
- </th>
- <td>
- <asp:TextBox CssClass="input-normal" ID="txtAddCourseName" runat="server"
- Enabled="False"></asp:TextBox>
- <%--隱藏控件,保存課程id--%>
- <asp:HiddenField ID="hidFieldSaveCourseID" runat="server" />
- <%--隱藏控件,保存教師、課程關系indexing--%>
- <asp:HiddenField ID="hidFieldSaveIndexing" runat="server" />
- </td>
- </tr>
- <tr>
- <th scope="row">
- 選擇上課班:
- </th>
- <td>
- <asp:DropDownList ID="ddlTeachClass" CssClass="input-normal" runat="server">
- </asp:DropDownList>
- </td>
- <td>
- <%-- <asp:Button ID="btnAddTeachClass" runat="server" Text="添加一個上課班" OnClick="btnAddTeachClass_Click" />--%>
- <input id="btnAddTeachClass" type="button" class="btn-lit" value="確認添加" onclick="AddTeachClass()" />
- </td>
- </tr>
- <tr>
- <th scope="row">
- 已選授課人數
- </th>
- <td>
- <asp:TextBox CssClass="input-normal" ID="txtStuNum" runat="server"
- Enabled="False"></asp:TextBox>
- </td>
- </tr>
- <tr>
- <th scope="row">
- 學生姓名列表
- </th>
- <td>
- <asp:ListBox ID="lsboxStudent" runat="server" Height="150px" Width="250px"></asp:ListBox>
- </td>
- </tr>
- <tr>
- <th scope="row">
- <br />
- </th>
- <td>
- <br />
- <%--<asp:Button ID="btnAddTeachCourse" class="btn-lit" runat="server" Text="確認添加"
- onclick="btnAddTeachCourse_Click" />--%>
- <input id="btnAddTeachCourse" type="button" class="btn-lit" value="確認添加" onclick="AddTeachCourse()" />
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </td>
選擇完學年學期、教師、課程、學生后,點擊"確認添加"按鈕,執行"添加授課信息"事件!
2.通過JS獲取前台授課數據,並向后台一般處理程序傳遞
- //*******************************************授課點擊事件******************************************//
- //添加授課信息
- function AddTeachCourse() {
- //取得教師ID
- var strTeacherID = $("#hidFieldSaveTeacherID").val();
- //alert("教師ID="+txtTeacherID);
- //取得課程ID
- var strCourseID = $("#hidFieldSaveCourseID").val();
- //alert("課程ID="+txtCourseID);
- //取得上課班ID
- var strTeachClassID = document.getElementById("ddlTeachClass");
- var TeachClassID = strTeachClassID.options[strTeachClassID.selectedIndex].value; //得到ID
- //取得課程分配的ID(Indexing)
- var Indexing = $("#hidFieldSaveIndexing").val();
- //取得學生數量
- var stuNum = $("#txtStuNum").val();
- //取得listbox框ID
- var listStudent = document.getElementById("lsboxStudent");
- //取得listbox框中元素長度
- var lstStuLength = listStudent.options.length;
- // var objJsons="";
- // var StuArrayObj = new Array(); //創建一個數組,存儲學生ID
- // StuArrayObj[i] = StudentID; //向數組中添加學生ID
- //*******************以下是:轉換json對象的過程*************************//
- var StuArrayObjs = []; //定義一個空串
- for (var i = 0; i < lstStuLength; i++) {
- var StudentID = listStudent.options[i].value; //取得學生ID
- var StuArrayObj = {}; //定義一個空對象,存入數據依次寫入空串
- StuArrayObj["TeacherID"] = strTeacherID; //教師ID
- StuArrayObj["CourseID"] = strCourseID; //課程ID
- StuArrayObj["TeachClassID"] = TeachClassID; //上課班ID
- StuArrayObj["Indexing"] = Indexing; //課程分配ID
- StuArrayObj["StuNum"] = stuNum; //學生數量
- StuArrayObj["StudentID"] = StudentID; //學生ID
- StuArrayObjs.push(StuArrayObj);
- }
- var TeachCourseJsonString = JSON.stringify(StuArrayObjs); // JSON.stringify() 轉換為json串
- // var TeachCourseJson = eval("(" + TeachCourseJsonString + ")"); //轉換為json對象
- // alert(TeachCourseJson[1].TeacherID);
- //下面$.getJSON 可以傳遞成功,只是這樣傳遞不能傳遞過長字符串
- //// $.getJSON("../handler/AddTeachCourse.ashx", { TeachCourseJson: TeachCourseJsonString }, function (data) {
- //// alert(data);
- //// });
- //與AJAX交互,向一般處理程序傳遞json字符串數組,並返回結果
- $.post("../handler/AddTeachCourse.ashx", { TeachCourseJson: TeachCourseJsonString }, function (data) {
- alert(data);
- });
- }
以上有幾個需要注意的地方:
2.1.轉換JSON串使用
- JSON.stringify()
2.2.JS向一般處理程序傳遞JSON使用
- //與AJAX交互,向一般處理程序傳遞json字符串數組,並返回結果
- $.post("要使用的一般處理程序路徑", { TeachCourseJson: TeachCourseJsonString }, function (data) {
- alert(data);
- });
3.一般處理程序解析JS傳遞過來的Json數據,並進行解析,寫入DataTable中,然后寫入數據庫
- <%@ WebHandler Language="C#" Class="AddTeachCourse" %>
- /*******************************************************************************
- *文 件:AddTeachCourse.ashx
- *作 者:mzj
- *所屬小組:評教小組
- *文件說明:添加授課信息
- *創建日期:2013年2月6日17:57:01
- *修改作者:
- *修改日期:
- *修改描述:
- *版 本 號:V1.0
- *版本號變更記錄:
- ********************************************************************************/
- using System;
- using System.Web;
- using System.Collections.Generic;
- using System.Linq;
- using System.Data;
- //json使用命名空間
- using Newtonsoft.Json;
- using Newtonsoft.Json.Linq;
- using Newtonsoft.Json.Converters;
- using System.IO;
- using System.Text;
- using TeachSystem.BLL.TeachingBLL;
- using TeachSystem.Entity.TeachingEntity;
- public class AddTeachCourse : IHttpHandler
- {
- public void ProcessRequest(HttpContext context)
- {
- context.Response.ContentType = "text/plain";
- //創建一個名為ds_StuTeacherCourse的DataSet
- //(用於存放表:學生、教師、課程關系表,學生、上課班關系表,課程分配上課班關系表)
- DataSet dsStuTeacherCourse = new DataSet("ds_StuTeacherCourse");
- //手動創建的新數據表-學生、教師、課程關系數據表
- DataTable dtAddStudentTeaherCourse = new DataTable("dt_AddStudentTeaherCourse"); //創建一個名為dt_AddStudentTeaherCourse的DataTalbe
- //為dt_AddStudentTeaherCourse表內建立Column(表頭),添加數據列:StudentID,Indexing,IsAvailable
- dtAddStudentTeaherCourse.Columns.Add(new DataColumn("StudentID", typeof(string)));
- dtAddStudentTeaherCourse.Columns.Add(new DataColumn("Indexing", typeof(int)));
- dtAddStudentTeaherCourse.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
- //手動創建的新數據表-學生、上課班關系數據表
- DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //創建一個名為dt_AddStudentTeachClass的DataTalbe
- //為dt_AddStudentTeachClass表內建立Column(表頭),添加數據列:StudentID,TeachClassID,IsAvailable
- dtAddStudentTeachClass.Columns.Add(new DataColumn("StudentID", typeof(string)));
- dtAddStudentTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
- dtAddStudentTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
- //手動創建的新數據表-課程分配、上課班關系數據表
- DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //創建一個名為dt_AddStudentTeachClass的DataTalbe
- //為dt_AddCourseTeachClass表內建立Column(表頭),添加數據列:TeachClassID,Indexing,IsAvailable
- dtAddCourseTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
- dtAddCourseTeachClass.Columns.Add(new DataColumn("Indexing", typeof(int)));
- dtAddCourseTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
- dtAddCourseTeachClass.Columns.Add(new DataColumn("OddEven", typeof(string)));
- dtAddCourseTeachClass.Columns.Add(new DataColumn("StuNum",typeof(int)));
- //獲取前台傳遞過來的授課JSON字符串數組
- string ss = context.Request.Form["TeachCourseJson"];
- //反序列化獲取的JSON字符串數組
- JArray javascript = (JArray)JsonConvert.DeserializeObject(ss);
- //依次遍歷反序列化的json字符串數組
- for (int i = 0; i < javascript.Count; i++)
- {
- //將一個個反序列化的JSON字符串數組轉換成對象,並將轉換后的對象的值依次賦給各變量
- JObject obj = (JObject)javascript[i];
- string strTeacherID = obj["TeacherID"].ToString(); //教師ID
- string strCourseID = obj["CourseID"].ToString(); //課程ID
- string strTeachClassID = obj["TeachClassID"].ToString(); //上課班ID
- int intIndexing = Convert.ToInt32(obj["Indexing"].ToString()); //課程分配ID
- int intStuNum = Convert.ToInt32(obj["StuNum"].ToString()); //授課學生人數
- string strStudentID = obj["StudentID"].ToString(); //學生ID
- //添加學生、教師、課程關系信息表的新行
- DataRow drAddStudentTeaherCourse = dtAddStudentTeaherCourse.NewRow();//注意這邊創建dt的新行的方法。指定類型是DataRow而不是TableRow,然后不用new直接的用創建的DataTable下面的NewRow方法。
- //學生、教師、課程關系信息表對應的各列值
- drAddStudentTeaherCourse["StudentID"] = strStudentID; //學生ID
- drAddStudentTeaherCourse["Indexing"] = intIndexing; //課程分配ID
- drAddStudentTeaherCourse["IsAvailable"] = "是";
- dtAddStudentTeaherCourse.Rows.Add(drAddStudentTeaherCourse); //將一整條數據寫入表中
- //添加學生、上課班關系信息表的新行
- DataRow drAddStudentTeachClass = dtAddStudentTeachClass.NewRow();//注意這邊創建dt的新行的方法。指定類型是DataRow而不是TableRow,然后不用new直接的用創建的DataTable下面的NewRow方法。
- //學生、上課班關系信息表對應的各列值
- drAddStudentTeachClass["StudentID"] = strStudentID; //學生ID
- drAddStudentTeachClass["TeachClassID"] = strTeachClassID; //上課班ID
- drAddStudentTeachClass["IsAvailable"] = "是";
- dtAddStudentTeachClass.Rows.Add(drAddStudentTeachClass); //將一整條數據寫入表中
- }
- JObject objs = (JObject)javascript[0];
- string strTeachClassIDs = objs["TeachClassID"].ToString();
- int intIndexings = Convert.ToInt32(objs["Indexing"].ToString());
- int intStuNums = Convert.ToInt32(objs["StuNum"].ToString());
- //添加課程分配、上課班關系信息表的新行
- DataRow drAddCourseTeachClass = 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中:
- dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse);
- dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass);
- dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);
- //將DataSet中數據表導入數據庫
- Boolean flagImportStuTeacherCourse = new TeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);
- //JsonReader reader = new JsonReader(new StringReader(jsonText))
- //string s = context.Request.Form["TeachCourseJson"];
- context.Response.Write(flagImportStuTeacherCourse);
- context.Response.End();
- }
- public bool IsReusable
- {
- get
- {
- return false;
- }
- }
- }
一般處理程序代碼,需要注意幾點:
3.1 獲取前台傳遞過來的JSON字符串數組
- //獲取前台傳遞過來的授課JSON字符串數組
- string ss = context.Request.Form["TeachCourseJson"];
3.2 反序列化前台傳來的JSON字符才能換數組
- //反序列化獲取的JSON字符串數組
- JArray javascript = (JArray)JsonConvert.DeserializeObject(ss);
3.3自定義Dataset,並建立各數據表,將前台傳來的數據寫入DataTable表
創建Dataset及數據表
- //創建一個名為ds_StuTeacherCourse的DataSet
- //(用於存放表:學生、教師、課程關系表,學生、上課班關系表,課程分配上課班關系表)
- DataSet dsStuTeacherCourse = new DataSet("ds_StuTeacherCourse");
- //手動創建的新數據表-學生、教師、課程關系數據表
- DataTable dtAddStudentTeaherCourse = new DataTable("dt_AddStudentTeaherCourse"); //創建一個名為dt_AddStudentTeaherCourse的DataTalbe
- //為dt_AddStudentTeaherCourse表內建立Column(表頭),添加數據列:StudentID,Indexing,IsAvailable
- dtAddStudentTeaherCourse.Columns.Add(new DataColumn("StudentID", typeof(string)));
- dtAddStudentTeaherCourse.Columns.Add(new DataColumn("Indexing", typeof(int)));
- dtAddStudentTeaherCourse.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
- //手動創建的新數據表-學生、上課班關系數據表
- DataTable dtAddStudentTeachClass = new DataTable("dt_AddStudentTeachClass"); //創建一個名為dt_AddStudentTeachClass的DataTalbe
- //為dt_AddStudentTeachClass表內建立Column(表頭),添加數據列:StudentID,TeachClassID,IsAvailable
- dtAddStudentTeachClass.Columns.Add(new DataColumn("StudentID", typeof(string)));
- dtAddStudentTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
- dtAddStudentTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
- //手動創建的新數據表-課程分配、上課班關系數據表
- DataTable dtAddCourseTeachClass = new DataTable("dt_AddCourseTeachClass"); //創建一個名為dt_AddStudentTeachClass的DataTalbe
- //為dt_AddCourseTeachClass表內建立Column(表頭),添加數據列:TeachClassID,Indexing,IsAvailable
- dtAddCourseTeachClass.Columns.Add(new DataColumn("TeachClassID", typeof(string)));
- dtAddCourseTeachClass.Columns.Add(new DataColumn("Indexing", typeof(int)));
- dtAddCourseTeachClass.Columns.Add(new DataColumn("IsAvailable", typeof(string)));
- dtAddCourseTeachClass.Columns.Add(new DataColumn("OddEven", typeof(string)));
- dtAddCourseTeachClass.Columns.Add(new DataColumn("StuNum",typeof(int)));
向數據表填充數據,例如
- //添加課程分配、上課班關系信息表的新行
- DataRow drAddCourseTeachClass = 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
- //將各表加入DataSet中:
- dsStuTeacherCourse.Tables.Add(dtAddStudentTeaherCourse);
- dsStuTeacherCourse.Tables.Add(dtAddStudentTeachClass);
- dsStuTeacherCourse.Tables.Add(dtAddCourseTeachClass);
3.4將DataSet中各數據表寫入數據庫
- //將DataSet中數據表導入數據庫
- Boolean flagImportStuTeacherCourse = new TeachCourseBLL().ImportStudentTeacherCourse(dsStuTeacherCourse);