ASP.NET中使用JSON方便實現前台與背景資料交換

ASP.NET中使用JSON方便實現前台與背景資料交換

一、前台向後台請求資料

在頁面載入時，有時需要對一些表單進行初始化，此時可以利用JQuery的 get 函數向後台發起非同步請求：

//初始化函數function initSettings() {        $.get("?Action=init", function (data) {            if (data == "NO") {                alert("初始化失敗！");            }            else if (data != null && data != undefined) {                var json = JSON.parse(data);                setFieldsData(json);            }        });    }    //填充表單資料    function setFieldsData(json) {        $("#userSettings input:text").each(function () {            $(this).val(json[$(this).attr("name")]);        });    }

其中，各表單中含有一個name屬性，其值為資料庫對應的欄位名。 背景響應如下：

if (Action == "init")            {                string json = "{";                DataSet ds = new DataSet(); // 此處以載入使用者資訊為例                ds = DataOperation.DB.Select("select * from USER_USER where USER_ID=" + USER_ID, DataOperation.DB.GetConnType());                ds.Dispose();                if (ds.Tables[0].Rows.Count > 0)                {                    for (int i = 0; i < ds.Tables[0].Columns.Count; i++)                    {                        json +="\"" + ds.Tables[0].Columns[i].ColumnName+"\":\""+ds.Tables[0].Rows[0][i]+"\",";                    }                    json = json.Substring(0, json.Length - 1);                    json += "}";                    try                    {                           Response.Write(json);                        Response.End();                    }                    catch (Exception)                    {                    }                }                else                {                    Response.Write("NO");                    Response.End();                }            }

二、前台向後台提交資料

在表單填好後，儲存時需要向後台提交資料，利用JSON 可以很方便的擷取各表單資料提交並寫入到資料庫。前台JS 代碼如下：

$("#saveSettings").click(function () {            var json = "{";            $("#userSettings input:text").each(function () {                json +="\""+$(this).attr("name")+"\":\""+$(this).val()+"\",";  // 擷取表單值產生 JSON 格式資料            });            json = json.substring(0, json.length - 1);            json += "}";            $.post("?Action=save&json=" + json, function (data) {                if (data == "NO") {                     alert("儲存失敗！");                            }                if (data == "OK") {                    alert("儲存成功！");                }            });        }); 


   後台響應代碼如下：
if (Action=="save")            {                string sqlstr ="update USER_USER set ";                 string json =Request["json"];                JavaScriptSerializer serializer = new JavaScriptSerializer();                Dictionary data = (Dictionary)serializer.DeserializeObject(json);                foreach (var item in data)                {                    sqlstr += item.Key + " = '" + item.Value + "',";                }                sqlstr = sqlstr.Substring(0, sqlstr.Length - 1);                sqlstr += "where USER_ID=" + USER_ID;                               DataSet ds = new DataSet();                ds = DataOperation.DB.Select("select USER_ID from USER_USER where USER_ID=" + USER_ID , DataOperation.DB.GetConnType());                ds.Dispose();                if (ds.Tables[0].Rows.Count>0)                {                    try                    {                        DataOperation.DB.Execnonsql(sqlstr, DataOperation.DB.GetConnType());                        Response.Write("OK");                        Response.End();                    }                    catch (Exception)                    {                     }                }                else                {                    Response.Write("NO");                    Response.End();                }            }

上面的代碼中，使用了 JavaScriptSerializer 類和 Dictionary 類來解析 JSON 資料，將 JSON 資料解析成字典，方便SQL語句的產生。