2017年5月26日 星期五

Bootstrap ASP.NET TextBox使用jquery.bootcomplete.js達到自動完成功能

參考資料:bootcomplete.js
參考資料:Demo jquery.bootcomplete.js

說說這個禮拜作了什麼...最近在使用ASP.NET WebForm加上Bootstrap達到響應式,因要讓使用者在TextBox上輸入關鍵字時,可以搜尋出相關的資料,就像是Google在搜尋資料的時候也會跑出關鍵字,這就叫作自動完成功能,先前自己也有紀錄過一篇jquery autocomplete自動完成,但這次因為有加上Bootstrap,想說應該介面上有什麼不一樣的地方,所以就上Google key入了bootstrap autocomplete關鍵字,就找到了jquery.bootcomplete.js別人寫好的jquery套件(別人寫好的我都稱它為套件)。
好...發這篇主要是紀錄過程,將來如果有同樣的需求,可以趕快的恢復遺忘的記憶....

Step 1.先介紹待會會用到的資料表,就一個資料表,稱它為會員(test_member)資料表







Step 2.首先先作好使用者介面,此網頁為test_bootcomplete.aspx
 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test_bootcomplete.aspx.vb" Inherits="test_bootcomplete" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>test bootcomplete</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.bootcomplete.js"></script>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <form id="form1" runat="server">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <asp:Label ID="L_cname" runat="server" Text="請輸入要查詢的姓名" Font-Size="X-Large" AssociatedControlID="TB_cname"></asp:Label>
                <asp:TextBox ID="TB_cname" runat="server" CssClass="form-control"></asp:TextBox>
                <script type="text/javascript">
                    $('#<%=TB_cname.ClientID%>').bootcomplete({
                        url: 'getData.aspx',
                        minLength: 2,
                        method: 'post',
                        dataParams: {
                            'k': '1'
                        }
                    });
                </script>
            </div>
        </div>
    </div>
    </form>
  </body>
</html>
說明紅色的部分:
url 希望傳到哪一個網頁幫我們作查詢。
minLength 最少輸入幾個字,才幫我們作查詢。
method 使用什麼方式傳給另外一個網頁,就像form的get、post。
dataParams 我們可以額外帶參數給另外一個網頁,此參數為k,k的資料為1。
如果有使用過jquery ajax應該就會知道怎麼使用。
畫面結果:











Step 3.製作getData.aspx網頁
getData.aspx前端的網頁只留一行
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="getData.aspx.vb" Inherits="getData" %>

getData.aspx.vb後置程式碼
Imports System.Data
Imports System.Data.SqlClient
Imports Newtonsoft.Json

Partial Class getData
Inherits System.Web.UI.Page

Dim str_sql As String = String.Empty

Private Sub getData_Load(sender As Object, e As EventArgs) Handles Me.Load
'進到getData.aspx最好作個身分驗證,免得重要資訊外流
If Not Page.IsPostBack Then
'第一次進入
Dim str_rdata As StringBuilder = Nothing
If (Not Request("k") Is Nothing) Then
If Request("k").ToString = "1" Then
Dim str_query As String = String.Empty
If (Not Request("query") Is Nothing) Then
str_query = Request("query").ToString
End If

str_rdata = New StringBuilder()
Dim def_ds As New DataSet()
str_sql = "select id_no as id,cname as label from test_member where cname like @cname+'%'"
Using conn As New SqlConnection("Server=127.0.0.1;uid=test;pwd=test;Database=test1")
Using command As SqlCommand = New SqlCommand(str_sql, conn)
'避免 SQL Injection(資料隱碼)攻擊
If command.Parameters.Contains("@cname") Then
command.Parameters("@cname").Value = str_query
Else
command.Parameters.AddWithValue("@cname", str_query) '讓ADO.NET自行判斷型別轉換
End If

Using da As New SqlDataAdapter()
da.SelectCommand = command
da.Fill(def_ds)
End Using
End Using
End Using
str_rdata.Append(JsonConvert.SerializeObject(def_ds.Tables(0), Formatting.Indented))
Response.Write(str_rdata.ToString)
def_ds.Clear() : def_ds.Dispose()
Else
Response.Write("[]")
End If
Else
Response.Write("[]")
End If
End If
End Sub
End Class
注意:程式碼中有使用到Newtonsoft.Json套件
說明紅色的部分:
Request("k") 是剛才在test_bootcomplete.aspx,所帶入的k參數。
Request("query") query是什麼呢?  這個是 jquery.bootcomplete.js它使用的參數,也就是當使用者在TextBox輸入關鍵字帶給getData.aspx的參數值,它已經預設好名稱叫query,所以在js檔中可以找到query這個參數,請各位去開啟 jquery.bootcomplete.js檔案,圖解如下。











SQL指令中的id_no as id,cname as label,是什麼意思呢?  這個也是在 jquery.bootcomplete.js會用到的參數,會把搜尋出來的結果呈現給使用者看,也就是會跟TextBox有所關聯。













執行結果:
















這雖然是別人寫的套件,但我覺得可以從中學習到一些技巧,以上如果有錯誤請指正,因為是用自己的方法去理解,所以可能有些地方不正確,還請多多指教。

沒有留言:

張貼留言