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 οnclick="fcn1 thi ;">...
将解析成
而在 .net framework 1.0 中。
<span οnclick="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" οnsubmit="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" οnchange="__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 ;
}
}
}
}
}
}
}
1732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
