实训第六周·周记

2009-08-17  籽藤 

 这一周还是在完善“证书管理”。我想,与其再接触其他的模块,不如多涉及一些东西,把这部分做细做好。

 我彻底抛弃了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即可。  

381°/3813 人阅读/0 条评论 发表评论

登录 后发表评论