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