分享：aspx页面&#106avascript的几个trick
2024-05-04 11:06:23
供稿：网友
1、一般而言，如果想给aspx页面上的web form control加上一些javascript的特性，可以用attributes.add来实现。
例如，对textbox txt，可以：
txt.attributes.add("onclick", "fcn0();");
那么，在web页面上click它的时候，就会调用fcn0这个javascript函数。
1.1、例外的情况是，对于ide无法辨认的属性的解析。
比如对一个radiobutton rbt，ide不能辨认onclick这个属性，那么，类似上面的语句，
rbt.attributes.add("onclick", "fcn1(this);");
在.net framework 1.1中，将解析成
<input type=radio id=rbt >...
而在在.net framework 1.0中，将解析成
<span ><input type=radio id=rbt>...</span>
注意到，fcn1中，参数this对应的对象就不同了。这是一个细微的差别。
2、而对于html control，需要多做一点事情。
在设计aspx页面的时候，从工具栏拖一个web form control，比如说，textbox到页面，会发生两件事：
一、aspx页面多一句
<asp:textbox id="textbox1" runat="server" width="102px" height="25px"></asp:textbox>
二、code behind多一句
protected system.web.ui.webcontrols.textbox textbox1;
如果是html control，那么，第一句中，runat="server"不会出现，而第二局不会被自动添加。
因此，如果要访问html control，需要
一、aspx页面的语句中添加runat="server"属性，成为
<input type="text" size="9" id="htxt" runat="server">
二、code behind中显示的声明
protected 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是
public 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>
<head>
<title>webform2</title>
<meta name="generator" content="microsoft visual studio 7.0">
<meta name="code_language" content="c#">
<meta name="vs_defaultclientscript" content="javascript">
<meta name="vs_targetschema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language="javascript">
function fcn1()
{
prompt("hi", "fcn1");
}
</script>
</head>
<body ms_positioning="gridlayout">
<form id="webform2" method="post" runat="server" onsubmit="fcn1();">
<asp:button id="button1" runat="server" width="86px" height="29px" text="button"></asp:button>
<asp:dropdownlist id="dropdownlist1" 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=true的webcontrol实现postback，原理是这样的：
一、如果此aspx页面有autopostback=true的webcontrol，那么会写下面一段javascript语句定义一个叫__dopostback的javascript函数。
<script language="javascript">
<!--
function __dopostback(eventtarget, eventargument) {
var theform;
if (window.navigator.appname.tolowercase().indexof("netscape") > -1) {
theform = document.forms["webform2"];
}
else {
theform = document.webform2;
}
theform.__eventtarget.value = eventtarget.split("$").join(":");
theform.__eventargument.value = eventargument;
theform.submit();
}
// -->
</script>
二、例如是上面的dropdownlist，将会render成：
<select name="dropdownlist1" onchange="__dopostback('dropdownlist1','')" language="javascript" id="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的reference里加入这个dll，然后在web.config中加上一段
<httpmodules>
<add type="devhawk.web.submitfirefixupmodule,submitfirefixupmodule" name="submitfirefixupmodule" />
</httpmodules>
就可以了。
3、一个应用。
常常听到抱怨，说如果在browser端用javascript改动了某个<select>元素，那么，它对应的server端的dropdownlist不能得知这个更新。
这种情况可能出现在“级联”的dropdownlist中，比如第一个dropdownlist是省份，第二个是城市；也可能出现在，从第一个dropdownlist选择某些项加入到第二个dropdownlist中。
对此使用以上的技术，我做了一个这样的解决方案（类似于viewstate的方法）：
一、我定义了一个长宽都是0的textbox txtwrap，并把所有我想处理的dropdownlist都加上athososw="true" 这样的属性，准备处理。
二、参照上面2.2的内容，我加入了submitfirefixupmodule，来保证触发form的onsubmit事件。
三、form的onsubmit事件将执行javascript函数fcnathosonsubmitwrap，它将遍历athososw属性为true的dropdownlist，记下数据，最后合并起来放到txtwrap里，其实这就是一个序列化的过程。代码如下：
function fcnathosonsubmitwrap()
{
txtwrap = document.all["txtwrap"];
var i;
var strwrap = '';
for(i=0;i<document.all.length;i++)
{
ctrl = document.all[i];
if(ctrl.tagname.touppercase() == 'select' && typeof(ctrl.athososw) != 'undefined' )
{
if(ctrl.athososw.touppercase() == 'true')
{
strwrap += fcnathoswrapselect(ctrl) + '&&&';
}
}
}
if(strwrap.length>3)
txtwrap.value = strwrap.substring(0, strwrap.length-3);
};
//athososw
function fcnathoswrapselect(ctrlselect)
{
var i;
var strwrapselect = ctrlselect.id + '&' + ctrlselect.tagname;
var strvalue='';
var strtext='';
for(i=0; i<ctrlselect.options.length; i++)
{
strvalue = ctrlselect.options[i].value;
strtext = ctrlselect.options[i].text;
strwrapselect += '&&' + i + '&' + strvalue.replace(/&/g, '%26') + '&' + strtext.replace(/&/g, '%26');
};
return strwrapselect;
};
四、form的page_load中调用clscommon.unwrapcontrol(this, txtwrap.text);来反序列化。clscommon是我的工具类，unwrapcontrol方法代码如下：
static public void unwrapcontrol(system.web.ui.page pgunwrap, string strunwrap)
{
regex r3 = new regex("(&&&)"); // split on hyphens.
regex r2 = new regex("(&&)"); // split on hyphens.
regex r1 = new regex("(&)"); // split on hyphens.
string[] sa3, sa2, sa1;
string s3, s2, s1;
int i3, i2, i1;
string strid, strtagname;
system.web.ui.control ctrlunwrap;
dropdownlist ddlunwrap;
listitem liadd;
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];
strtagname = sa1[2];
ctrlunwrap = pgunwrap.findcontrol(strid);
if(ctrlunwrap !=null)
{
if(strtagname == "select")
{
ddlunwrap = (dropdownlist)ctrlunwrap;
ddlunwrap.items.clear();
for(i2=1; i2 < (sa2.length+1)/2;i2++)
{
s1 = sa2[i2*2];
sa1 = r1.split(s1);
liadd = new system.web.ui.webcontrols.listitem(sa1[4],sa1[2]);
ddlunwrap.items.add(liadd);
}
}
}
}
}
}
}
}
athossmth版权所有，转载请注明。
