私人公開筆記本: JavaScript

顯示具有 JavaScript 標籤的文章。顯示所有文章

2017年6月14日星期三

ASP.NET input button使用javascript觸發postback

不使用ASP.NET WebForm Button控制項，使用html Button並在Button的onclick事件中，使用javascript觸發postback，在Page_Load中去確認哪一個按鈕觸發。

以下的作法，不曉得是否正確，還請各位程式設計師們不吝指教。

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function Button1_Click() {
<%=ClientScript.GetPostBackEventReference(Me, "Button1_Click").ToString%>
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="測試javascript觸發postback" onclick="Button1_Click();" />
<span id="span_message" runat="server">[訊息顯示在此處]</span>
</div>
</form>
</body>
</html>

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

Private Sub test_js_postback_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Else
Dim con As Control = Nothing
Dim str_event_target As String = String.Empty
Dim str_event_targument As String = String.Empty
str_event_target = Page.Request.Params.Get("__EVENTTARGET") 'html hidden __EVENTTARGET
str_event_targument = Page.Request.Params.Get("__EVENTARGUMENT") 'html hidden __EVENTARGUMENT

If (Not str_event_target Is Nothing) And (str_event_target <> "") Then
con = Page.FindControl(str_event_target)
Response.Write("EVENTTARGET=[" & str_event_target & "][" & con.GetType.ToString & "]<br/>")
If InStr(1, str_event_target.ToLower, "page", CompareMethod.Text) > 0 Then
If (Not str_event_targument Is Nothing) And (str_event_targument <> "") Then
Response.Write("EVENTARGUMENT=[" & str_event_targument & "]<br/>")
If str_event_targument = "Button1_Click" Then 'html input的Button1_Click
Me.span_message.InnerHtml = "觸發Button1_Click<br/>"
End If
Else
Response.Write("EVENTARGUMENT=[無]<br/>")
End If
End If

Else
Response.Write("PostBack:可能是某個控制項送出<br/>")
End If

End If
End Sub
End Class

2015年1月10日星期六

JavaScript VB.NET 修改html 標籤

參考資料：Regular expression 抓 HTML 標籤屬性與內容

說明：因有個需求必須從某個網頁，跨網域到某一台Server取資料，但資料的內容含有html標籤，而我又想要能針對a、img標籤可以正常顯示，因此運用字串搜尋的方式，將我想修改的標簽進行修改，主要的作法是搜尋到a標籤修改href、img標籤修改src。

如您有更好的寫法，請建議，謝謝。

ASP.NET-VB.NET語法版本：
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim str_cont As String = String.Empty
'假設str_cont是取得後的資料
str_cont = "附件：<a href=""/boardfile/file/osa/%E6%B4%BB%E5%8B%95%E8%AA%AA%E6%98%8E1031231.pdf"" target=""_blank"">活動說明</a>、<a href=""/boardfile/file/cc/%E5%AF%A6%E6%96%BD%E8%BE%A6%E6%B3%951030930.docx"" target=""_blank"">實施辦法</a><br/><img alt=""活動海報"" src=""/boardfile/file/cc/poster1031003.jpg"" width=""640"" height=""902"" border=""0"" title=""活動海報"" /><br/>" & _
"一、為推廣並落實資訊教育，以及展示政府推動行政電子化之成效，臺北市電腦商業同業公會結合國內相關公會共同組成資訊月活動委員會，規劃辦理103年資訊月全國巡迴展示活動。"
str_cont = funbody(str_cont, "<a(.*?)>(.*?)<\/a\s*>", "href=") 'a標籤
str_cont = funbody(str_cont, "<img(.*?)>", "src=") 'img標籤
Response.Write(str_cont)
End If
End Sub

Function funbody(ByVal cont As String, ByVal Regex_where As String, ByVal edit_pro As String) As String
Dim x1 As Integer = 0, str_temp1 As String = String.Empty, str_temp2 As String = String.Empty, str_path As String = String.Empty,
strhtml_tag As String = String.Empty, strhtml_pro As String = String.Empty, si1 As Integer = 0, si2 As Integer = 0, si3 As Integer = 0 ', str_path As String = String.Empty
Dim regex As Regex = New Regex(Regex_where) '"<a\s+([\s\S]*?)>([\s\S]*?)<\/a\s*>"
Do
x1 = regex.Match(cont).Index
If x1 = 0 Then
str_temp2 = fun_string1(str_temp2, cont)
Exit Do '如果找不到標籤就跳出
Else
str_temp1 = cont.Substring(0, x1) '如果使用Mid擷取字串,起始位置要設定在1,如:Mid(cont, 1, x1)
str_temp2 = fun_string1(str_temp2, str_temp1)
cont = cont.Replace(str_temp1, "")
End If
If regex.Match(cont).Groups.Count > 0 Then
strhtml_tag = regex.Match(cont).Groups(0).Value '標籤
strhtml_pro = regex.Match(cont).Groups(1).Value '屬性
cont = cont.Replace(strhtml_tag, "")

si1 = strhtml_pro.IndexOf(edit_pro)
si2 = (strhtml_pro.IndexOf(Chr(34), si1)) + 1 '第一個雙引號
si3 = strhtml_pro.IndexOf(Chr(34), si2) '第二個雙引號
str_path = strhtml_pro.Substring(si2, (si3 - si2)) '取得屬性值
'因跨網域取資料的關西,所以搜尋對方的boardfile資料夾,來判斷對方是上傳到自己的server
If str_path.IndexOf("/boardfile/") <> -1 Then
strhtml_tag = strhtml_tag.Replace(str_path, "http://????" + str_path) 'http://???? 請修改為你自己要替換的網址
End If
str_temp2 = fun_string1(str_temp2, strhtml_tag)
End If
Loop
Return str_temp2
End Function

Function fun_string1(ByVal ori_string As String, ByVal addstring As String) As String
If ori_string = "" Then
ori_string = addstring
Else
ori_string = ori_string & addstring
End If
Return ori_string
End Function

P.S 如果要清除所有Html標籤，可以寫成 Dim regex As Regex = New Regex("<[^>]*>")

JavaScript版本：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="No-cache" />
<title>Regular expression 抓 HTML 標籤屬性與內容</title>
<script type="text/javascript">
var r,str_cont;
//假設str_cont是取得後的資料
str_cont='附件：<a href="/boardfile/file/osa/%E6%B4%BB%E5%8B%95%E8%AA%AA%E6%98%8E1031231.pdf" target="_blank">活動說明</a>、<a href="/boardfile/file/cc/%E5%AF%A6%E6%96%BD%E8%BE%A6%E6%B3%951030930.docx" target="_blank">實施辦法</a><br/><img alt="活動海報" src="/boardfile/file/cc/poster1031003.jpg" width="640" height="902" border="0" title="活動海報" /><br/>一、為推廣並落實資訊教育，以及展示政府推動行政電子化之成效，臺北市電腦商業同業公會結合國內相關公會共同組成資訊月活動委員會，規劃辦理103年資訊月全國巡迴展示活動。';
r = /<a(.*?)>(.*?)<\/a\s*>/;
str_cont = funbody(str_cont,r,'href='); //a標籤
r = /<img(.*?)>/;
str_cont = funbody(str_cont,r,'src='); //img標籤
document.write(str_cont);
function funbody(cont,Regex_where,edit_pro){
var x1=0, str_temp1='', str_temp2='', str_path='', strhtml_tag='', strhtml_pro='', si1=0, si2=0, si3=0, arr;
while (true) {
x1=cont.search(Regex_where);
if(x1 == -1){
str_temp2 = fun_string1(str_temp2, cont);
break; //如果找不到a標籤就跳出
}else if (x1!=0){
str_temp1=cont.substring(0, x1); //第一次取出html標籤前的字串
str_temp2 = fun_string1(str_temp2, str_temp1);
cont=cont.replace(str_temp1,'');
};
arr = Regex_where.exec(cont);
if (arr != null){
strhtml_tag=arr[0];
strhtml_pro=arr[1];//屬性
cont=cont.replace(strhtml_tag,'');

si1=strhtml_pro.indexOf(edit_pro);
si2=(strhtml_pro.indexOf('"',si1))+1; //第一個雙引號
si3=strhtml_pro.indexOf('"',si2); //第二個雙引號
str_path=strhtml_pro.substring(si2, si3);
//因跨網域取資料的關西,所以搜尋對方的boardfile資料夾,來判斷對方是上傳到自己的server
if (str_path.indexOf('/boardfile/')!=-1){
//http://???? 請修改為你自己要替換的網址
strhtml_tag=strhtml_tag.replace(str_path,'http://????'+str_path);
};
str_temp2 = fun_string1(str_temp2, strhtml_tag);
};
};
return str_temp2;
};

function fun_string1(ori_string,addstring){
if (ori_string =='') {
ori_string = addstring;
}else{
ori_string = ori_string + addstring;
};
return ori_string;
};
</script>
</head>
<body >

</body>
</html>

2014年11月12日星期三

javascript 應用篇

2017/06/16
取代字串中所有的blue為red。
var str = "Mr Blue has a blue house and a blue car".replace(/blue/g, "red");
取代字串中所有的blue為red，不區分大小寫。
var str = "Mr Blue has a blue house and a blue car".replace(/blue/gi, "red");
(參考：JavaScript String replace() Method)

2017/06/13
字串轉數值時，須注意字串前面是不是多了個0，當字串的數字是08、09時，parseInt會把它當作八進制處理，但是08、09都是不正確的八進制，我們可以在parseInt再加上第二個參數，例如：parseInt("08",10)，告訴parseInt按照十進制處理，這樣就沒有問題了。
(參考：關于javascript中parseInt函數的一個所謂的bug)

2015/07/17
1. 全選checkbox。

<Script type="text/javascript">
function stcb(objcb){
  var checkboxs = document.getElementsByName('CB_Del'); 
  for(var x=0;x<checkboxs.length;x++){
    checkboxs[x].checked = objcb.checked;
  };
};
</Script>
<input type="checkbox" name="cb_total" id="cb1" onclick="stcb(this);" />
<label for="cb1" style=" font-size:10px;">全選</label>
<input type="checkbox" name="CB_Del" value="1">
<input type="checkbox" name="CB_Del" value="2">
<input type="checkbox" name="CB_Del" value="3">
<input type="checkbox" name="CB_Del" value="4">
<input type="checkbox" name="CB_Del" value="5">

2.變更form的action，並送出。

<Script type="text/javascript">
function but1_click(){
  document.f1.action='test.asp';
  document.f1.submit();
};
</Script>
....
<form name="f1" method="post">
<input name="but1" type="button" value="按鈕" onclick="but1_click();">
</form>
....

2015/05/20
1.變更link標籤的css檔
Step 1.首先再head標籤中引入css，id為cf1，如下：
<head>
...
<link rel="stylesheet" href="" id="cf1" />
...
</head>
Step 2.寫入下方的JavaScript，並呼叫它，即可修改CSS。
function change_css(){
var css = document.getElementById("cf1");
css.href = 'stylesheets/css1.css';
};

2.兩個日期時間相減，經過多少分鐘(取得經過多少毫秒轉分鐘)。
var d1=new Date("2015/05/19 19:18"); //假設登入時間
//getTime() 取得時間 (由 1970-01-01 00:00 到目前時間) 單位:(毫秒)
document.write('d1='+d1+' d1_num='+d1.getTime()+'<br/>');
var d2=new Date("2015/05/20 19:18"); //假設現在時間
document.write('d2='+d2+' d2_num='+d2.getTime()+'<br/>');
var num=d2.getTime()-d1.getTime(); //經過多少毫秒=目前時間(毫秒)-登入時間(毫秒)
document.write('num='+num+'<br/>');
//若要將毫秒數轉換為天數，請用 86,400,000 (1000 毫秒 x 60 秒 x 60 分鐘 x 24 小時) 除以毫秒數
document.write('毫秒轉分鐘='+(num/(1000*60))+'<br/>');

2015/03/30
1.按下按鈕出現請稍候訊息(請自行將ButtonFinish方法寫在Button的onclick事件中)
<script type="text/javascript">
var strpoint = '';
function rec() {
if (strpoint != '') {
if (strpoint.length <= 2) {
strpoint = strpoint + '.';
} else {
strpoint = '';
};
} else {
strpoint = '.';
};
$('#span1').html('訊息：請稍候' + strpoint);
setTimeout("rec();", 1000);
};
function ButtonFinish() {
setTimeout(function () { rec(); }, 500);
};
</script>

2014/11/13
1.判斷手機是否為瀏覽器或手機瀏覽
function checkerAgent() {
var flag = false;
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
flag = true;
} else {
//this is the browser
flag = false;
};
if (flag == true) {
document.location.href = './index1.html';
} else {
document.location.href = './index2.html';
};
};

2.倒數5秒鐘
var s1=5;
function rec() {
if (s1 != 0) {
$('#span1').text('倒數' + s1 + '秒'); //使用jquery設定span標籤
setTimeout("rec();", 1000);
s1 = s1 - 1;
} else {
$('#span1').text('時間到!!');
};
};

2014年11月10日星期一

javascript 驗證表單格式

利用JQuery 取得欄位值，在透過javascript驗證檢查資料格式是否正確
function check_form(conphone, email) {
var str_message='';
var reg, strtel, strEmail;
strtel = ($('#' + conphone).val()).trim(); strEmail = ($('#' + email).val()).trim();
reg =/^[A-Z]\d{9}$/; //身份證字號
reg = /(09[0-9]{2}-[0-9]{3}-[0-9]{3})|([0-9]{2}-[0-9]{6,8})$/;
if (reg.test(strtel) == false) {
str_message = f1(str_message, '聯絡電話格式錯誤，範例:0912-111-111或06-7211111');
};
reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
if (reg.test(strEmail) == false) {
str_message = f1(str_message, 'E-mail格式錯誤，範例:test@gmail.com');
};

if (str_message != '') {
alert(str_message);
return false;
};
return confirm("確定要送出嗎?");
};

function f1(str_mess, str_add) {
if (str_mess == '') { str_mess = str_add + '\n'; } else { str_mess = str_mess + str_add + '\n'; };
return str_mess;
};

2014年3月19日星期三

JavaScript 如何知道每個月的天數

參考資料：JavaScript實例判斷是否為正確日期格式

有時候我們會將使用者所輸入的日期作個比較，然後再來作進一步資料篩選的運用，但問題來了我怎麼知道每個月份的天數到底有多少天呢? 不管您是使用下拉式選單或輸入方塊(TextBox)讓使用者自行輸入，都會碰到這個問題。

以下是擷取參考資料裡的某段程式碼作修改，在此記錄下來

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="No-cache" />
<title>JavaScript日期應用</title>
</head>
<body>
<script>
var d = new Date();
document.write('今天日期是 ' + d.getFullYear()+ ' 年 ' + (d.getMonth()+1) + ' 月 ' + d.getDate() + ' 日 <br/>');
var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];//每個月的天數
for (var year=2000;year<=2030;year++){
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)){
iaMonthDays[1]=29; //有些年份的二月會是29天
document.write('<font color="Red">'+year+'年2月份天數為'+iaMonthDays[1]+'天</font><br/>');
}else{
iaMonthDays[1]=28;
document.write('<font color="Blue">'+year+'年2月份天數為'+iaMonthDays[1]+'天</font><br/>');
};
}
</script>
</body>
</html>

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 ' 空白符號
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年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年6月22日星期六

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

執行結果如下：

請自行操作體驗...

訂閱：文章 (Atom)

2017年6月14日 星期三

2015年1月10日 星期六

2014年11月12日 星期三

2014年11月10日 星期一

2014年3月19日 星期三

2013年9月24日 星期二

2013年7月23日 星期二

2013年6月22日 星期六