这一周还是在完善“证书管理”。我想,与其再接触其他的模块,不如多涉及一些东西,把这部分做细做好。
我彻底抛弃了ListView+DetailsView方式,选择了ThickBox(http://jquery.com/demo/thickbox/)。ThickBox的确很好用,用户体验好,也容易上手(我在之前,可是从没有写过JS代码滴~)。但在使用过程中,还是遇到了两点问题:1.Loading图片路径;2.貌似ThickBox仅支持链接,不支持onclick方法。
关于前者,官方说明如下:
Once you have included the .js files, open thickbox.js or thickbox-compressed.js and locate the tb_pathToImage variable at the top of the page. Once you have found it, make sure to change the value of tb_pathToImage to the path where the loadingAnimation.gif file is located on your own server
根据说明,是打开thickbox.js,修改tb_pathToImage路径即可。但是,我修改了thickbox.js中tb_pathToImage变量,将其设为loadingAnimation.gif相对于thickbox.js的相对路径,无用;后来,又将tb_pathToImage设为loadingAnimation.gif相对于调用thickbox.js aspx页面的相对路径,还是无用。姜sir在关键时刻告诉我,先把thickbox.js中设置loadingAnimation.gif路径的代码隐去,然后在每个调用thickbox.js的aspx页面中,添加
<script>var tb_pathToImage = "images/loadingAnimation.gif";</script>
当然,这个路径是该aspx页面与loadingAnimation.gif的相对路径。
之后,问题解决。
随后,我想实现,点击ListView中的一行,弹出ThickBox框显示详细信息。但在ListView的ItemTemplete,不支持html控件,也不支持<a>标签。我不禁感叹,如果ThickBox能支持tr的onclick方法,那就爽了。在多方求助下,我整理出以下解决办法:
1.旁门左道法
<html><body>
<table><a href="http://www.baidu.com"><tr><td>aa</td></tr></a>
<tr><td>bb</td></tr>
</table>
</body></html>
不晓得你看出来没有,table中的一行是嵌在<a>标签中,点击aa那一行,就可以跳转。这种写法并不规范,虽然以上在IE7上可以使用,但是不晓得会不会受浏览器的影响,况且我之前提过,我要实现的tr是在ListView中的,ItemTemplete不支持<a>标签,不然倒可以试一试。
2.模态框法
http://www.mylittlehelpdesk.com/forum/topic.asp?TOPIC_ID=252(姜sir帮我搜到滴~)
如:
function dotb(title, url)
{
$(document).ready(function(){ tb_show(title, url, null); });
}
<tr onclick="dotb('', 'CertificateUpdate.aspx?CertificateId=<%#Eval("CertificateId")%>&placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=350&modal=true');return false;" title="单击显示详情"><%#Eval("StudentName")%>
</tr>
=====================================
So,onclick事件就这样实现了。但是弹出的框虽然在外形样式上,与ThickBox很像,但其实是模态框(模态框被打开后就会始终保持输入焦点。除非窗口被关闭,否则用户无法切换到父窗口。而非模态窗口则可以将焦点移到父窗口下)。
3.HyperLink法
还有一种方法,就是在tr的td里,都拖一个HyperLink进去,利用其Navigateurl属性,弹出ThickBox框。
如:
<td><asp:HyperLink ID="HyperLink1" CssClass="thickbox" runat="server" ToolTip="更新证书"
NavigateUrl='<%# "CertificateUpdate.aspx?CertificateId="+Eval("CertificateId")+"&keepThis=true&TB_iframe=true&height=420&width=350"%>'><%#Eval("StudentNO")%></asp:HyperLink>
</td>
在解决上述问题之余,我发觉在ThickBox做了修改,刷新父页面时,会出现“重试”对话框。
贴出与姜sir的聊天记录,一看即明:
姜sir 14:57:18
如果父窗口是通过post提交的,就会弹出此窗口,使用get就不会了
┞�m籽藤`_┧ 14:59:54
但我回到父窗口是通过self.parent.window.location.reload(); 使用get是不是意味着我要在后台Redirect转向?
姜sir 15:01:08
父窗口的程序处理不能放在比如什么按钮_Click事件里,而要在PageLoad里根据querystrng参数进行处理,就是放弃事件绑定机制
┞�m籽藤`_┧ 15:03:33
你的意思是不是用户点击按钮,也不是直接触发按钮_Click事件,而是通过PageLoad里的参数找到相应的事件进行处理??
姜sir 15:04:04
对,因为所有事件绑定处理都是需要页面PostBack的
┞�m籽藤`_┧ 15:05:01
噢
姜sir 15:05:26
如果一个经过postback再reload的话就会弹出此窗口,使用get方式则会直接提交刷新,不会有这个窗口
┞�m籽藤`_┧ 15:05:47
可是怎么办 我都是通过事件绑定来实现功能的
姜sir 15:40:00
把查询也改成通过get提交吧
┞�m籽藤`_┧ 15:41:08
那我要把父窗口查询参数传到子窗口,然后再由子窗口 传回去?
姜sir 15:41:53
不要,父窗口的url带这个参数的
姜sir 15:42:10
url类似 xxx.aspx?class=微软班
姜sir 15:42:22
只需要调用父窗口的reload方法即可
=======================================
再说明一下,我的ThickBox框是个编辑窗口,父页面是通过“班级”、“学号”等不同的检索条件得到的列表。用户单击一行,进入编辑窗口,提交后刷新父页面的列表信息。
So,我在父页面的“检索”按钮触发事件中,对父页面的url进行处理:Response.Redirect("CertificateManage.aspx?HidType=" + HidType.Value + "&HidText="+ HidText.Value);
《HidType是检索类别,如“学号”;HidText是检索内容,如“06201630”》
另外,protected void Page_PreRender(object sender, EventArgs e)
{
if (Request.QueryString["HidType"] != null)
{
BindData();
}
}
private void BindData()
{
certs = new DataSet();
certificate = new Certificate();
if (Request.QueryString["HidType"].ToString() == "学号")
//if (ddlKeyWord.SelectedValue == "学号")
{
certs = certificate.GetIListByStudentNo(Request.QueryString["HidText"].ToString());
}
else
{
certs = certificate.GetListByClassName(Request.QueryString["HidText"].ToString());
}
if (certs != null)
{
ListView1.DataSource = certs;
ListView1.DataBind();
}
else {
lblError.Visible = true;
}
}
由于父页面的url已经过处理,ThickBox框无须做改动,直接reload即可。