弹出页选择器的开发

在我们网站的开发中，常常需要开发弹出式页面的选择器，以提供类似于C/S结构的用户体验，然而比较不幸的是，网页并不是一个Windows应用程序，要实现弹出页选择器并不是那么容易，其主要的困难在于：页面间数据传输比较困难，从主页面向弹出页传输数据往往只能通过URL参数，然而这种方式只能传输有限的数据，对于较大数据量便无能为力了；从弹出页向主页面传输也只能传输较简单的数据，对于较复杂的数据也会比较困难；还有就是客户端并没有全部的数据可供跨页面间传送，很多数据往往是在服务器上，还有在页面弹出之前和关闭之后我们都可能需要完成某些业务逻辑操作。本节中我们将对弹出页选择器的相关技术做一个探讨。

 简单型的弹出页选择器

这里所说的简单型的弹出页选择器，通常是指在页面弹出之前和弹出页关闭之后都不需要回发到服务器进行数据处理的情况，比如说点击页面上的某个按钮，弹出联系人选择页面，选择某个联系人之后，该联系人的姓名、电话或者联系地址之类的信息出现在父页面上。

作为前提，父页面上需要有按钮用以点击后弹出选择页，需要有一个或者若干个接收返回值的控件，通常为TextBox或者Hidden，如果返回值需要显示在页面上，则使用TextBox；如果返回值并不在页面上显示，则请使用Hidden控件，请不要使用TextBox控件然后将其Visible属性设为False，这样做是没有意义的。

如果弹出页只供一个父页面所调用而且接收返回值的控件是固定的，那么您可以不用项弹出页传递接收返回值的控件的信息，否则，您就需要向弹出页传递控件的ClientID，注意这里说的是ClientID而不是ID，两者是有不同的。如果每次只向父页面上的一个控件传递数据，那么您可以直接把该控件的ClientID传给弹出页，否则，我建议最好是把每次需要接收数据的控件都放在同一个父控件下，然后向弹出页传递该父控件的ClientID，而在弹出页，则分别算出需要接收数据的ClientID，算法通常是：父控件的ClientID加上“_”加上控件本身的ID，例如，在页面中某个TextBox的ID是“txtUserName”，而这个TextBox位于一个ID为“pnlUser”的Panel控件中，Panel直接位于页面上，那么这个TextBox的ClientID可能是“pnlUser_txtUserName”，之所以说是可能，是因为如果网页是一个使用了母板页的内容页，那么ClientID的算法会比较复杂，但是通过调用该控件的父控件的ClientID属性再加下划线加控件本身的ID得出来的ClientID是没有问题的。

放好了用以弹出页面的按钮和接收返回值的控件之后，下面要做的是写一段javascript来弹出窗口了，无论是使用opendialogue的模式对话框也好，还是openwindow的非模式对话框也好，其基本原理都是相同的，即在客户端处理按钮的onclick事件。

弹出的页面根据业务的需要向怎么做就怎么做了，只是在最后在点击确定按钮的时候需要使用javascript向父页面上接收数据的控件写入返回值就可以了。

以上是简单型弹出页选择器的原理。在本节的最后，我们将会给出完整的例子。

  复杂型的弹出页选择器

复杂型的页面选择器，通常是指在选择页面弹出之前和弹出之后都需要进行数据或者业务的处理，而这些处理在客户端脚本实现通常会很麻烦，而是需要在服务器端来处理的。比如需要从父页面多个不同的输入框收集数据并进行分析，父页面与弹出页之间需要交换的数据量比较大，弹出页返回后需要重新处理数据或者生成表格等等。

和简单型弹出页选择器所不同的主要在主页面上，用以弹出页面的按钮不再是客户端控件，而是服务器端控件，也就是说点击后引发一次Postback，在postback之后在服务器端处理完业务之后加入一段用以弹出页面的javascript，如下所示：

this.Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenSelectBoxWindow", strBuilder.ToString());

另外就是，在主页面上放置的可能不再是接收返回数据的控件，而是一个“回传引发器”的东西，它通常由Hidden控件担当，其作用是当检测到该控件的值发生变化时引发一次postback。为实现这个功能，我们通常在页面的Page_Load事件中加入如下的代码：

this.hfBoxChangeWacher.Attributes.Add("onpropertychange", "__doPostBack('','')");

然后在该控件的ServerChange事件处理程序中处理我们需要的选择后业务逻辑。

至于主页面和弹出页之间的数据传输，由于数据量大和比较复杂的缘故，我们通常会选择Session来进行传输：在弹出页面前由主页面写入Session或弹出页关闭前由弹出页写入Session，另一个页面则读取Session并随后清除该Session。

而弹出页则在关闭前向父页面的“回传引发器”控件写入一个随机值（该值应当每次不一样以保证能引发回传）以使父页面发生Postback。

下面我们给出复杂型弹出页选择器的部分代码，至于简单型弹出页选择器，原理大致相同，只须将其中某些代码修改即可。

主页面Html：

……

<td align="center" colspan="6">

                                          <asp:LinkButton ID="hlkAddbox" runat="server" OnClick="hlkAddbox_Click" >添加一箱</asp:LinkButton></td>

                                 <td>

<input id="hfBoxChangeWacher" runat="server" type="hidden" onserverchange="hfBoxChangeWacher_ServerChange" />

……

主页面代码：

     protected void Page_Load (object sender, EventArgs e)

     {

         this.hfBoxChangeWacher.Attributes.Add("onpropertychange", "__doPostBack('','')");

}

     protected void hlkAddbox_Click (object sender, EventArgs e)

     {

         ……

         string openUrl = "../../Store/Common/BoxModifier.aspx? ControlPrefix=" + this.hfBoxChangeWacher.Parent.ClientID;

         StringBuilder strBuilder = new StringBuilder();

         strBuilder.Append("<script language=JavaScript> ");

         strBuilder.Append("            window.open('" + openUrl + "'); ");

         strBuilder.Append(" </script>");

         this.Page.ClientScript.RegisterStartupScript(this.GetType(), "OpenSelectBoxWindow", strBuilder.ToString());

}

     protected void hfBoxChangeWacher_ServerChange (object sender, EventArgs e)

     {

         BoxModifierData boxModifierData = (BoxModifierData)this.Session[STR_Store_Common_BoxModifier_BoxModifierData];

         this.Session[STR_Store_Common_BoxModifier_BoxModifierData] = null;

         ……

}

弹出页的代码：

     protected void btnSave_Click (object sender, EventArgs e)

     {

         ……

              Session[STR_Store_Common_BoxModifier_BoxModifierData] = this.BoxModifierDS;

              StringBuilder scriptBuilder = new StringBuilder();

              scriptBuilder.Append("<script language=javascript>");

              scriptBuilder.Append(" parwin=self.opener;");

              scriptBuilder.Append("parwin.document.all." + ControlPrefix + "_hfBoxChangeWacher.value='" + Guid.NewGuid().ToString() + "';");

              scriptBuilder.Append("window.close(); ");

              scriptBuilder.Append("</script>");

              this.Page.ClientScript.RegisterStartupScript(this.GetType(), "OK", scriptBuilder.ToString());

         }

}