2013年12月27日 星期五

ASP.NET FileUpload上傳檔案,讀取Byte檢查副檔名,以圖片為例

為什麼會講上傳檔案,檢查檔案的副檔名呢(如:jpg、png等)?
在之前,總會看書或上網看教學學習時,會講到檔案上傳,一般都是說檢查檔案的副檔名如:test.jpg,但在一次資訊安全系列的講座上,講解到駭客運用檔案偽裝的手法來騙過程式的檢查,看似一個檔案上傳的動作,卻也是被有心人士利用的一個漏洞,如果上傳一個偽裝的檔案,雖然不執行檔案可能不會有事,但如果讓其他使用者下載,並執行偽裝的檔案(正常的執行word、圖片瀏覽等),那麼就有可能讓其他使用者的電腦被植入木馬等惡意程式。

因此在此分享另外一種利用Byte來檢查檔案副檔名。

參考資料如下:
參考1.建議請先看此篇討論的主題內容,因為也會使用到此篇的寫法 請教判斷是否為真的圖檔的方法 
參考2.Validate uploaded image content in ASP.NET

前置作業:
1.請先建立一個aspx網頁,網頁上一個FileUpload、兩個button按鈕
2.在專案中建立一個up_file資料夾,存放上傳的檔案

前端HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:FileUpload ID="FUpload1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="上傳方法一" />
        <asp:Button ID="Button2" runat="server" Text="上傳方法二" />
    </div>
    </form>
</body>
</html>

後端程式碼
Imports System.IO
Partial Class FileUpload
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        'http://www.dotnetexpertguide.com/2011/05/validate-uploaded-image-content-in.html
        '法一
        Dim imageHeader As New Dictionary(Of String, Byte())

        imageHeader.Add("JPG", New Byte() {&HFF, &HD8, &HFF}) 'C#寫法0xFF, 0xD8, 0xFF;VB.NET必須將0x改為&H
        imageHeader.Add("JPEG", New Byte() {&HFF, &HD8, &HFF})
        imageHeader.Add("PNG", New Byte() {&H89, &H50, &H4E})
        imageHeader.Add("TIF", New Byte() {&H49, &H49, &H2A})
        imageHeader.Add("TIFF", New Byte() {&H49, &H49, &H2A})
        imageHeader.Add("GIF", New Byte() {&H47, &H49, &H46})
        imageHeader.Add("BMP", New Byte() {&H42, &H4D})
        imageHeader.Add("ICO", New Byte() {&H0, &H0, &H1})
        Dim header() As Byte = Nothing

        If FUpload1.HasFile Then
            Dim fileExt As String = Nothing
            fileExt = FUpload1.FileName.Substring(FUpload1.FileName.LastIndexOf(".") + 1).ToUpper()
            Dim filetype As String = Nothing
            filetype = fileExt
            Dim tmp() As Byte = imageHeader(fileExt)

            ReDim Preserve header(tmp.Length - 1)
            FUpload1.FileContent.Read(header, 0, header.Length)

            If CompareArray(tmp, header) Then
                Response.Write("Valid ." & fileExt & " file.")
                Try

                    Dim myFileName As String
                    myFileName = FUpload1.PostedFile.FileName
                    Dim c As String = System.IO.Path.GetFileName(myFileName) '取得檔案及副檔名

                    Dim Uploadfile As String = Server.MapPath("./up_file/") & c
                    '==========================================
                    Dim myfilecount As Integer = 2
                    '檢查檔名是否有重複
                    While (System.IO.File.Exists(Uploadfile))
                        c = "img_" & myfilecount '學號_數字
                        Uploadfile = Server.MapPath("./up_file/") & c & "." & filetype '重新命名並加上副檔名
                        myfilecount = myfilecount + 1
                    End While
                    '==========================================

                    Dim myImage As System.Drawing.Image = System.Drawing.Image.FromStream(FUpload1.PostedFile.InputStream)
                    myImage.Save(Uploadfile, ParseImageFormat(filetype))
                Catch ex As Exception
                    Response.Write("sorry,Save error.")
                End Try
            Else
                Response.Write("Invalid ." & fileExt & " file.")
            End If
        End If
    End Sub
    '判斷為Byte
    Function CompareArray(ByVal a1() As Byte, ByVal a2() As Byte) As Boolean
        If a1.Length <> a2.Length Then
            Return False
        End If
        For i As Integer = 0 To a1.Length - 1
            If a1(i) <> a2(i) Then
                Return False
            End If
        Next
        Return True
    End Function

    Protected Sub Button2_Click(sender As Object, e As System.EventArgs) Handles Button2.Click
        '法二
        If FUpload1.HasFile Then
            Dim filetype As String = Nothing
            Dim bool_by As Boolean = True
            If Me.FUpload1.PostedFile.ContentLength > 0 Then

                Dim s As Stream = Me.FUpload1.PostedFile.InputStream
                Dim buffer(s.Length - 1) As Byte
                s.Read(buffer, 0, s.Length)

                Dim header As String = Hex(buffer(0)) & Hex(buffer(1))

                Select Case header
                    Case "FFD8"
                        My.Response.Write("JPG")
                        filetype = "jpg"
                    Case "424D"
                        My.Response.Write("BMP")
                        filetype = "bmp"
                    Case "4749"
                        My.Response.Write("GIF")
                        filetype = "gif"
                    Case "8950"
                        My.Response.Write("PNG")
                        filetype = "png"
                    Case Else
                        My.Response.Write("Not Supported!" & header)
                        bool_by = False
                End Select
                If bool_by = True Then

                    Try

                        Dim myFileName As String
                        myFileName = FUpload1.PostedFile.FileName
                        Dim c As String = System.IO.Path.GetFileName(myFileName) '取得檔案及副檔名

                        Dim Uploadfile As String = Server.MapPath("./up_file/") & c
                        '==========================================
                        Dim myfilecount As Integer = 2
                        '檢查檔名是否有重複
                        While (System.IO.File.Exists(Uploadfile))
                            c = "img_" & myfilecount '學號_數字
                            Uploadfile = Server.MapPath("./up_file/") & c & "." & filetype '重新命名並加上副檔名
                            myfilecount = myfilecount + 1
                        End While
                        '==========================================

                        '重新製作圖檔
                        Dim myImage As System.Drawing.Image = System.Drawing.Image.FromStream(FUpload1.PostedFile.InputStream)
                        myImage.Save(Uploadfile, ParseImageFormat(filetype))

                    Catch ex As Exception
                        Response.Write("sorry,Save error.")
                    End Try

                End If
                s.Close()
                s.Dispose() '釋放所有資源要在最後執行,否則即使存檔也無效
            Else
                bool_by = False
            End If

        End If
    End Sub
    Function ParseImageFormat(ByVal type As String) As System.Drawing.Imaging.ImageFormat
        Select Case type.ToLower()
            Case "jpg"
                Return System.Drawing.Imaging.ImageFormat.Jpeg
            Case "jpeg"
                Return System.Drawing.Imaging.ImageFormat.Jpeg
            Case "bmp"
                Return System.Drawing.Imaging.ImageFormat.Bmp
            Case "gif"
                Return System.Drawing.Imaging.ImageFormat.Gif
            Case "png"
                Return System.Drawing.Imaging.ImageFormat.Png
            Case "tiff"
                Return System.Drawing.Imaging.ImageFormat.Tiff
            Case "wmf"
                Return System.Drawing.Imaging.ImageFormat.Wmf
            Case "emf"
                Return System.Drawing.Imaging.ImageFormat.Emf
            Case "icon"
                Return System.Drawing.Imaging.ImageFormat.Icon
            Case "ico"
                Return System.Drawing.Imaging.ImageFormat.Icon
            Case "exif"
                Return System.Drawing.Imaging.ImageFormat.Exif
            Case Else
                Return System.Drawing.Imaging.ImageFormat.Jpeg
        End Select
    End Function
End Class

2013年11月28日 星期四

jquery mobile 切換頁面到html檔無法執行javascript

參考1: http://www.jqmobile.org/thread-254-1-1.html
參考2: http://liuwenxin.blog.51cto.com/4436000/1032260

問題:用a標記的href鏈接跳轉到目的頁面時,綁定的$(document).ready()不執行,需要刷新頁面才能執行?
解決:jquery mobile頁面跳轉是ajax跳轉,所以$(document).ready()是不執行的,如果想用a標記跳轉過來執行一些函數的話有兩種方法:
(1).用js的window.location.href=url跳轉,或者在a標記裡寫rel="external",這樣頁面就脫離了jquery mobile框架,到了一個新的頁面;
(2).給目的頁面的page加一個id,例如:indexPage,給indexPage綁定pageinit事件,$('#indexPage').live('pageinit',function(event){});就可以了,其實jquery mobile頁面的跳轉就是不同page直接的切換

法1: 如果你原本的超連結標籤是寫成<a href="news.htm" >最新消息</a> 當去點選此連結時,切換到news.htm時,它是不會執行javascript的程式碼,必須在標籤上多加上rel="external"寫法如下  <a href="news.htm" rel="external">最新消息</a>

2013年11月3日 星期日

ASP.NET 網頁互傳值



a.aspx
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim Subm As HttpContext = HttpContext.Current
            Subm.Items.Add("Page_title", "Hello")
            Subm.Items.Add("temp_x","大家好" )
            Server.Transfer("b.aspx", True) '傳給b.aspx
        End If
    End Sub

b.aspx
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim Req As HttpContext = HttpContext.Current
            Page.Title = Req.Items("Page_title")
            Response.Write Req.Items("temp_x")
        End If
    End Sub

2013年10月22日 星期二

PHP 字串.搜尋.取代,實作Session購物車

以往在實作商品購物車的時候都會先把顧客的商品儲存在Session裡,當顧客要結帳或者想暫時存放在自己的購物車時就能得知顧客選了哪些商品及數量。

說明:
此篇假設我選完商品,但我想取消某個商品。其他說明直接寫在程式碼註解中,不再多作解釋。

程式碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>字串.搜尋.取代</title>
</head>

<body>
<?php
$search_temp='P112'; //要取消的商品編號
$str_temp='P111=2;P112=1;P113=3;'; //假設這是商品編號=數量;
//取得字串起始位置
$start=strpos($str_temp,$search_temp); //strpos(字串,要搜尋的字串,起始位置) 起始位置如果是0可以不用寫
if(gettype($start)!="integer"){
$start=-1; //沒有找到字串
}
if ($start!=-1){
//不等於-1代表有找到商品
$end=strpos($str_temp,';',$start);
$end2=($end-$start)+1; //取幾個字元
$get_strtemp=mb_substr($str_temp,$start,$end2,'UTF-8');//取出某個範圍的字串 mb_substr(搜尋某個字串,起始位置,取幾個字元,'UTF-8')
echo $start.';'.$end."<br/>";
echo '擷取出來的字串,也就是要取消的商品:'.$get_strtemp."<br/>";
$str_temp=str_replace($get_strtemp,'',$str_temp); //取消的商品後的字串
echo $str_temp;
}else{
//等於-1沒有找到商品
echo '紀錄中沒有這項商品';
}

?>
</body>
</html>

2013年10月10日 星期四

Android HttpURLConnection post 傳遞資料到 server 回傳JSON資料

參考資料:
1.How to use HttpURLConnection POST data to web server?
2.How to connect Android with PHP, MySQL (如果你是用PHP+MySQL可參考,而我是參考此篇的寫法)
如果你還不懂AsyncTask,以下是必看文章
3.使用AsyncTask執行非同步任務
4.Android中AsyncTask的使用與源碼分析

以下假設是在順利執行的情況下

步驟:
Step 1.先在Eclipse建立Android專案(Android版本我是用4.3),建立完成後,先新增一個class名為JSONParser,程式碼如下:
P.S原則上我是參考資料2的做法,只是改成java的HttpURLConnection
JSONParser.java
package com.androidhive.jsonparsing;
import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import org.json.JSONException;
import org.json.JSONObject;
import android.util.Log;

public class JSONParser {
    static JSONObject jObj = null;
    static String json = "";
    // constructor
    public JSONParser() {}
// getJSONFromUrl方法為單存取資料用
    public JSONObject getJSONFromUrl(String temp_url) {
    HttpURLConnection conn = null;
        // Making HTTP request
        try {
        // 建立連線
            URL url =new URL(temp_url);
            conn = (HttpURLConnection)url.openConnection();
            //===============================
            //下面註解兩行可有可無
            //conn.setReadTimeout(10000);
            //conn.setConnectTimeout(15000);
            //===============================
            conn.setRequestMethod("POST");
            conn.setDoInput(true);
            conn.setDoOutput(true);
            conn.connect();

            BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));
        StringBuilder sb = new StringBuilder();
            String line = null;
            while ((line = reader.readLine()) != null) {
                sb.append(line + "\n");
            }
            reader.close();
            json = sb.toString();
        }catch (Exception e) {
        System.out.println("getJSONFromUrl Exception Error :"+e);
        }finally {
            if (conn != null) {
                conn.disconnect();
            }
        }  
        // try parse the string to a JSON object
        try {
            jObj = new JSONObject(json);
        } catch (JSONException e) {
            Log.e("JSON Parser", "getJSONFromUrl Error parsing data " + e.toString());
        }
        return jObj;
    }
 
    public JSONObject makeHttpRequest(String temp_url, String method, String urlParameters){
    HttpURLConnection conn = null;
    try{
            // 建立連線
            URL url =new URL(temp_url);
            conn = (HttpURLConnection)url.openConnection();
            //===============================
            //下面註解兩行可有可無
            conn.setReadTimeout(10000);
            conn.setConnectTimeout(15000);
            //===============================
            conn.setRequestMethod(method); //URL 請求的方法
            //發送表單類型資料,設定請求標頭
            conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
            //設定要傳送的資料長度
            conn.setRequestProperty("Content-Length", "" + Integer.toString(urlParameters.getBytes().length));
            //設定內容語言
            conn.setRequestProperty("Content-Language", "zh-tw");

            conn.setUseCaches (false);
            conn.setDoInput(true);
            conn.setDoOutput(true);
         
            //Send request
            DataOutputStream wr = new DataOutputStream (conn.getOutputStream ());
            wr.writeBytes (urlParameters);
            wr.flush ();
            wr.close ();
         
            //Get Response
            BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));
            String line;
            StringBuffer sb = new StringBuffer();
             
            while((line = reader.readLine()) != null) {
            sb.append(line + "\n");
            }
            reader.close();
            json = sb.toString();
    }catch (Exception e) {
    System.out.println("makeHttpRequest Error:"+e.toString());
        }finally {
            if (conn != null) {
                conn.disconnect();
            }
    }  
        // try parse the string to a JSON object
        try {
            jObj = new JSONObject(json);
        } catch (JSONException e) {
            Log.e("JSON Parser", "getJSONFromUrl Error parsing data " + e.toString());
        }
        // return JSON String
        return jObj;
    }
}

Step 2.再來是直接使用剛剛建立好的JSONParser類別來傳資料取資料,程式碼如下:
P.S以下有些程式碼您必須自行修改,別照抄
Item2.java
package com.android.school;
import com.androidhive.jsonparsing.JSONParser;
import android.os.AsyncTask; //處理非同步
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.app.Activity;
import android.os.Bundle;
public class Item2 extends Activity {
//JSON節點名稱名稱,
    String T_temp1= "test";
    //JSON節點名稱,也就是要取資料的欄位名稱,必須要以網頁回傳的為主,如:"欄位1,欄位2,欄位3..."
    String get_str="test1,test2,test3";
 
    JSONParser jParser; //剛剛建立的JSONParser類別
    JSONObject json;
    JSONArray contacts = null;
    Item2_AT I_AT; //非同步AsyncTask類別
    EditText txt2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_item2);

Button B1=(Button)findViewById(R.id.button1);
B1.setOnClickListener(B1_Click);
txt2=(EditText)findViewById(R.id.editText2);
//假如你是連結自己的IIS必須寫10.0.2.2:port,因為預設iis的port為80
new Item2_AT().execute("url","http://10.0.2.2:80/TEST/TEST.aspx");
}

private OnClickListener B1_Click=new OnClickListener(){
   public void onClick(View v){
    I_AT=new Item2_AT();
    System.out.println("return="+I_AT.execute("select","http://10.0.2.2:80/TEST/TEST.aspx"));
   }
};

class Item2_AT extends AsyncTask<String, Integer, Integer>{
 //================================================================
 //必須建立
//execute("http://10.0.2.2:80/TEST/TEST.aspx")會傳給doInBackground
//doInBackground(String... param)代表傳入的值可以帶入很多個參數 如:new Item2_AT().execute("1","2");
   @Override
protected Integer doInBackground(String... param) {
int Judge;
    //get Data 單存取資料
    if (param[0].equals("url")==true){
// Creating JSON Parser instance
jParser = new JSONParser();
// getting JSON string from URL
json = jParser.getJSONFromUrl(param[1]);
    }else if (param[0].equals("select")==true){
    String urlParameters="0";
    try{
    urlParameters ="sid="+URLEncoder.encode(txt2.getText().toString(), "UTF-8");
    Judge=1;
    }catch(UnsupportedEncodingException e){
    System.out.println("UnsupportedEncodingException error:"+e.toString());
    Judge=0;
    }
    if (Judge==1){
    // Creating JSON Parser instance
jParser = new JSONParser();
         //param[1] 儲存的是url網址
json = jParser.makeHttpRequest(param[1],"POST",urlParameters);
    }
    }
    return null;
}

@Override
protected void onPostExecute(Integer result) {
//此method是在doInBackground完成以後,才會呼叫的
super.onPostExecute(result);
EditText txt=(EditText)findViewById(R.id.editText1);

//show Data
String str_temp;
try {
String[] T_temp1f=get_str.split(","); //分割字串

   // Getting Array of Contacts
   contacts = json.getJSONArray(T_temp1);
   // looping through All Contacts
   for(int i = 0; i < contacts.length(); i++){
    str_temp="";
       JSONObject c = contacts.getJSONObject(i);
     
       for (int x=0;x<T_temp1f.length;x++){
        if (x==T_temp1f.length-1){
        str_temp=str_temp + c.getString(T_temp1f[x])+";\n";
        }else{
        str_temp=str_temp + c.getString(T_temp1f[x])+",";
        }
       }
       txt.setText(txt.getText()+ str_temp);
   }
 
} catch (JSONException e) {
txt.setText("JSON error:"+e.toString());
   System.out.println("JSON error:"+e.toString());
}catch (Exception e) {
txt.setText("Error:"+e.toString());
System.out.println("Error:"+e.toString());
}
}

@Override
protected void onProgressUpdate(Integer... values) {
super.onProgressUpdate(values);
}

@Override
protected void onPreExecute() {
super.onPreExecute();
}
//=============================================================
}
}

Step 3.建立要連結的網頁,因為我是連結ASP.NET的網頁,所以已ASP.NET為主,如果你沒有測試的網頁,可以試著連結這個網頁取資料 http://api.androidhive.info/contacts/ ,如果你是用測試的網頁 Android 部分就改用這個方法去取得資料getJSONFromUrl,但Android程式碼的寫法就要改成這篇的寫法 How to connect Android with PHP, MySQL  ,因為我的程式碼是用他的來改過的,所以有些部分就不一樣
P.S以下程式碼,可以先看看此篇會比較清楚 ASP.NET 產生 JSON 資料
TEST.aspx.vb
Imports System
Imports System.Data
Imports System.Data.SqlClient
'Json.NET相關的命名空間
Imports Newtonsoft.Json
Imports Newtonsoft.Json.Linq

Partial Class FSA_Student
    Inherits System.Web.UI.Page

    Dim strsqlCon As String = "Data Source=.\SQLEXPRESS;Initial Catalog=資料庫名稱;Trusted_Connection=True;"
    Dim str_sql As String
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim p_value As String = Nothing
            'sql指令
            str_sql = "Select test1,test2,test3 from test where test1=@test1"
            If Not Request.Form("sid") Is Nothing Then
                p_value = Request.Form("sid")
            ELSE
                p_value = "0" '沒有接收到值,預設先指定一個參數值
            End If

            'function queryDataTable(sql指令, 參數名稱, 參數值) 方法執行完會回傳DataTable
            Dim dt As DataTable = queryDataTable(str_sql, "@test1", p_value)

            Dim str_json As String = JsonConvert.SerializeObject(dt)

            str_json = str_json.Replace(" ", "") '將空白取代掉
            Response.Write("{" & Chr(34) & "test" & Chr(34) & ":" & str_json & "}")

        End If
    End Sub

    Function queryDataTable(ByVal sql_str As String, ByVal pv As String, ByVal pv_value As String) As DataTable
        Dim sql_p() As String = Nothing
        sql_p = pv.Split(",") 'sql字串中的參數
        Dim sqlvalue_p() As String = Nothing
        sqlvalue_p = pv_value.Split(",") 'sql字串中的參數值

        Dim ds As New DataSet()
        Using conn As New SqlConnection(strsqlCon)
            Dim command As SqlCommand = New SqlCommand(str_sql, conn)

            Dim x_end As Integer = sql_p.Length - 1
            For x As Integer = 0 To x_end
             command.Parameters.AddWithValue(sql_p(x), sqlvalue_p(x)) '讓ADO.NET自行判斷型別轉換
            Next

            Dim da As New SqlDataAdapter()
            da.SelectCommand = command

            da.Fill(ds)
        End Using
        If ds.Tables.Count > 0 Then
            Return ds.Tables(0)
        Else
            Return New DataTable()
        End If
    End Function

End Class

2013年10月9日 星期三

ASP.NET 產生 JSON 資料

參考資料:
1.[ASP.net WebForm] 利用JSON.net 實現 DataTable轉JSON字串、JSON字串轉DataTable (程式碼短少)  以下的作法都是參考此篇

前置作業:必須先到 http://json.codeplex.com/ 下載JSON.NET套件,然後將套件載入道專案中

VB.NET 程式碼如下:
法1. 運用JArray陣列來產生JSON資料

 'Json.NET相關的命名空間
 Imports Newtonsoft.Json
 Imports Newtonsoft.Json.Linq

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim ja As New JArray
            Dim jo As New JObject

            jo.Add("success", "1")
            jo.Add("message", "successfully created.")
            ja.Add(jo)
            Dim str_json As String = JsonConvert.SerializeObject(ja, Formatting.Indented)
            Response.Write("{" & Chr(34) & "test" & Chr(34) & ":" & str_json & "}")
        End If
    End Sub

法2.取出資料庫資料轉成JSON資料

Imports System
Imports System.Data
Imports System.Data.SqlClient
'Json.NET相關的命名空間
Imports Newtonsoft.Json
Imports Newtonsoft.Json.Linq

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Dim str_sql As String = Nothing
            Dim p_value As String = Nothing
            '假設要取得某一筆資料
            str_sql = "Select test1,test2,test3 from test where test1=@test1 and test2=@test2"
            '假設已經指定好參數,也就是sql指令的@test1,@test2,那就必須指定參數的值,如有多個參數值就已,號隔開
            p_value = "台南市,某家商店"
            'function queryDataTable(sql指令, 參數名稱, 參數值) 方法執行完會回傳DataTable
            Dim dt As DataTable = queryDataTable(str_sql, "@test1,@test2", p_value)

            Dim str_json As String = JsonConvert.SerializeObject(dt)

            str_json = str_json.Replace(" ", "") '將空白取代掉
            Response.Write("{" & Chr(34) & "test" & Chr(34) & ":" & str_json & "}")
        End If
    End Sub

    Function queryDataTable(ByVal sql_str As String, ByVal pv As String, ByVal pv_value As String) As DataTable
        Dim strsqlCon As String = "Server=127.0.0.1;Database=資料庫名稱;uid=帳號;pwd=密碼"
        Dim sql_p() As String = Nothing
        '可把split改成 Regex.Split,例如:Regex.Split("123<br/>456", "\<br\/\>") '\跳脫字元
        sql_p = pv.Split(",") 'sql字串中的參數
        Dim sqlvalue_p() As String = Nothing
        sqlvalue_p = pv_value.Split(",") 'sql字串中的參數值

        Dim ds As New DataSet()
        Using conn As New SqlConnection(strsqlCon)
            Dim command As SqlCommand = New SqlCommand(str_sql, conn)

            Dim x_end As Integer = sql_p.Length - 1
            For x As Integer = 0 To x_end
                command.Parameters.AddWithValue(sql_p(x), sqlvalue_p(x)) '讓ADO.NET自行判斷型別轉換
            Next
            Dim da As New SqlDataAdapter()
            da.SelectCommand = command

            da.Fill(ds)
        End Using
        If ds.Tables.Count > 0 Then
            Return ds.Tables(0)
        Else
            Return New DataTable()
        End If
    End Function

補充:
JSON資料轉成DataTable,並將資料傳給GridView1

'Label1.Text值  [{ "test1" : "台南市" , "test2" : "某家商店" },{ "test1" : "台南市" , "test2" : "某家商店1" },{ "test1" : "台南市" , "test2" : "某家商店2" }]

            Dim str_data As String = Label1.Text.Replace(" ", "")
            Dim dt As DataTable = JsonConvert.DeserializeObject(Of DataTable)(str_data)
            GridView1.DataSource = dt
            GridView1.DataBind()


以上 End

2013年9月24日 星期二

JavaScript replace 字數計算,取代空白、換行

前置作業:
請自行下載JQuery檔案以及建置好開發ASP的環境。
重點在於如何使用JavaScript來計算使用者在輸入文字時,如何計算字數。

紅色字為重點

<%@CODEPAGE="65001"%>
<%
'輸出設定成UTF-8'
Response.CodePage = 65001  
Response.CharSet = "utf-8"

'在使用傳統ASP時,為了避免使用者按"上一頁"看到Client的暫存網頁,通常會加上下列這三行'
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "no-cache"
Response.Expires = -1

%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
var str_factor=/(\s)|(\n)/g;
$(document).ready(function(){
       //運用JQuery為input id=TB1加入keyup事件
$('#TB1').keyup(function(){
var Word_Number;
var str_temp2 = $('#TB1').val(); //取得input id=TB1的值
if (str_temp2.replace(str_factor, "").length==0) {
$("#SSWl").html(''); //將 div id=SSWl 文字清空
}else{
Word_Number=(str_temp2.replace(str_factor, "")).length;
$("#SSWl").html('目前字數:'+Word_Number);
$('#showmsg').html($('#TB1').val());
}
});
});

function checkform(){
var str_temp = "";
if ($('#TB1').val() == '' || $.trim($('#TB1').val()).length - 1 == -1) {
alert('未填寫');
return false;
} else {
str_temp = $('#TB1').val();
if ((str_temp.replace(str_factor, "")).length < 10) {
alert('字數小於10個字,\n必須至少10個字');
return false;
}else if ((str_temp.replace(str_factor, "")).length > 10){
if ((str_temp.replace(str_factor, "")).length > 50){
 alert('字數最多不能大於50個字');
 return false;
}
}
}
window.document.f1.submit();
}
</script>
</head>
<body>
<%
TB1=Request.Form("TB1")
if NOT ISEmpty(TB1) then
   Response.write "NOT Empty<br />"
   str_temp=replace(TB1,vbcrlf,"" )
   str_temp=replace(str_temp," ","" )
   Response.write "長度="& len(str_temp) & ";" & str_temp '&nbsp;空白符號
else
   Response.write "Empty"
end  if
%>
<div id="SSWl"></div>
<form method="post" name="f1" id="f1" action="test_TextBox.asp" enctype="application/x-www-form-urlencoded">
  <textarea name="TB1" id="TB1" style="width: 450px; height: 180px"></textarea>
  <input type="submit" value="送出" onclick="javascript:checkform();"/>
</form>
<br />
<span id="showmsg">?</span>
</body>
</html>

JavaScript 顏色16進位轉RGB 或 RGB轉16進位

最近剛好碰到Html5的<input type="color"/>
當我選擇好顏色的時候,取到的值會是#ff0000,但有時開發人員會想取得RGB的值也就是RGB(255,255,255),您可以參考這篇資料 Convert rgb color to hex color


程式碼如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="No-cache" />
<title>顏色16進位轉RGB 或 RGB轉16進位</title>
<script src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
//RGB轉16進位
function rgb2hex(rgb){
   var hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
   var hex = function(x){
       return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
   };
   var tmp = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   var color = hex(tmp[1]) + hex(tmp[2]) + hex(tmp[3]);
   return color;
}
//16進位轉RGB
function hex2rgb(v){
   if (/^[0-9A-F]{3}$|^[0-9A-F]{6}$/.test(v.toUpperCase())) {
       if (v.length == 3) {
           v = v.match(/[0-9A-F]/g);
           v = v[0] + v[0] + v[1] + v[1] + v[2] + v[2];
           this.value = v;
       }
   
       var r = parseInt(v.substr(0, 2), 16);
       var g = parseInt(v.substr(2, 2), 16);
       var b = parseInt(v.substr(4, 2), 16);
       return [r, g, b].join(',');
   }
   return v;
}
var hex,rgb;
//背景色
$('#BColor').change(function(){
  hex=$('#BColor').val().replace('#', ''); //將#字號取代掉
  rgb ='rgb('+hex2rgb(hex)+')';
  alert(rgb);
});
</script>
</head>
<body>
Bg:<input type="color" id="BColor"/>
</body>
</html>

2013年8月20日 星期二

Html div 水平垂直置中

今日在Google找資料key入了關鍵字:div 水平垂直置中,找到了以下這篇資料
CSS 教學 – 設定一個 div 水平置中和垂直置中
此篇是以圖片來做教學示範,所以您有需要可以看此篇,但建議您先看此篇,講解比較清楚。

而我今日想在網頁中將文字水平垂直置中,那麼要怎麼設定Html div標籤呢,因為文字在div標籤中會改變height、width,那如果將來要修改div裡面的文字這樣以後一定又要修改CSS或Html碼,所以自己就利用JQuery來計算位置自動去調整div位置,這樣將來就不需要修改CSS或Html碼,即使div增加了文字也不需要去調整。

前置作業:
  請自行到JQuery下載jquery-2.0.2.min.js

以下是Code,註解都在程式碼中,在此不再作解釋
Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div水平垂直置中</title>
<style type="text/css">
body {
background-color: #EEE; /*背景色*/
}
.BOX {
border: 2px solid #444;
box-shadow: 5px 5px 5px #666;

position:absolute; /*position制定位置*/
top:50%; /* top 座標為 50% */
left:50%; /* left 座標為 50% */
}
</style>
<!--引用JQuery檔jquery-2.0.2.min.js-->
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
    $(function () {
 var h=$('#divbox').height(); //取得div標籤,id為divbox的高度
 var w=$('#divbox').width();  //取得div標籤,id為divbox的寬度
 //計算位移margin-top,margin-left數值
 var margin_top=-(h/2);
 var margin_left=-(w/2);
       
          //為div標籤,id是divbox加入CSS
 $('#divbox').css({'margin-top':margin_top,'margin-left':margin_left});
    });
</script>
</head>
<body>
<!--class="BOX"會套用CSS的.BOX-->
<div class="BOX" id="divbox">
    <h1 style=" text-align:center;">
    目前網頁未開放<br />
    Current page is not open.
    </h1>
</div>
</body>
</html>

2013年7月23日 星期二

ASP.NET、HTML 限制TextBox輸入的資料

重點紀錄與整理:實作TextBox限制使用者只能輸入英文及數字符號、限制使用者不能剪下複製貼上、運用css限制TextBox使輸入法失效。

Default5.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default5.aspx.vb" Inherits="Default5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery-2.0.1.min.js"></script>
<script>
$(function () {
$('#TextBox1').bind('cut copy paste', function (e) {
e.preventDefault(); //取消動作
alert('禁止剪下複製貼上');
});
$('#Html_TextBox').bind('cut copy paste', function(e) {
    e.preventDefault(); //取消動作
    alert('禁止剪下複製貼上');
});
});
</script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        實作TextBox限制只能輸入英文及數字符號、限制使用者不能剪下複製貼上、運用css限制TextBox使輸入法失效<br />
        以下為ASP.NET TextBox控制項<br />
        <asp:TextBox ID="TextBox1" runat="server" Height="110px" style="ime-mode:Disabled;"
            TextMode="MultiLine" Width="276px"></asp:TextBox><br />
        以下為HTML TextBox多行輸入控制項<br />
        <textarea rows="10" style="width: 271px;ime-mode:Disabled;" id="Html_TextBox" onkeyup="value=value.replace(/^a-zA-Z0-9/)"></textarea>
        <asp:Button ID="Button2" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

Default5.aspx.vb
Partial Class Default5
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '為ASP.NET TextBox控制項加入客戶端onkeyup事件用運javascript的replace函式搭配正規表示式來限制使用者輸入的資料
        TextBox1.Attributes("onkeyup") = "value=value.replace(/^a-zA-Z0-9/)"
    End Sub

End Class

說明
1. style="ime-mode:Disabled;" 利用CSS來限制使用者僅能輸入英文和數字及符號;其實在程式碼當中也有寫到JavaScript語法的replace函式來限制使用者僅能輸入英文和數字及符號,在這裡就看您想用哪一種方法來限制使用者所輸入的資料

資料來源:
[jQuery] TextBox中禁止剪下複製貼上
輕鬆解決網頁只能輸入英數字的問題

2013年7月6日 星期六

ASP.NET 利用JQuery設定控制項選取項目、啟用、隱藏

有時候我們可能在寫程式時會寫到SQL查詢功能,又或者會寫到表單的填寫,在網頁上都會有一些像是DropDownList(下拉式選單)控制項,當我選了某一個項目時就會啟用另外一個控制項,通常為了達到這樣的效果,都會去設定DropDownList控制項的AutoPostBack屬性,這時當我選取下拉式選單的項目時,就會去啟用另外一個控制項,就會照成頁面的刷新,如果不想要讓頁面刷新,那你就必須再使用ajax控制項的UpdatePanel,來達成非同步的更新。如果不想要這麼作,那還有另外一個方法就是在網頁上寫JavaScript、JQuery等語法來完成。

功能敘述:當我選取DDL1下拉式選單時,就會啟用另外一個DDL2下拉式選單,當我又選取DDL2的學生姓名選項時,又會去將隱藏起來的TextBox顯示出來,讓使用者進去條件的查詢。

前置作業:
1.先新增一個網頁名為:Default2.aspx

HTML:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-2.0.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DDL1" runat="server">
            <asp:ListItem Value="-1">請選擇查詢方式</asp:ListItem>
            <asp:ListItem Value="0">未測驗</asp:ListItem>
            <asp:ListItem Value="1">不合格者</asp:ListItem>
            <asp:ListItem Value="2">合格者</asp:ListItem>
        </asp:DropDownList>&nbsp;
        <asp:DropDownList ID="DDL2" runat="server" Enabled="false">
            <asp:ListItem Value="-1">全部</asp:ListItem>
            <asp:ListItem Value="0">學生姓名</asp:ListItem>
        </asp:DropDownList>&nbsp;
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="查詢" Enabled="false"/>
    </div>
    </form>
</body>
</html>

後置程式碼:
Imports System.Text
Partial Class Default2
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim str_js As New StringBuilder

        str_js.Append("$(document).ready(function(){")
        str_js.Append("$('#" & TextBox1.ClientID & "').hide();")
        str_js.Append("$('#" & DDL1.ClientID & "').change(")
        str_js.Append("function(){")
        str_js.Append("var str_text=$('#" & DDL1.ClientID & "').find(':selected').text();") '取得被選擇項目的文字
        str_js.Append("var str_value=$('#" & DDL1.ClientID & "').find(':selected').val();") '取得被選擇項目的值
        'true停用,啟用它就設成false;再asp.net控制項則是相反enabled=true為啟用,enabled=false則不啟用
        str_js.Append("if(parseInt(str_value)==-1){$('#" & DDL2.ClientID & "').attr('disabled',true);" & _
                      "$('#" & DDL2.ClientID & "').find('option:eq(0)').attr('selected', true);" & _
                      "$('#" & Button1.ClientID & "').attr('disabled',true);" & _
                      "$('#" & TextBox1.ClientID & "').hide();" & _
                      "}else{$('#" & DDL2.ClientID & "').attr('disabled',false);" & _
                      "$('#" & Button1.ClientID & "').attr('disabled',false);}")
        str_js.Append("});")
        str_js.Append("$('#" & DDL2.ClientID & "').change(")
        str_js.Append("function(){")
        str_js.Append("var str_value2=$('#" & DDL2.ClientID & "').find(':selected').val();")
        str_js.Append("if(parseInt(str_value2)==-1){$('#" & TextBox1.ClientID & "').hide();" & _
                     "}else{$('#" & TextBox1.ClientID & "').show();}")
        str_js.Append("});")
        str_js.Append("});")

        If ScriptManager.GetCurrent(Page) Is Nothing Then
            '未啟用asp.net ajax功能
            '有些情況下會需要以動態的方式加入用戶端指令碼。 若要動態加入指令碼,請使用 RegisterClientScriptBlock 方法、RegisterClientScriptInclude 方法、RegisterStartupScript 方法或 RegisterOnSubmitStatement 方法,視您要加入指令碼的時間和方式而定。
            Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "Default2", str_js.ToString, True)
        Else
            '啟用asp.net ajax功能
            ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "Default2", str_js.ToString, True)
        End If
    End Sub
End Class

說明:
1. <script src="jquery-2.0.1.min.js"></script> 引用JQuery檔案,要引用才能撰寫JQuery
2.有人會發現,我將JQuery寫在後置程式碼裡,透過RegisterClientScriptBlock方法將撰寫好的JQuery直接插入到html裡(你可以按滑鼠右鍵→檢視原始檔,就會發現JQuery程式碼已經插入到html當中),就可以執行JQuery程式碼
其餘改日再補充...

2013年7月3日 星期三

ASP.NET 點選GridView中的Button,並取得該列(Row)的欄位值

如題,就是當我點選GridView中的Button時,我同時也要取得被我點選該列的欄位值。這樣的小技巧常會被用來更新資料或者當我按下按鈕時,切換畫面後並將GridView中的資料順便傳給下一個畫面...等技巧就看您怎麼去運用。這個問題去搜尋都找得到,自此我只是將經驗記錄下來。

前置作業:
1.準備好資料庫(待會要讓GridView顯示資料用)
以上準備好後,就跟在步驟做一遍吧~

步驟如下:
Step 1.紅色的部份請在GridView中加上
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataSourceID="SqlDataSource1">
            <Columns>
                <asp:TemplateField HeaderText="Button">
                    <ItemTemplate>
                        <asp:Button ID="Button1" runat="server" Text="Show 1" 
                           onclick="Button1_Click" />
                        <asp:Button ID="Button2" runat="server" Text="Show 2"  
                           CommandName="ShowData" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="test_id" HeaderText="test_id" InsertVisible="False"
                    ReadOnly="True" SortExpression="test_id" />
                <asp:BoundField DataField="test_name" HeaderText="test_name"
                    SortExpression="test_name" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [test_T]"></asp:SqlDataSource>

Step 2.因我將Button2的CommandName屬性設定了值,而這個值等同於GridView中按鈕的命令,當我按下時,則會去處發GridView中的RowCommand事件;而另外一個Button1則是普通的Click事件;我將針對著兩個Button做個別的程式撰寫,但效果都是一樣的。
..................
    Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
        If e.CommandName = "ShowData" Then
            Dim Bu1 As Button = CType(e.CommandSource, Button) '先取得命令的來源並轉換成按鈕
            Dim GV_Row As GridViewRow = CType(Bu1.NamingContainer, GridViewRow) '將Button轉換成GridViewRow就是您所點選的某一列

            MsgBox(CType(GV_Row.FindControl("Button2"), Button).ClientID & ";" & GV_Row.Cells(1).Text & ";" & GV_Row.Cells(2).Text)
        End If
    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim Bu2 As Button = CType(sender, Button) '直接將Button1_Click事件中的sender參數轉換成按鈕
        Dim GV_Row As GridViewRow = CType(Bu2.NamingContainer, GridViewRow) '將Button轉換成GridViewRow就是您所點選的某一列

        MsgBox(CType(GV_Row.FindControl("Button1"), Button).ClientID & ";" & GV_Row.Cells(1).Text & ";" & GV_Row.Cells(2).Text)
    End Sub
..................

執行結果:












說明:
1.MsgBox是在VB.NET裡才有的東西,如果想在網頁中顯示訊息框,那您得使用JavaScript等其他方法來顯示。
2.CType(GV_Row.FindControl("Button1"), Button).ClientID 這段的意思是我將抓到的Button1轉換成Button,轉換完後取得他的Client ID,有些控制項經過網頁編譯後他就不是程式碼中原本的ID。
3.那既然可以寫Button_Click事件裡,為什麼還要寫在GridView的RowCommand事件呢?
寫在RowCommand事件的好處就是,當你有為GridView設定CommandArgument屬性時,我就可以透過Dim str_pk As String = CStr(e.CommandArgument)這行程式碼很容易的取得資料表的主鍵

P.S如有錯誤請指正,要是有其他問題請自行搜尋。

2013年6月22日 星期六

ASP.NET 使用JQuery全部取消GridView中的CheckBox

如題,有些人有寫過ASP.NET的應該都會知道,也應該會想說我只要寫一個For迴圈再去抓GridView中的CheckBox就可以了,但當你剛開始接觸JQuery(初學者)時,你可能會想說我何不透過JQuery去抓GirdView中的CheckBox呢?
我是這麼想的...直接抓全部的 input再取得類型(type)是CheckBox把它取消就可以了,這樣的好處是我不用再寫For迴圈去一個一個抓CheckBox控制項,也能輕易的抓到全部的CheckBox囉

如何實做,請看程式碼,並請實際操作...程式碼如下:

Default.aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery-2.0.1.min.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="全部取消" />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
            DataSourceID="SqlDataSource1">
            <Columns>
                <asp:TemplateField HeaderText="CheckBox">
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="test_id" HeaderText="test_id" InsertVisible="False"
                    ReadOnly="True" SortExpression="test_id" />
                <asp:BoundField DataField="test_name" HeaderText="test_name"
                    SortExpression="test_name" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [test_T]"></asp:SqlDataSource>
   
    </div>
    </form>
</body>
</html>

Default2.aspx.vb:
Imports System.Text
Partial Class Default2
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim str_js As New StringBuilder
        str_js.Append("function CB_CFalse(){")
        str_js.Append("$('input[type=checkbox]:checked').each(function () {")
        str_js.Append("$(this).attr('checked', false);")
        str_js.Append("})")
        str_js.Append("}")
        Button1.Attributes("onclick") = "CB_CFalse();"
        '假如未啟用asp.net ajax功能
        If ScriptManager.GetCurrent(Page) Is Nothing Then
            '有些情況下會需要以動態的方式加入用戶端指令碼。
            '若要動態加入指令碼,請使用 RegisterClientScriptBlock 方法、RegisterClientScriptInclude 方法、RegisterStartupScript 方法或 RegisterOnSubmitStatement 方法,視您要加入指令碼的時間和方式而定。
            'RegisterStartupScript方法會在最後面插入javascript程式碼
            Page.ClientScript.RegisterStartupScript(Me.GetType(), "wjs2", str_js.ToString, True)
        Else
            '否則有啟用asp.net ajax功能
            ScriptManager.RegisterStartupScript(Me, Me.GetType(), "wjs2", str_js.ToString, True)
        End If
    End Sub
End Class

說明:
1.<script src="jquery-2.0.1.min.js"></script>特別注意紅色標起來的這一行,您必須去JQuery的官方網站下載檔案,這個檔案有分版本,請自行下載。
2.$('input[type=checkbox]:checked').each  $為JQuery的簡易寫法,括號內的input就是抓html的input,type=checkbox就是抓input屬於checkbox的類型,運用each去抓每一個chekcbox
3.$(this).attr('checked', false);  this就是目前的checkbox,去設定checked=false

以上如有說明錯誤請指點,感謝...



ASP.NET DropDownList下拉式選單運用JavaScript變更Label值

如題...

Default.aspx:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    請選擇身份:
       <asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem Value="0">請選擇身份</asp:ListItem>
                    <asp:ListItem Value="1">學生</asp:ListItem>
                    <asp:ListItem Value="2">管理者</asp:ListItem>
       </asp:DropDownList><br />
        <asp:Label ID="Label1" runat="server" Text="您的身分是..."></asp:Label>
        <asp:Label ID="Label2" runat="server" ></asp:Label>
    </div>
    </form>
</body>
</html>


Default.aspx.vb:
Imports System.Text
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim str_js As New StringBuilder
        str_js.Append("function TC(){")
        'ClientID是為了取得經過編譯後的DropDownList1控制項ID
        str_js.Append("var ddl = document.getElementById('" & DropDownList1.ClientID & "');")
        str_js.Append("var lab = document.getElementById('" & Label2.ClientID & "');")
        str_js.Append("switch(ddl.selectedIndex){")
        str_js.Append("case 1:")
        str_js.Append("lab.innerHTML='學生';")
        str_js.Append("break;")
        str_js.Append("case 2:")
        str_js.Append("lab.innerHTML='管理者';")
        str_js.Append("break;")
        str_js.Append("default:")
        str_js.Append("lab.innerHTML='';")
        str_js.Append("}}")
        DropDownList1.Attributes("onchange") = "TC();"
        '假如未啟用asp.net ajax功能
        If ScriptManager.GetCurrent(Page) Is Nothing Then
            '有些情況下會需要以動態的方式加入用戶端指令碼。
            '若要動態加入指令碼,請使用 RegisterClientScriptBlock 方法、RegisterClientScriptInclude 方法、RegisterStartupScript 方法或 RegisterOnSubmitStatement 方法,視您要加入指令碼的時間和方式而定。
            'RegisterStartupScript方法會在最後面插入javascript程式碼
            Page.ClientScript.RegisterStartupScript(Me.GetType(), "wjs2", str_js.ToString, True)
        Else
            '否則有啟用asp.net ajax功能
            ScriptManager.RegisterStartupScript(Me, Me.GetType(), "wjs2", str_js.ToString, True)
        End If
    End Sub
End Class

執行結果如下:







請自行操作體驗...

2013年5月4日 星期六

PHP 取得mysql資料庫中的資料



前置作業:
1.新增 db_mysql.ini.php 檔案
   新增 test_db.php 檔案
2.需要有mysql資料庫,並新增一個資料表,如下:




P.S上圖為測試資料,如有冒犯請告知...

程式碼:(解釋都在註解裡)
 db_mysql.ini.php:

<?php
  /**
  Step 1.mysql_connect(伺服器位置,帳號,密碼) 連線資料庫伺服器
  因資料庫在自己的電腦裡而mysql資料庫使用的port是3306,所以伺服器位置值接填入localhost:3306
  */
  if (! mysql_connect('localhost:3306','root','root')){
    //die中斷程式執行
    die('無法連線資料庫伺服器');
  }
  //Step 2.設定連線編碼為UTF8,如果您的資料庫字元集不是UTF8請自行更改
  mysql_query('SET NAMES utf8');
  //Step 3.選擇資料庫
  if (!@mysql_select_db('itn')){
    die('無法使用資料庫');
  }
  echo 'DB inc End...<br />開始準備輸出資料....<br />';
?>

test_db.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>取得mysql資料庫中的資料</title>
</head>
<body>
<?php
  //Step 1.引用db_mysql.inc.php檔,當引用後會去執行db_mysql.inc.php檔中所有程式碼
  include('db_mysql.inc.php');
  //執行sql指令,如查詢資料表
  $result=mysql_query('select * from users'); //執行sql指令;
  $row_total=mysql_num_rows($result);//取得資料表資料列數
  $fields=mysql_num_fields($result);//取得資料表欄位數

  //取資料表欄位名稱
  for ($x=0;$x<($fields);$x++){
    $meta=mysql_fetch_field($result);//取得欄位資訊,使用mysql_fetch_field函數目的要取得資料表欄位名稱
    $fields_name[$x]=$meta->name; //將欄位名稱儲存到$fields_name陣列
  }
  echo "<br/>筆數=$row_total;欄位數=$fields<br />";

  //先將資料存入二維資料表
  for ($y=0;$y<($row_total);$y++){
    $row=mysql_fetch_array($result);
    $db_data[$y]=$row;
  }

  //輸出資料
  echo '<table border="1">';
  for ($y=-1;$y<($row_total);$y++){
    echo '<tr>';
    for ($x=0;$x<($fields);$x++){
 //假如y等於-1就先輸出資料表欄位名稱
 if ($y==-1){
   echo '<td align="center">'.$fields_name[$x].'</td>';
 }else{
   echo '<td align="center">'.$db_data[$y][$x].'</td>';
 }
}
echo '</tr>';
  }
  echo '</table>';
?>
</body>
</html>

輸出結果:



2013年2月28日 星期四

Android點選ListView中的Item並呈現選取狀態

執行結果:
















參考資料:
ListView之一:Adapter介紹與使用 (請先參考此篇並進行實作)
[Android]ListView item被選擇時可以變換背景(在此篇有提到在觸碰模式下(Touch Mode)下是沒有selection state)

程式碼:
...........省略,請先參考參考資料中的資料...........
ListView lv = getListView();
lv.setOnItemClickListener(new OnItemClickListener(){
        View view2; //保存點選的View
        int select_item=-1; //一開始未選擇任何一個item所以為-1
        public void onItemClick(AdapterView<?> parent, View view,int position, long id){
                                         
                //======================
                //點選某個item並呈現被選取的狀態
                if ((select_item == -1) || (select_item==position)){
                        view.setBackgroundColor(Color.YELLOW); //View加上選取效果
                }else{
                        view2.setBackgroundDrawable(null); //將上一次點選的View保存在view2
                        view.setBackgroundColor(Color.YELLOW); //View加上選取效果
                }
                view2=view; //保存點選的View
                select_item=position;//保存目前的View位置
                //======================
        }
                       
}
);
...........省略,請先參考參考資料中的資料...........