aspx頁面javascript的幾個trick
}
1 一般而言，例如。如果想給 aspx 頁面上的 web form control 加上一些 javascript 特性，可以用 Attributes.A dd 來實現。
對 TextBox txt 可以：
"fcn0 ;" txt.A ttributes.A dd "onclick".;
web 頁面上 click 時候，
那麼。就會調用 fcn0 這個 javascript 函數。
1.1 例外的情況是對於 IDE 無法識別的屬性的解析。
那麼，比如對一個 RadioButton rbt IDE 不能識別 onclick 這個屬性。類似上面的語句，
"fcn1 thi ;" rbt.A ttributes.A dd "onclick".;
將解析成
.net framework 1.1 中。
<input type=radio id=rbt onclick="fcn1 thi ;">...
將解析成
而在 .net framework 1.0 中。
<span onclick="fcn1 thi ;"><input type=radio id=rbt>...</span>
參數 thi 對應的對象就不同了這是一個細微的差異。 注意到 fcn1 中。
2 而對於 HTML control 需要多做一點事情。
從工具欄拖一個 web form control 比如說，設計 aspx 頁面的時候。 TextBox 頁面，會發生兩件事：
一、 aspx 頁面多一句
<asp:TextBox id="TextBox1" style="..." runat="server" Width="102px" Height="25px"></asp:TextBox>
二、 code behind 多一句
protect System.Web.UI.WebControls.TextBox TextBox1;
第一句中，如果是 html control 那麼。 runat="server" 不會出現，而第二局不會被自動添加。
如果要訪問 html control 需要 因此。
成爲 一、 aspx 頁面的語句中添加 runat="server" 屬性。
<INPUT style="..." type="text" size="9" id="htxt" runat="server">
二、 code behind 中顯示的聲明
protect System.Web.UI.HtmlControls.HtmlInputText htxt;
注意到第一句的 id 和第二句的變量名是相同的
2.1 注意到前面 System.Web.UI.WebControls.TextBox 對應的 html control System.Web.UI.HtmlControls.HtmlInputText 對應的 html tag <INPUT type="text">
相應的 html tag <body> 對應的 html control
publ System.Web.UI.HtmlControls.HtmlGenericControl myBody;
2.2 有一點例外的 html <form> tag 對應的 onsubmit 事件。看這樣一個 aspx 頁面
<%@ Page language="c#" Codebehind="WebForm2.aspx.cs" AutoEventWireup="false" Inherits="TestCs.WebForm2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEA D>
<title>WebForm2</title>
<meta name="GENERA TOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LA NGUA GE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="
http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function fcn1
{
"fcn1" prompt "hi".;
}
</script>
</HEA D>
<bodi MS_POSITIONING="GridLayout">
<form id="WebForm2" method="post" runat="server" onsubmit="fcn1 ;">
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 423px; POSITION: absolute; TOP: 83px" runat="server" Width="86px" Height="29px" Text="Button"></asp:Button>
<asp:DropDownList id="DropDownList1" style="Z-INDEX: 104; LEFT: 284px; POSITION: absolute; TOP: 163px" runat="server" Width="188px" Height="17px" AutoPostBack="True">
<asp:ListItem Value="a">a</asp:ListItem>
<asp:ListItem Value="b">b</asp:ListItem>
<asp:ListItem Value="c">c</asp:ListItem>
</asp:DropDownList>
</form>
</body>
</HTML>
定義了一個 javascript 函數 fcn1 放了一個 Button Button1 和一個 autopostback Dropdownlist DropDownList1 運行它可以看到點擊 Button1 會先執行 fcn1 然後 postback 而選擇 DropDownList1 不同選項，內容很簡單。將只會 postback 而不會觸發 fcn1
微軟 autopostback=tru webcontrol 實現 postback 原理是這樣的
一、如果此 aspx 頁面有 autopostback=tru webcontrol 那麼會寫下面一段 javascript 語句定義一個叫 __doPostBack javascript 函數。
<script language="javascript">
<!--
eventA rgu function __doPostBack eventTarget.{
var theform;
if window.navigator.appName.toLowerCas .indexOf "netscape" > -1 {
theform = document.forms["WebForm2"];
}
els {
theform = document.WebForm2;
}
theform.__EVENTTA RGET.valu = eventTarget.split "$" .join ":" ;
theform.__EVENTA RGUMENT.valu = eventA rgument;
theform.submit ;
}
// -->
</script>
二、例如是上面的 dropdownlist 將會 render 成：
'' " language="javascript" id="DropDownList1" style="..."><select name="DropDownList1" onchange="__doPostBack 'DropDownList1'.;
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
通過 javscript 調用 theform.submit ; 來 submit form postback 但是 theform.submit 將不會觸發 form onsubmit 事件！ 這樣。
這是微軟的一個 bug
使用的時候，解決的方法可以看這裏： http://www.devhawk.net/art_submitfirefixup.ashx 這裏提供了一個 dll 及源代碼。 project refer 里加入這個 dll 然後在 web.config 中加上一段
<httpModules>
SubmitFireFixupModule" name="SubmitFireFixupModule" /> <add type="DevHawk.Web.SubmitFireFixupModule.;
</httpModules>
就可以了
3 一個應用。
說如果在 Browser 端用 javascript 改動了某個 <select> 元素，經常聽到埋怨。那麼，對應的 Server 端的 DropDownList 不能得知這個更新。
比如第一個 DropDownList 省份，這種情況可能呈現在級聯 ” DropDownList 中。第二個是鄉村；也可能出現在從第一個 DropDownList 選擇某些項加入到第二個 DropDownList 中。
做了一個這樣的解決方案（類似於 ViewStat 方法） 對此使用以上的技術。
準備處置。 一、定義了一個長寬都是 0 TextBox txtWrap 並把所有我想處理的 DropDownList 都加上 AthosOsw="True" 這樣的屬性。
加入了 SubmitFireFixupModul 來保證觸發 form onsubmit 事件。 二、參照上面 2.2 內容。
最後合併起來放到 txtWrap 裏，三、 form onsubmit 事件將執行 javascript 函數 fcnA thosOnSubmitWrap 將遍歷 AthosOsw 屬性爲 True DropDownList 記下數據。其實這就是一個序列化的過程。代碼如下：
funct fcnA thosOnSubmitWrap
{
txtWrap = document.all["txtWrap"];
var i;
var strWrap = '';
for i=0;i<document.all.length;i++
{
ctrl = document.all[i];
if ctrl.tagName.toUpperCas == 'SELECT' && typeof ctrl.A thosOsw != 'undefined'
{
if ctrl.A thosOsw.toUpperCas == 'PUE'
{
strWrap += fcnA thosWrapSelect ctrl + '&&&';
}
}
}
if strWrap.length>3
strWrap.length-3 txtWrap.valu = strWrap.substr 0.;
};
//A thosOsw
function fcnA thosWrapSelect ctrlSelect
{
var i;
var strWrapSelect = ctrlSelect.id + '&' + ctrlSelect.tagName;
var strValue='';
var strText='';
for i=0; i<ctrlSelect.options.length; i++
{
strValu = ctrlSelect.options[i].value;
strText = ctrlSelect.options[i].text;
'%26' + '&' + strText.replac /&/g, strWrapSelect += '&&' + i + '&' + strValue.replac /&/g. '%26' ;
};
return strWrapSelect;
};
UnwrapControl 方法代碼如下： 四、 form Page_Load 中調用 clsCommon.UnwrapControl this, txtWrap.Text ; 來反序列化。 clsCommon 工具類。
String strUnwrap stat public void UnwrapControl System.Web.UI.Pag pgUnwrap.
{
Regex r3 = new Regex " &&& " ; // Split on hyphens.
Regex r2 = new Regex " && " ; // Split on hyphens.
Regex r1 = new Regex " & " ; // Split on hyphens.
sa2, String[] sa3. sa1;
s2, String s3. s1;
i2, int i3. i1;
strTagName String strId.;
System.Web.UI.Control ctrlUnwrap;
DropDownList ddlUnwrap;
ListItem liA dd;
s3 = strUnwrap;
sa3 = r3.Split s3 ;
for i3=0;i3< sa3.Length+1 /2;i3++
{
s2 = sa3[i3*2];
if s2.Length>0
{
sa2 = r2.Split s2 ;
if sa2.Length>1
{
s1 = sa2[0];
sa1 = r1.Split s1 ;
if sa1.Length==3
{
strId = sa1[0];
strTagNam = sa1[2];
ctrlUnwrap = pgUnwrap.FindControl strId ;
if ctrlUnwrap !=null
{
if strTagNam == "SELECT"
{
ddlUnwrap = DropDownList ctrlUnwrap;
ddlUnwrap.Items.Clear ;
for i2=1; i2 < sa2.Length+1 /2;i2++
{
s1 = sa2[i2*2];
sa1 = r1.Split s1 ;
sa1[2] liA dd = new System.Web.UI.WebControls.ListItem sa1[4].;
ddlUnwrap.Items.A dd liA dd ;
}
}
}
}
}
}
}