各位兄弟们,这个问题在下昨晚终于研究出来了,主要问题出在于thickbox.js的工作原理上,请参见我的分析:
众所周知,asp.net 所有的控件必需放在有 runat="server"的form之内,而thickbox它所创建的层是嵌入在<body>中,从它代码可以看出来$("body").append(...),而当你在调用thickbox的时候,它会将你指定的元素的所有子元素移动到它定义的结构里面,这样的话就出问题了,移动后的元素将不在<form runat="sever"></form>中,那么指定元素里的所有服务器控件都将无法执行后台代码。
这就是根本的原因,口说无凭,上代码:
为了解决这个问题,我将thickbox.js做了一点改写
[code=C#]
//这部分是处理内嵌元素如div得层
if(url.indexOf('TB_inline') != -1){
$("#TB_ajaxContent").append($('#' + params['inlineId']).children());
$("#TB_window").unload(function () {
$('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
//
var w = window.open(""); //我在unload事件中加了这么一段,在thickbox层关闭的时候
w.document.write($("body").html()) //可以看到及时的html代码,便于分析。
/
});
tb_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
[/code]
之后我将我试验的页面调用thickbox层前后代码做了一下对比,问题马上就显露出来了。
这是没调用thickbox前的页面代码:
[code=HTML]
<body>
<form name="form1" method="post" action="test.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUyOTk4NzMzNGRkXZ2aBMh7Y3LqGDuOzjGe78hKwqM=" />
</div>
<a class="thickbox" href="#TB_inline?height=250&width=300&inlineId=addition">点击</a>
<div id="addition" style="padding: 10px;">
<!-- 服务器控件在 form1 中 -->
<input type="submit" name="Button1" value="Button" id="Button1" />
<span id="additionmsg"></span>
</div>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLg1uzeBwKM54rGBv4IX/cq3uLngRgxs8TJaKHpiJpW" />
</form>
</body>
[/code]
这是调用thickbox后的代码:
[code=HTML]
<body>
<form name="form1" method="post" action="test.aspx" id="form1">
<div>
<input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTUyOTk4NzMzNGRkXZ2aBMh7Y3LqGDuOzjGe78hKwqM=" type="hidden">
</div>
<a class="thickbox" href="#TB_inline?height=250&width=300&inlineId=addition">点击</a>
<div id="addition" style="padding: 10px;">
<input name="Button1" value="Button" id="Button1" type="submit"><span id="additionmsg"></span></div>
<input name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLg1uzeBwKM54rGBv4IX/cq3uLngRgxs8TJaKHpiJpW" type="hidden">
</div></form>
<!--很显然这部分是thickbox添加的层,在调用的时候我的__div id="addition" style="padding: 10px;"__ 里的所有元素都将被添加到这儿来,而这部分是在form之外的,从而导致服务器控件失效。-->
<div class="TB_overlayBG" id="TB_overlay"></div><div style="margin-left: -165px; width: 330px; margin-top: -145px; display: none;" id="TB_window"><div id="TB_title"><div id="TB_ajaxWindowTitle"></div><div id="TB_closeAjaxWindow"><a href="#" id="TB_closeWindowButton">close</a></div></div><div id="TB_ajaxContent" style="width: 300px; height: 245px;"></div></div></div>
</body>
[/code]
原因找到了,如何解决呢,只需要吧thickbox里的$("body").append()改为$("#selector").append(),这个#selector只要在form1之中,或者将$("body").append()改为$("body form").append()或者$("body").find("form").append()大概就这意思,写法很多。问题得到圆满的解决,而且在FF IE6中均显示正常……
[powerby:xymbtc]