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

2009年2月24日 星期二

Include external Jascript file and CSS style sheet 


Include 外部 Javascript檔
重點: (1)script標籤要有close tag!
     (2)使用"src"屬性而"非href"!!!


   <script type="text/javascript" src="../Script/TreeView.js"></script>


InInclude 外部 CSS檔
重點: (1)link標籤不需close tag!
     (2)使用"href"屬性!!!


   <link rel=stylesheet type="text/css" href="../CssStyle/UserControl.css"/>
張貼者： felix 於 晚上7:54 0 意見
標籤： , ,

2009年2月12日 星期四

Ajax UpdatePannel注意事項

在 ASP.NET 2.0 預設實現 AJAX 有二種方式，一種是 CallBack 機制，另一種是 ASP.NET AJAX 的 UpdatePanel。只要是在 UpdatePanel 中的控制項，它需要在執行 AJAX 非同步更新時維護所有子控制項的狀態，所以需傳遞更多的資訊。如果沒有傳輸量的問題，UpdatePanel 無疑是實現 AJAX 的完美機制。[參考ASP.NET魔法學苑]。因為它讓畫面看起來不會Full PostBack，讓操作者感覺互動效果與使用一般應用程式相同。但是如果你在aspx頁面寫了JavaScript code要讓畫面onLoad時觸發執行，不論你是寫在body標籤的onLoad屬性或者寫成這樣:

<html>
<head>
  <script type="text/javascript">
      function alwaysDo( ) {
            alert("hello!");
      }
     
      alwaysDo( );
  </script>
</head>

<body>
   .......
</body>
</html>

都只會讓alwaysDo()在第一次載入網頁時才會執行
之後的互動都不會觸發!
理由很簡單,因為畫面無Full PostBack所以瀏覽器始終存在第一次進來時的內容(HTML source code)
那如果這樣做呢?

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
     Me.ClientScript.RegisterStartupScript(GetType(Page), "", "alert('hello!');", True)
  End Sub

看起來好像可以
因為RegisterStartupScript()就是在頁面註冊一段"當頁面載入後可立即執行的Script"
不過,遇到UpdatePannel還是沒輒
實際上,不論是RegisterStartupScript()或其他ClientScriptManager的Shared Method設計用意
是希望讓開發人員在後端"動態"加入Script到頁面中
當畫面載入瀏覽器後,我們用[檢視原始碼]的功能都可以看到被我們註冊的Script
但是,遇到UpdatePannel,因為頁面根本沒刷新
它回到後端後只是利用Ajax的CallBack技巧把要更改的內容置換掉
(雖然看起來畫面有變,實際上它的原始碼根本沒變,與第一次進來時相同!)
除非拿掉UpdatePannel,這樣頁面每次都可以"徹底"刷新,Script才有機會執行!
幸好,微軟發現這個問題了
在.Net Framework 2.0之後
只要有用到UpdatePannel的畫面
請用ScriptManager取代ClientScriptManager,例如:

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
     ScriptManager.RegisterStartupScript(Me.Page,GetType(Page), "", "alert('hello!');", True)
  End Sub
張貼者： felix 於 下午5:09 0 意見
標籤： , , ,

2008年12月22日 星期一

前端Script呼叫後端事件處理函式

__doPostBack(TargetObjID,EventArgs)是Asp.net轉成html code會自動加進來的script function
目的在於驅動後端處理函式動作
例如
__doPostBack("Btn1","");

就會馬上執行Btn1.Click的事件處理函式
事實上，Asp.Net元件幾乎都是利用這種方式postBack
我們可以這樣做:
拉一個DropDownList到畫面，
然後把AutoPostBack打開
執行網頁後再看看它的原始碼:


<form name="form1" method="post" action="testpage.aspx" id="form1">
<div>
  <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
  <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
  <input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
</div>
 <script type="text/javascript">
 //<![CDATA[
  var theForm = document.forms['form1'];
  if (!theForm) {
    theForm = document.form1;
  }

  function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
  }
 //]]>
 </script>
 <select name="DropDownList1" onchange="javascript:setTimeout('__doPostBack(\'DropDownList1\',\'\')', 0)" id="DropDownList1"></select>
</form>

提醒一下：doPostBack前面的底線是"兩條"，只打一條會出錯的!
還有,如果兩個參數都是空字串""
那PostBack回去就只會做Page_Load()
張貼者： felix 於 晚上9:26 0 意見
標籤： , ,

2008年11月5日 星期三

在Web環境下快速彈出新視窗

傳統彈出新視窗的作法
都是用Javascript的window.open()method
但是它反應時間還蠻慢的
其實如果客戶的標準瀏覽器是IE
我們可以改用window.showModalDialog() or window.showModelessDialog()
兩個function的差別是showModalDialog() 彈出的視窗沒關掉前不能操作主畫面(類似對話框alert)

語法:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
(1)vReturnValue: 子視窗的傳回值
(2)sURL: 子視窗的URL (必要項)
(3)vArguments: 傳入子視窗的參數(非必要)
(4)sFeatures: 視窗外觀屬性(字串型別)

舉個例子:
在主畫面TextBox填入值，按下送出按鈕把值傳到彈出的子畫面的TextBox中，同樣的，在子畫面也可以傳回值給主畫面。

主畫面的script:

        function OpenNewWindow() {
          var returnObj
          var passingValue=document.getElementById('PareText1').value;
          
          //開啟子畫面傳入本身視窗
           returnObj=window.showModalDialog("PopWindow.aspx",self,'dialogHeight:100px;');
         //讀取子畫面的回傳並填入母畫面
          document.getElementById('PareText2').value=returnObj.returnValue;
        }

子畫面的Script:

       //來自母畫面的參數
        var Parent=window.dialogArguments;
       //要回傳的參數
        var returnObj=Object();
        
        //讀取母畫面的參數並塞值
        document.getElementById('ChilText1').value=Parent.document.getElementById('PareText1').value;

       function ReturnToParent() {
         //把值腮入欲傳回的Object
         //把Object傳回母畫面
          returnObj.returnValue=document.getElementById('ChilText2').value;
         window.returnValue=returnObj;
         window.close();
       }

說明:
1. window.dialogArguments是當呼叫showModalDialog()有傳入參數時才有值..(即"self")
2. var returnObj=Object();是Javascript宣告物件的語法，宣告之後就可以指定屬性值
如:returnObj.returnValue=document.getElementById('ChilText2').value;
3. window.returnValue就是指定showModalDialog()的傳回值
張貼者： felix 於 下午4:44 0 意見
標籤： ,

2008年10月29日 星期三

getElementsByTagName vs. getElementsByName

上一篇"多個RadioButtonList設為相同Group"裡面有用到getElementsByTagName
有人會說既然有把name(即paramOldName)傳入，何不直接使用getElementsByName
就不需要多這個判斷式
 
  if(ObjArray[i].type == "radio" && ObjArray[i].name == paramOldName)


這裡說一下理由 (這部份要感謝昌琰)
因為getElementsByName找到的Object只能改name以外的屬性!!
我試過了連ID也可以改，就是只有name不能被修改
所以只好用getElementsByTagName收集大範圍的物件，再透過if判斷式過濾
By Felix
張貼者： ICSC K32's Tech Forum 於 凌晨12:31 0 意見
標籤： , ,

2008年10月28日 星期二

把多個RadioButtonList設為相同Group

問題: 如果頁面上有多組RadioButtonList，要做到這幾組RadioButtonList間都只能單選，例如:
50cc機車 125cc機車 150cc以上機車

休旅車 跑車 房車

如果上下兩排各是一個RadioButtonList如何讓他們都屬與同一group
當然，我們可以只用html的radio button做到，只要name屬性設為一樣。但是如果想透過程式動態產生那些選項，RadioButtonList還蠻好用的。可惜它沒有name or groupname這個property可用!

我的作法是做一個含RadioButtonList的UserControl:

 Partial Class UCRadioBtnList
       Inherits System.Web.UI.UserControl

   Private _GroupName As String

   '提供設定RadioButton項目
    Public WriteOnly Property Items() As String()
      Set(ByVal value As String())
        Dim ItemTemp As ListItem
        
        For Each v As String In value
           ItemTemp = New ListItem(v)
           Me.RadioButtonList.Items.Add(ItemTemp)
        Next
     End Set End Property

   '提供設定RadioButtonList的RroupName
   Public Property GroupName() As String
     Get
       Return Me._GroupName
     End Get
     Set(ByVal value As String)
        Me._GroupName = value
        '把GropuName存在ViewState中，預防postback時消失
         If IsNothing(Me.ViewState("GroupName")) Then
          Me.ViewState("GroupName") = value
        End If
     End Set
   End Property

 '註冊一行會呼叫 function SetSameGroup( )的script到畫面
 Private Sub SetSameGroup()
   Dim StrScript As String

   StrScript = "SetSameGroup('" & Me.ClientID & "$RadioButtonList','" &
   Me.ViewState ("GroupName") & "');" & vbNewLine
   ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(),     Me.RadioButtonList.ClientID, StrScript, True)
 End Sub

 '畫面載入時都在註冊一次script(因為script在postback後就會自動消失)
 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   Me.SetSameGroup()
 End Sub

 End Class


//javascript


function SetSameGroup(paramOldName, paramGroupName) {
  var ObjArray = document.getElementsByTagName("Input");
  var StrTemp;
  for (i = 0; i < ObjArray.length; i++) {
    if(ObjArray[i].type == "radio" && ObjArray[i].name == paramOldName) {
      StrTemp = ObjArray[i].parentNode.innerHTML.replace(paramOldName,   paramGroupName); 
      ObjArray[i].parentNode.innerHTML = StrTemp;
    } 
  } 
}


使用這個UserControl的畫面的.vb檔

  Dim ArrayListSource1 As String() = {"aa", "bb", "cc", "dd"} 
  Dim ArrayListSource2 As String() = {"ee", "ff", "gg", "hh"}

  Me.UCRadioBtnList1.Items = ArrayListSource1 '加入選項
  Me.UCRadioBtnList2.Items = ArrayListSource2
  Me.UCRadioBtnList1.GroupName = "sss"        '設定GroupName
  Me.UCRadioBtnList2.GroupName = "sss"

By Felix
張貼者： ICSC K32's Tech Forum 於 凌晨12:44 0 意見
標籤： , ,
訂閱： 文章 (Atom)