WebApp匯入資料之對話框實現

WebApp匯入資料之對話框實現——showModalDialog
1、應用場景
我常用的場景，列表的內容過多，dropdownlist顯示不便。例如：

1 <HTML>
2  <BODY>
3   <INPUT TYPE="text" NAME="name"><INPUT TYPE="button" VALUE="..." ONCLICK="">
4  </BODY>
5 </HTML>

2、預備知識要點
window.showModalDialog
Syntax
     vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
Parameters
     sURL         Required. String that specifies the URL of the document to load and display.
     vArguments   Optional.
     sFeatures    Optional. String
    dialogHeight:sHeight；dialogLeft:sXPos；dialogTop:sYPos；dialogWidth:sWidth；
    center:{ yes | no | 1 | 0 | on | off }；dialogHide:{ yes | no | 1 | 0 | on | off }；
    edge:{ sunken | raised }；help:{ yes | no | 1 | 0 | on | off }；
    resizable:{ yes | no | 1 | 0 | on | off }；scroll:{ yes | no | 1 | 0 | on | off }；
    status:{ yes | no | 1 | 0 | on | off }；unadorned:{ yes | no | 1 | 0 | on | off }
    e.g.: window.showModalDialog("SMD_target.htm","Dialog Arguments Value","dialogHeight: 73px; dialogWidth: 705px;
          dialogTop: 578px; dialogLeft: 531px; edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");
Return Value
     Variant. Returns the value of the returnValue property as set by the window of the document specified in sURL .
  a.Syntax
      window.returnValue [ = vValue ]
3、實現要點
a，打開靜態頁面
打開Dialog
HTML Code

    function Button2_onclick() {
            var ret=window.showModalDialog("DialogUrl.htm","","");
}

返回值
HTML Code

function Button1_onclick() {
    window.returnValue="returnvalue-test";
}

b，打開動態頁面
HTML Code

function btnWithPostback_onclick() {
    var ret=window.showModalDialog("DialogUrl.aspx","","");
}

返回值
VB Code

    Protected Sub btnPostback_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnPostback.Click        Dim s As String = _        "window.returnValue=""returnvalue-test"";"

        Page.ClientScript.RegisterStartupScript(Me.GetType(), "WinRet", s, True)
    End Sub

上b，會有一個問題，點擊按鈕Postback時，會打開以個新的窗口顯示DialogUrl.aspx。
c，解決Postback問題
關鍵是借住frame，通過中間頁面。
（1）getInfoFrame2.aspx

<head runat="server">
    <title>
        <%=Request("Title")%>
    </title>
</head>
<frameset rows="*" border="1" framespacing="4" frameborder="0">
    <frame id="setUser" src='<%=Request("OpenUrl")%>?<%=Request("OpenParam")%>' scrolling="auto">
</frameset>

（2）Dialogs.js

function SearchUser2(dialogUrl, ctl_User,ctl_UserName,ctl_key,ctl_DeptNo,ctl_DeptName,SearchType)
{   
    flagEvent = false;
    var OpenUrl = escape(dialogUrl);
 var OpenParam = '';   
 //key value
 var skey = document.all(ctl_key).value;   
            
 OpenParam = escape('message=' + escape('Search processing !...') + '&formname=' + document.forms[0].name +
                           '&SearchKey=' + escape(skey) + '&SearchType=' + SearchType);
 
 var url = 'Dialogs/getInfoFrame2.aspx?Title=User Dialog&OpenUrl=' + OpenUrl + '&OpenParam=' + OpenParam;
 
  OpenUrl = escape('SearchUserDialog2.aspx');
  url = 'Dialogs/getInfoFrame2.aspx?Title=User Dialog&OpenUrl=' + OpenUrl + '&OpenParam=' + OpenParam;

  // 獲取返回值,例如:"0901,0902,0903,0904" center=yes;
  ret = window.showModalDialog(url, window, "dialogWidth:402px;dialogHeight:406px;left=800;top=60;help=no;status=no;scroll=no");
     if (ret != '')  // 有值，則賦值
     {
      if (ctl_User!="")
      {
    var arry=ret.split("$");           
          document.all(ctl_User).value = arry[0];
          document.all(ctl_UserName).value = arry[1]; 
          document.all(ctl_DeptNo).value = arry[2];
          document.all(ctl_DeptName).value = arry[3];
      }   
  }
  else  // 沒有值，則置空
  {
          document.all(ctl_User).value = ""; 
          document.all(ctl_UserName).value='';
          document.all(ctl_DeptNo).value = '';
          document.all(ctl_DeptName).value = '';        
  }
  flagEvent = true;
}

（3）SearchUserDialog2.aspx

HTML部分

  1 <head runat="server">    <title>Search User</title>    <style>    body    {        font-size:12px;    }    </style>
  2 
  3     <script language="javascript">  
  4       var PreBackgroundColor = "";
  5       var PreColor = "";
  6       function sMove(st)
  7       {
  8           if (PreBackgroundColor == "")
  9           {
 10               if (st != selid)
 11               {
 12                   PreBackgroundColor = st.style.backgroundColor;
 13                   PreColor = st.style.color;
 14                   st.style.backgroundColor='#3399ff';
 15                   st.style.color='#ffffff';
 16               }
 17           }
 18       }
 19 
 20       function cMove(st)
 21       {
 22           if (st != selid)
 23           {
 24               st.style.backgroundColor = PreBackgroundColor;
 25               st.style.color = PreColor;
 26               PreBackgroundColor = "";
 27           }
 28       }
 29       function CloseWindow()
 30       {
 31           self.close();
 32       }
 33  
 34       var selid;
 35       function doChoose(st, value1)
 36       {
 37           if (selid != null)
 38           {
 39               selid.style.backgroundColor='#f4ffff';
 40               selid.style.color='Black';
 41           }
 42           selid = st;
 43           document.all('hidVendorNameAndId').value = value1;
 44       }
 45  
 46       window.returnValue = '';
 47       function doReturnValue()
 48       {
 49           window.returnValue = document.all('hidVendorNameAndId').value;
 50           window.close();
 51       }
 52      
 53     </script>
 54 
 55 </head>
 56 <body style="margin-bottom: 0;">
 57     <form id="form1" runat="server">
 58         <div>
 59             <table cellpadding="0" cellspacing="0" width="100%">
 60                 <tr>
 61                     <td>
 62                         Key Value:<asp:TextBox ID="txtKeyword" runat="server"></asp:TextBox>
 63                         <asp:Button ID="btnSearch" runat="server" Text="Search" /></td>
 64                 </tr>
 65                 <tr>
 66                     <td>
 67                         <asp:GridView ID="gvData" runat="server" AutoGenerateColumns="False" CellPadding="4"
 68                             ForeColor="#333333" GridLines="None" AllowPaging="True" Width="100%">
 69                             <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
 70                             <Columns>
 71                                 <asp:TemplateField HeaderText="Employee No.">
 72                                     <HeaderStyle HorizontalAlign="Left" />
 73                                     <ItemTemplate>
 74                                         <asp:Label ID="lblId" runat="server" Text='<%# Bind("EMPNO") %>'></asp:Label>
 75                                     </ItemTemplate>
 76                                     <ItemStyle Width="80px" />
 77                                 </asp:TemplateField>
 78                                 <asp:TemplateField HeaderText="Employee Name">
 79                                     <ItemTemplate>
 80                                         <asp:Label ID="lblName" runat="server" Text='<%# Bind("USERNAME") %>'></asp:Label>
 81                                     </ItemTemplate>
 82                                 </asp:TemplateField>
 83                                 <asp:TemplateField HeaderText="DEPTNO" Visible="false">
 84                                     <ItemTemplate>
 85                                         <asp:Label ID="lblDeptNo" runat="server" Text='<%# Bind("DEPTNO") %>'></asp:Label>
 86                                     </ItemTemplate>
 87                                 </asp:TemplateField>
 88                                 <asp:TemplateField HeaderText="Dept Name" Visible="true">
 89                                     <ItemTemplate>
 90                                         <asp:Label ID="lblDeptName" runat="server" Text='<%# Bind("cdeptname") %>'></asp:Label>
 91                                     </ItemTemplate>
 92                                 </asp:TemplateField>
 93                             </Columns>
 94                             <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
 95                             <EditRowStyle BackColor="#999999" />
 96                             <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" BorderStyle="Solid" />
 97                             <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
 98                             <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
 99                             <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
100                         </asp:GridView>
101                     </td>
102                 </tr>
103                 <tr>
104                     <td align="center">
105                         <asp:Button ID="btnOk" runat="server" Text="OK" Width="58px" />
106                         <asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="58px" /></td>
107                 </tr>
108             </table>
109         </div>
110         <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
111         <input id="hidVendorNameAndId" type="hidden" />
112     </form>
113 </body>

Code部分   

  1 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  2         btnOk.Attributes.Add("onclick", "doReturnValue();")
  3         btnCancel.Attributes.Add("onclick", "CloseWindow()")
  4 
  5         If Not Page.IsPostBack Then
  6             If Request.QueryString("SearchKey") <> "" And txtKeyword.Text.Trim = "" Then
  7                 Me.txtKeyword.Text = Server.UrlDecode(Request.QueryString("SearchKey"))
  8             End If
  9 
 10             If Request.QueryString("SearchKey") <> "" Then
 11                 BindData()
 12             End If
 13         End If
 14     End Sub
 15 
 16     Public Function GetList() As System.Data.DataSet
 17         Dim connstr As String = System.Configuration.ConfigurationManager.ConnectionStrings("dbconnstr").ConnectionString
 18         Dim dbHelper As New DBUtility.DatabaseHelper(connstr, DBUtility.Providers.SqlServer)
 19         Dim sb As New StringBuilder
 20 
 21         sb.Append(" select   u.empno,u.username,d.DEPTNO,d.cdeptname ")
 22         sb.Append(" from  [user] u,DEPTUSER du,dept d ")
 23         sb.Append(" where u.userid=du.userid ")
 24         sb.Append(" and d.deptid=du.deptid ")
 25         sb.Append(" and u.enable='Y' ")
 26         If Me.txtKeyword.Text <> "" Then
 27             sb.AppendFormat(" and ( username like N'%{0}%'", Me.txtKeyword.Text)
 28             sb.AppendFormat(" or empno like '%{0}%' ", Me.txtKeyword.Text)
 29             sb.Append(")")
 30         End If
 31 
 32         Return dbHelper.ExecuteDataSet(sb.ToString())
 33     End Function
 34 
 35     Public Function GetCountList() As Integer
 36         Dim connstr As String = System.Configuration.ConfigurationManager.ConnectionStrings("dbconnstr").ConnectionString
 37         Dim dbHelper As New DBUtility.DatabaseHelper(connstr, DBUtility.Providers.SqlServer)
 38         Dim sb As New StringBuilder
 39 
 40         sb.Append(" select count(*) from (")
 41         sb.Append(" select   u.empno,u.username,d.DEPTNO,d.cdeptname ")
 42         sb.Append(" from  [user] u,DEPTUSER du,dept d ")
 43         sb.Append(" where u.userid=du.userid ")
 44         sb.Append(" and d.deptid=du.deptid ")
 45         sb.Append(" and u.enable='Y' ")
 46         If Me.txtKeyword.Text <> "" Then
 47             sb.AppendFormat(" and ( username like '%{0}%'", Me.txtKeyword.Text)
 48             sb.AppendFormat(" or empno like '%{0}%' ", Me.txtKeyword.Text)
 49             sb.Append(")")
 50         End If
 51         sb.Append(" ) b")
 52 
 53         Return CInt(dbHelper.ExecuteScalar(sb.ToString()))
 54     End Function
 55 
 56     Protected Sub btnSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSearch.Click
 57         BindData()
 58     End Sub
 59 
 60     Protected Sub gvData_PageIndexChanging(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewPageEventArgs) Handles gvData.PageIndexChanging
 61         Me.gvData.PageIndex = e.NewPageIndex
 62         BindData()
 63     End Sub
 64 
 65     Private Sub BindData()
 66         Dim dsVendorName As New System.Data.DataSet
 67         dsVendorName = GetList()
 68 
 69         Me.gvData.DataSource = dsVendorName
 70         Me.gvData.DataBind()
 71     End Sub
 72 
 73     Private Sub ReturnValue(ByVal value As String)
 74         Dim js As String = ""
 75         js += "<script>"
 76         js += "window.returnValue='" & value & "';window.close();"
 77         js += "</script>"
 78         Me.ClientScript.RegisterStartupScript(Me.GetType(), "ShowDialogBox", js)
 79     End Sub
 80 
 81     Protected Sub gvData_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvData.RowDataBound
 82         If e.Row.RowType = DataControlRowType.DataRow Then
 83             e.Row.Attributes("onmouseover") = "sMove(this);"
 84             e.Row.Attributes("onmouseout") = "cMove(this);"
 85             e.Row.Attributes("onclick") = "doChoose(this);"
 86             'e.Row.Style.Add("color", "Black")
 87             'e.Row.Style.Add("background-color", "#F4FFFF")
 88             e.Row.Style.Add("CURSOR", "hand")
 89 
 90             Dim lblId As Label = CType(e.Row.FindControl("lblId"), Label)
 91             Dim lblName As Label = CType(e.Row.FindControl("lblName"), Label)
 92             Dim lblDeptNo As Label = CType(e.Row.FindControl("lblDeptNo"), Label)
 93             Dim lblDeptName As Label = CType(e.Row.FindControl("lblDeptName"), Label)
 94             Dim returnValue1 As String = lblId.Text.Trim() & "$" & lblName.Text.Trim & _
 95             "$" & lblDeptNo.Text.Trim() & "$" & lblDeptName.Text.Trim()
 96 
 97             e.Row.Attributes.Add("onclick", "doChoose(this,'" & returnValue1 & "');")
 98             e.Row.Attributes.Add("onDblClick", "doReturnValue();")
 99         End If
100     End Sub
101 
102     Protected Sub btnOk_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnOk.Click
103         'Dim ret As String = String.Empty
104         'For Each gvRow As GridViewRow In Me.gvData.Rows
105         '    If CType(gvRow.FindControl("chkSelect"), CheckBox).Checked Then
106 
107         '        If gvRow.FindControl("lblId") IsNot Nothing Then
108         '            ret &= CType(gvRow.FindControl("lblId"), Label).Text.Trim() + ","
109         '        End If
110         '    End If
111         'Next
112         'If ret.Length > 0 Then
113         '    ret = ret.Substring(0, ret.LastIndexOf(","))
114         'End If
115         'ReturnValue(ret)
116     End Sub

（4）調用

 1 <head runat="server">
 2     <script src="Dialogs/Dialogs.js" type="text/javascript"></script>
 3 </head>
 4 <body>
 5     <form id="form1" runat="server">
 6         <div>
 7             <asp:TextBox ID="txtPicName" runat="server" MaxLength="20" Width="200px"></asp:TextBox><input
 8                 id="Button1" type="button" value="..." onclick="SearchUser2('ProgressStatus.aspx','hidPicId','txtPicName','txtPicName','txtPicDeptNo','txtPicDeptName','USER2')" />
 9             <div>
10                 <asp:TextBox ID="txtPicDeptName" runat="server" CssClass="text_system" Width="100px"></asp:TextBox>
11                 <asp:TextBox ID="txtPicDeptNo" runat="server" CssClass="text_system" Width="100px"></asp:TextBox>
12             </div>
13         </div>
14         <div style="display: none;">
15             PicId<asp:TextBox ID="hidPicId" runat="server" Width="1px"></asp:TextBox>
16         </div>
17     </form>
18 </body>



posted @ 2010-10-27 15:55  yellowwood  阅读(257)  评论(0)  编辑  收藏  举报
Never Give UP