2017年5月26日 星期五

Bootstrap ASP.NET TextBox使用jquery.bootcomplete.js達到自動完成功能,並帶出其他資料

前篇「Bootstrap ASP.NET TextBox使用jquery.bootcomplete.js達到自動完成功能」說明到如何使用別人寫好的jquery.bootcomplete.js,而這次呢,我要依照我key入的關鍵字搜尋出來的結果,點擊其中一筆,帶出某個人的詳細資料。這次要來修改它的js檔,並把它改個名子。

Step 1.先準備要查詢的功能網頁,資料表不變(不知道是什麼看前篇),此網頁我叫它getData2.aspx,一樣前端就一行程式碼,以下是後端程式碼,跟前篇的一樣,但只改Select指令。
Imports System.Data
Imports System.Data.SqlClient
Imports Newtonsoft.Json
Imports UControls.cswfunclass
Partial Class getData2
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 cname as f1,id_no as f2,address1 as addr,email as mail 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
說明紅色的部分
待會我將帶出f1,f2,addr,mail資料,顯示到我要的介面上

Step 2.在新增一個aspx網頁,命名為:test_bootcomplete2

Step 3.將jquery.bootcomplete.js程式碼複製一份到test_bootcomplete2.aspx網頁中,沒有再額外建立js檔,如下:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test_bootcomplete2.aspx.vb" Inherits="test_bootcomplete2" %>

<!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 bootcomplete2</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.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]-->
    <script type="text/javascript">
        (function ($) {
            $.fn.bootcomplete_new1 = function (options) {
                var defaults = {
                    url: "/search.php",
                    method: 'get',
                    wrapperClass: "bc-wrapper",
                    menuClass: "bc-menu",
                    idField: true,
                    idFieldName: $(this).attr('name') + "_id",
                    minLength: 3,
                    dataParams: {},
                    formParams: {},
                    mainDBField:'NULL',
                    otherFieldID: false,
                    arrFieldID: [],
                    arrDBField: []
                };

                var settings = $.extend({}, defaults, options);

                $(this).attr('autocomplete', 'off');
                //載入之後,在原本TextBox再包一層div
                $(this).wrap('<div class="' + settings.wrapperClass + '"></div>');
                /** //不曉得原作者的用意
                if (settings.idField) {
                    if ($(this).parent().parent().find('input[name="' + settings.idFieldName + '"]').length !== 0) {
                        //use existing id field
                    } else {
                        //there is no existing id field so create one
                        $('<input type="hidden" name="' + settings.idFieldName + '" value="">').insertBefore($(this));
                    };
                };
                */
                //載入之後,insertAfter在目前的元素(一開始的元素是TextBox)後面插入div 
                $('<div class="' + settings.menuClass + ' list-group"></div>').insertAfter($(this));
                $('div[class="' + settings.menuClass + ' list-group"]').hide(); //載入後隱藏
                $(this).on("keyup", searchQuery);
                $(this).on("focusout", hideThat);

                var xhr;
                var that = $(this);

                function hideThat() {
                    if ($('.list-group-item' + ':hover').length) {
                        return;
                    };
                    $(that).next('.' + settings.menuClass).hide();
                };

                function searchQuery() {

                    var arr = [];
                    $.each(settings.formParams, function (k, v) {
                        arr[k] = $(v).val();
                    });
                    var dyFormParams = $.extend({}, arr);
                    var Data = $.extend({ query: $(this).val() }, settings.dataParams, dyFormParams);

                    if (!Data.query) {
                        $(this).next('.' + settings.menuClass).html('');
                        $(this).next('.' + settings.menuClass).hide();
                    };

                    if (Data.query.length >= settings.minLength) {

                        if (xhr && xhr.readyState != 4) {
                            xhr.abort();
                        };
                        
                        xhr = $.ajax({
                            type: settings.method,
                            url: settings.url,
                            data: Data,
                            dataType: "json",
                            success: function (json) {
                                var str_datahtml=''; //產生html屬性
                                var results = '';
                                $.each(json, function (i, j) {
                                    str_datahtml = '';
                                    //兜出自己想要的資料,這邊要加上自己要顯示的欄位,例如sql指令欄位有f1、f2、addr、mail,就必須加上data-f1、data-f2、data-addr、data-mail
                                    for (var i = 0; i < settings.arrDBField.length; i++) {
                                        str_datahtml = str_datahtml + 'data-' + settings.arrDBField[i] + '="' + j[settings.arrDBField[i]] + '" ';
                                    };
                                    str_datahtml = str_datahtml + 'data-' + settings.mainDBField + '="' + j[settings.mainDBField] + '" ';
                                    results += '<a href="#" class="list-group-item" ' + str_datahtml + '>' + j[settings.mainDBField] + '</a>';
                                });
                                $(that).next('.' + settings.menuClass).html(results);
                                $(that).next('.' + settings.menuClass).children().on("click", selectResult);
                                $(that).next('.' + settings.menuClass).show();
                            }
                        });
                    };
                };

                function selectResult() {

                    $(that).val($(this).data(settings.mainDBField));
                    //otherFieldID=true代表要將資料填入到其它欄位
                    if (settings.otherFieldID) {
                        for (var i = 0; i < settings.arrFieldID.length; i++) {
                            $('input[id="' + settings.arrFieldID[i] + '"]').val($(this).data(settings.arrDBField[i]));
                        };
                    };
                    /**  //不曉得原作者的用意
                    if (settings.idField) {
                        if ($(that).parent().parent().find('input[name="' + settings.idFieldName + '"]').length !== 0) {
                            //use existed id field
                            $(that).parent().parent().find('input[name="' + settings.idFieldName + '"]').val($(this).data(settings.mainDBField));
                            //ensure we trigger the onchange so we can do stuff
                            $(that).parent().parent().find('input[name="' + settings.idFieldName + '"]').trigger('change');
                        } else {
                            //use created id field
                            $(that).prev('input[name="' + settings.idFieldName + '"]').val($(this).data(settings.mainDBField));
                            //ensure we trigger the onchange so we can do stuff
                            $(that).prev('input[name="' + settings.idFieldName + '"]').trigger('change');
                        };
                    };
                    */
                    $(that).next('.' + settings.menuClass).hide();
                    return false;
                };
                return this;
            };
        }(jQuery));
    </script>
  </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_new1({
                       idField:false,
                        url: 'getData2.aspx',
                        minLength: 1,
                        method: 'post',
                        dataParams: {
                            'k': '1'
                        },
                        mainDBField:'f1',
                        otherFieldID: true,
                        arrFieldID: ['<%=TB_iden.ClientID%>', '<%=TB_email.ClientID%>', '<%=TB_addr.ClientID%>'],
                        arrDBField: ['f2', 'addr', 'mail']
                    });
                </script>  
            </div>
            <div class="col-xs-12">
                <asp:Label ID="L_iden" runat="server" Text="身分證字號" Font-Size="X-Large" AssociatedControlID="TB_iden"></asp:Label>
                <asp:TextBox ID="TB_iden" runat="server" CssClass="form-control"></asp:TextBox>
            </div>
            <div class="col-xs-12">
                <asp:Label ID="L_email" runat="server" Text="信箱" Font-Size="X-Large" AssociatedControlID="TB_email"></asp:Label>
                <asp:TextBox ID="TB_email" runat="server" CssClass="form-control"></asp:TextBox>
            </div>
            <div class="col-xs-12">
                <asp:Label ID="L_addr" runat="server" Text="地址" Font-Size="X-Large" AssociatedControlID="TB_addr"></asp:Label>
                <asp:TextBox ID="TB_addr" runat="server" CssClass="form-control"></asp:TextBox>
            </div>
        </div>
    </div>
    </form>
  </body>
</html>
說明紅色的部分
bootcomplete_new1:我將原本的套件bootcomplete,重新修改它的名子為bootcomplete_new1。
mainDBField、otherFieldID、arrFieldID、arrDBField:這幾個參數是我額外自己加上去的,mainDBField設定主要的欄位也就是f1要填回原本的TextBox欄位、otherFieldID是否有其他的欄位要填入資料、arrFieldID其他的欄位ID名稱、arrDBField其他資料庫資料表的欄位名稱也就是f2,addr,mail;arrFieldID與arrDBField參數必須要一致,資料才能順利填到我們要的位置。

以上我有將一些說明寫在註解裡,也有把一些原作者的語法註解掉,可能原作者還在開發或修改階段,所以不清楚他的用意,以上如有錯誤請指正,謝謝。

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有所關聯。













執行結果:
















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

2017年5月25日 星期四

ASP.NET 為RadioButtonList套上Bootstrap

參考資料:RadioButtonList toggle button with databind
參考資料:ASP.NET 4.0 New Feature : 清單控制項之延伸RepeatLayout功能


Step 1.前端aspx
注意:RepeatLayout要設為Flow,當程式經過轉譯後,前端的html會轉換為span標籤,這樣比較符合div。
<head>
...
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
...
<script type="text/javascript">
$(document).ready(function () {
//當PostBack重新載入時,要能夠呈現被選取的狀態
var allspan;
allspan = $('#<%=RadioButtonList1.ClientID%>').find('span');
for (var i = 0; i < allspan.length; i++) {
if ($(allspan[i]).find('input[type="radio"]').prop('checked') == true) {
$(allspan[i]).addClass('active');
   //因asp.net radiobuttonlist會記錄選了哪一個選項,所以不用再做一次checked的設定
//$(allspan[i]).find('input[type="radio"]').prop('checked', true);
} else {
$(allspan[i]).removeClass('active');
};
};
//===================================================
//當點選RadioButtonList時,要可以呈現被選取的狀態
$('#<%=RadioButtonList1.ClientID%> .btn-success').click(function () {
$(this).addClass('active');
allspan = $('#<%=RadioButtonList1.ClientID%>').find('span');
for (var i = 0; i < allspan.length; i++) {
if (allspan[i] == this) {
//$(this).find('input[type="radio"]').prop('checked', true);
//alert($(this).find('input[type="radio"]').val());
}else {
$(allspan[i]).removeClass('active');
};
};
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
...
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" class="btn-group" data-toggle="buttons" >
<asp:ListItem Value="A" >這是項目A</asp:ListItem>
<asp:ListItem Value="B" >這是項目B</asp:ListItem>
<asp:ListItem Value="C" >這是項目C</asp:ListItem>
<asp:ListItem Value="D" >這是項目D</asp:ListItem>
</asp:RadioButtonList>
<asp:Button ID="Button1" runat="server" Text="PostBack" />
</div>
</div>
</div>
...
</form>
</body>

Step 2.後端aspx.vb
Private Sub test_rbl_bootstrap_Load(sender As Object, e As EventArgs) Handles Me.Load
For x As Integer = 0 To RadioButtonList1.Items.Count - 1
RadioButtonList1.Items(x).Attributes.Add("class", "btn btn-success") 'btn-success
Next
End Sub

結果:

2017年5月4日 星期四

Bootstrap v3.3.5 應用紀錄

2017/05/06
偵測目前的網格,須引用bootstrap-toolkit套件
<script src="js/bootstrap-toolkit.js"></script>
<script>
//偵測目前的網格
// Wrap IIFE around your code
(function($, viewport){
    var highlightBoxes = function() {
        // Executes only in XS breakpoint 手機
        if(viewport.is('xs')) {
            alert('xs');
        };

        // Executes only in SM breakpoint 平板
        if(viewport.is('sm')) {
            alert('sm');
        };

        // Executes only in MD breakpoint 電腦
        if(viewport.is('md')) {
            alert('md');
        };

        // Executes only in LG breakpoint 電腦
        if(viewport.is('lg')) {
            alert('lg');
        };
    }
    $(document).ready(function() {
        // Execute code each time window size changes
        $(window).resize(
            viewport.changed(function() {
highlightBoxes();
            })
        );
    highlightBoxes();
    });
})(jQuery, ResponsiveBootstrapToolkit);


2017/05/04
在col-xs-*使圖片置中,在class加上center-block,如下。
...
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <img src="img/img2.png" class="img-responsive center-block" />
                </div>
            </div>
        </div>
...

2015年12月29日 星期二

ASP.NET 加上 MS SQL IF判斷式、update指令

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click

Dim int_sql As Integer = -1
Dim str_sql As String = String.Empty
str_sql = "if exists (select tid,cname from test_table1 where tid=@tid) " & _
" BEGIN " & _
" update test_table1 set cname=@cname where tid=@tid " & _
" END"
Using conn As New SqlConnection("Server=.;uid=test;pwd=test;Database=school")
conn.Open()
Using command As SqlCommand = New SqlCommand(str_sql, conn)
command.Parameters.AddWithValue("@tid", "2")
command.Parameters.AddWithValue("@cname", "李四")
int_sql = command.ExecuteNonQuery() '回傳影響的筆數 -1
End Using
conn.Close()
End Using
Response.Write(int_sql)
End Sub

2015年12月25日 星期五

ASP.NET TextBox 加上 jquery autocomplete(自動完成)

參考資料:AutoComplete using JQuery Ajax and Asp.Net WCF Service–C# and Vb.Net

本篇參考以上資料,並作部分修改。

結果:















A.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jquery autocomplete</title>
    <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
    <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="ui/jquery.ui.core.js"></script>
 <script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
 <script type="text/javascript" src="ui/jquery.ui.position.js"></script>
 <script type="text/javascript" src="ui/jquery.ui.menu.js"></script>
 <script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript">
         $(function () {
             $("#TextBox1").autocomplete({
                 source: function (request, response) {
                     var val = request.term;
                     $.ajax({
                         url: 'loadData.aspx', method: 'post', dataType: 'json',
                         data: { sd: 'txtaut', p1: val },
                         error: function (XMLHttpRequest, textStatus, errorThrown) {
                             if ((XMLHttpRequest.status == 0) || (textStatus == 'error')) {
                                 alert('執行時發生錯誤\n請重新執行'); 
                             } else {
                                 alert('發生例外錯誤'); 
                                };
                         },
                         success: function (data) {
                             if (data != null) {
                                 var total = data.length;
                                 if (total > 0) {
                                     response($.map(data, function (item) {
                                         return { value: item.text };
                                     }));
                                 } else if (total == 0) {
                                     //查無資料
                                 };
                             };
                         }
                     });
                 },
                 minLength: 1    // MINIMUM 1 CHARACTER TO START WITH.
             });
         });
 </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    jquery autocomplete TextBox自動完成<br/>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="送出" />
    </div>
    </form>
</body>
</html>

loadData.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="loadData.aspx.vb" Inherits="WebApplication1.loadData" %>

loadData.aspx.vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 If Not Page.IsPostBack Then
  If (Not Request("sd") Is Nothing) Then
   Dim sd() As String = Request("sd").ToString.Split(";")
   Dim str_data As StringBuilder = Nothing

   If sd(0).Equals("txtaut") = True Then
    If Not Request("p1") Is Nothing Then
     str_data = New StringBuilder()
     Dim str_sql As String = String.Empty
     str_sql = "select rtrim(cname) as text from test_staff where cname like @cname+'%'"
     Dim ds As New DataSet()
     Using conn As New SqlConnection("Server=.;uid=test;pwd=test;Database=temp_db")
      Using command As SqlCommand = New SqlCommand(str_sql, conn)
       '避免 SQL Injection(資料隱碼)攻擊
       If command.Parameters.Contains("@cname") Then
        command.Parameters("@cname").Value = Request("p1").ToString
       Else
        command.Parameters.AddWithValue("@cname", Request("p1").ToString) '讓ADO.NET自行判斷型別轉換
       End If
       
       Using da As New SqlDataAdapter()
        da.SelectCommand = command
        da.Fill(ds)
       End Using
      End Using
     End Using
     str_data.Append(JsonConvert.SerializeObject(ds.Tables(0), Formatting.Indented))
     Response.Write(str_data.ToString)
    Else
     Response.Write("[]")
    End If
   Else
    Response.Write("[]")
   End If

  Else
   Response.Write("[]")
  End If
 End If
End Sub

ASP.NET DropDownList 加上 jquery chosen,送出後保留原本的值






aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="css/chosen.css">
    <!--JQuery使用v1.8.2-->
    <script type="text/javascript" src="Scripts/jquery.js"></script>
    <script type="text/javascript" src="Scripts/chosen.jquery.js"></script>
    <script type="text/javascript" src="docsupport/prism.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var config = {
                '.chosen-select': {},
                '.chosen-select-deselect': { allow_single_deselect: true },
                '.chosen-select-no-single': { disable_search_threshold: 10 },
                '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
                '.chosen-select-width': { width: "95%" }
            };
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            };
            //$('.chosen-select').chosen().change(function (event) {
            $('#<%=DropDownList1.ClientID %>[class="chosen-select"]').chosen().change(function (event) {
                var strval = $(this).val();
                if (strval == null) { $('#<%=HF_DDL1.ClientID %>').val(''); } else { $('#HF_DDL1').val(strval); };
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    以下為範例<br/>
          <select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select" style="width:350px;" tabindex="18" id="multiple-label-example">
            <option value=""></option>
            <option>American Black Bear</option>
            <option>Asiatic Black Bear</option>
            <option selected>Brown Bear</option>
            <option>Giant Panda</option>
            <option>Sloth Bear</option>
            <option>Sun Bear</option>
            <option>Polar Bear</option>
            <option>Spectacled Bear</option>
          </select>
          <br/>
          <br/>
        <asp:DropDownList ID="DropDownList1" runat="server" Width="80%"
              CssClass="chosen-select" >
        </asp:DropDownList>
        <asp:HiddenField ID="HF_DDL1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="送出" />
    </div>
    </form>
</body>
</html>

aspx.vb
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim str_sql As String = String.Empty
            str_sql = "select id_no+'-'+rtrim(cname) as html_text,id_no as val from test_staff"
            Dim ds As New DataSet()
            Using conn As New SqlConnection("Server=.;uid=test;pwd=test;Database=temp_db")
                Using command As SqlCommand = New SqlCommand(str_sql, conn)
                    Using da As New SqlDataAdapter()
                        da.SelectCommand = command
                        da.Fill(ds)
                    End Using
                End Using
            End Using

            DropDownList1.DataTextField = "html_text"
            DropDownList1.DataValueField = "val"
            DropDownList1.DataSource = ds.Tables(0)
            DropDownList1.DataBind()

            DropDownList1.Attributes.Add("data-placeholder", "請選擇學生")
            DropDownList1.Attributes.Add("multiple", "")
        End If
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
        Dim str_js As StringBuilder = New StringBuilder()
        str_js.Append("$(document).ready(function () {")
        str_js.Append("var HF_val=$('#" & HF_DDL1.ClientID & "').val();")
        str_js.Append("if (HF_val!=''){")
        str_js.Append("$.each(HF_val.split(','),function (index,value) {")
        str_js.Append("$('#" & DropDownList1.ClientID & " option[value=" & Chr(34) & "' + value + '" & Chr(34) & "]').prop('selected', true);")
        str_js.Append("});")
        str_js.Append("$('#" & DropDownList1.ClientID & "[class=" & Chr(34) & "chosen-select" & Chr(34) & "]').trigger('" & "chosen:updated" & "');")
        str_js.Append("};")
        str_js.Append("});")
        WJS2(str_js.ToString, Page, "js1")
    End Sub

    Public Sub WJS2(ByVal str_js As String, ByVal Pa As System.Web.UI.Page, ByVal str_js_name As String)
        If ScriptManager.GetCurrent(Pa) Is Nothing Then
            '未啟用asp.net ajax功能
            '有些情況下會需要以動態的方式加入用戶端指令碼。 若要動態加入指令碼,請使用 RegisterClientScriptBlock 方法、RegisterClientScriptInclude 方法、RegisterStartupScript 方法或 RegisterOnSubmitStatement 方法,視您要加入指令碼的時間和方式而定。
            '最後面插入JS程式碼
            Pa.ClientScript.RegisterStartupScript(Me.GetType(), str_js_name, str_js.ToString, True)
        Else
            '啟用asp.net ajax功能
            ScriptManager.RegisterStartupScript(Pa, Me.GetType(), str_js_name, str_js.ToString, True)
        End If
    End Sub