分享：aspx页面javascript的几个trick

来源：互联网发布：html5动画软件编辑：程序博客网时间：2024/04/29 21:10

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 onclick="fcn1(this);">...
而在在.net framework 1.0中，将解析成
<span onclick="fcn1(this);"><input type=radio id=rbt>...</span>
注意到，fcn1中，参数this对应的对象就不同了。这是一个细微的差别。

2、而对于html control，需要多做一点事情。

　　在设计aspx 页面的时候，从工具栏拖一个web form control，比如说，textbox到页面，会发生两件事：
　　　　一、aspx 页面多一句
<asp:textbox id="textbox1" style="..." 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 style="..." 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" 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=true的webcontrol实现postback，原理是这样的：

　　　　一、如果此aspx 页面有autopostback=true的webcontrol，那么会写下面一段javascript语句定义一个叫__dopostback的javascript函数。

　　　　二、例如是上面的dropdownlist，将会render成：
<select name="dropdownlist1" onchange="__dopostback('dropdownlist1',')" language="javascript" id="dropdownlist1" style="...">
<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);
              }
            }
          }
        }
      }
    }
}
}

<<script type="text/javascript"></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>