C#---ASP頁面的下拉框模糊查詢功能
阿新 • • 發佈:2019-01-11
- 基礎方法支援:
一. DataTable 轉換成 Json
換句話說如何在ASP.NET將一個DataTable序列化為 Json陣列,或者如何從一個DataTable返回一個Json字串。
使用 JavaScriptSerializer.
首先我們新增System.Web.Script.Serialization名稱空間,如下:
using System.Web.Script.Serialization;
JavaScriptSerializer這個類是由非同步通訊層內部使用來序列化和反序列化資料。如果序列化一個物件,就使用序列化方法。反序列化Json字串,使用Deserialize或DeserializeObject方法。在這裡,我們使用序列化方法得到Json格式的資料。程式碼以下:
public static class Data2Json { public static String convertJson(DataTable dt) { JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer(); javaScriptSerializer.MaxJsonLength = Int32.MaxValue; ArrayList arrayList = new ArrayList();foreach (DataRow dataRow in dt.Rows) { Dictionary<string, object> dictionary = new Dictionary<string, object>(); foreach (DataColumn dataColumn in dt.Columns) { dictionary.Add(dataColumn.ColumnName, dataRow[dataColumn.ColumnName].ToString()); } arrayList.Add(dictionary); }return javaScriptSerializer.Serialize(arrayList); } }
二. 加入一般處理程式,將上一步的Json字串寫入HTTP響應輸出流,傳到前端頁面
<%@ WebHandler Language="C#" Class="Xcode" %> using System; using System.Web; using SysManage; using System.Data; public class Xcode : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; string str = context.Request["type"]; string sql = string.Format("select * from XCode where XCODE like '{0}%'", str); Database dt = new Database(); DataTable data = dt.ExecuteSql(sql); context.Response.Write(Data2Json.convertJson(data)); } public bool IsReusable { get { return false; } } }
- 前端實現方法:
其中要使用:jquery 的 autocomplete.js ,自行搜尋引用即可
<script type="text/javascript"> function dataFind() { var fl = $("input[name='Rblflcode']:checked").val(); $.ajax({ contentType: "application/json", url: "../Xcode.ashx?type=" + fl, dataType: "json", success: function (msg) { if (msg == null) { } else if (msg != null) { jQuery(function ($) { $("#flxzTb").autocomplete(msg, { minChars: 0, autoFill: false, //是否選多個,用","分開 mustMatch: false, //是否全匹配, 如資料中沒有此資料,將無法輸入 matchContains: true, //是否全文搜尋,否則只是前面作為標準 scrollHeight: 300, scroll: true, width: $("#flxzTb").width(), multiple: false, formatItem: function (row, i, max) { //顯示格式 return "<span style='width:" + $("#flxzTb").width() + "px;float:left;font-style: normal;font-weight:normal;' >" + "[" + row.XCODE + "]---" + row.flmc + " </span>"; }, formatMatch: function (row, i, max) { //以什麼資料作為搜尋關鍵詞,可包括中文, return row.flmc; }, formatResult: function (row) { return row.flmc ; //返回結果 } }); }); } } }); } </script>
其中 ID = flxzTb 的TextBox控制元件用於查詢顯示。 url: "../Xcode.ashx?type=" + fl, 呼叫 Xcode.ashx 來處理傳入的 xcode 欄位用於資料庫篩選。
當資料庫中存有資料時,通過在TextBox框內鍵入內容會自動進行相應的內容匹配,以下拉的形式進行顯示。