JQuery从服务器端取得数据绑定到dropdownlist（select）中

最新推荐文章于 2016-06-29 13:29:22 发布

原创最新推荐文章于 2016-06-29 13:29:22 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#服务器 #jquery #json #function #string #脚本

JQuery学习专栏收录该内容

43 篇文章

订阅专栏

本文介绍了如何在ASP.NET页面中实现WebService接口，使用JsonHandle将DataTable转换为JSON格式，并通过JavaScript进行异步请求与数据绑定。详细解释了各部分代码的功能与使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

aspx.cs页面代码：

[WebMethod] ///绑定部门 public static string GetDept() { string ReturnValue = string.Empty; string SqlGet = "select XXID,XXName from TableXX"; DataTable dt = DbHelperSQL.Query(SqlGet).Tables[0]; ReturnValue = JsonHandle.DataTable2Json(dt); return ReturnValue; }

其中jsonHandle.DataTable2Json是将DataTable转化为json对象

代码如下：

#region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string DataTable2Json(DataTable dt) { StringBuilder jsonBuilder = new StringBuilder(); jsonBuilder.Append("{/""); jsonBuilder.Append(dt.TableName.ToString()); jsonBuilder.Append("/":["); for (int i = 0; i < dt.Rows.Count; i++) { jsonBuilder.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { jsonBuilder.Append("/""); jsonBuilder.Append(dt.Columns[j].ColumnName); jsonBuilder.Append("/":/""); jsonBuilder.Append(dt.Rows[i][j].ToString()); jsonBuilder.Append("/","); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("},"); } jsonBuilder.Remove(jsonBuilder.Length - 1, 1); jsonBuilder.Append("]"); jsonBuilder.Append("}"); return jsonBuilder.ToString(); } #endregion dataTable转换成Json格式

aspx页面代码：

js脚本：

//获取相应方法的drop数据 function GetDropData(BoolAsync, ControlName,PageName, FunName, ValueName, TextName) { var GetDropData = ""; $.ajax({ type: "POST", contentType: "application/json", url: PageName+".aspx/" + FunName, data: "{}", async: BoolAsync, dataType: 'json', success: function (result) { var json = eval("(" + result.d + ")"); $.each(json.ds, function (i) { $("<option></option>").val(json.ds[i][ValueName]).html(json.ds[i][TextName]).appendTo(ControlName); }); }, error: function (result) { alert("错误！"); } }); }

解释：

BoolAsync 是否是异步（异步：true，同步：false）

ControlName 页面上select控件的ID

PageName 服务器上代码位置如：Default.aspx.cs下的方法，则填写Default

FunName 服务器上取得数据的方法名称

ValueName绑定时value的字段的名称

TextName绑定时值的字段名称

js调用方法

GetDropData(false, "#DrpShift", "PageName","GetShift", "XXID", "XXName");