WebApp匯入資料之對話框實現——showModalDialog
1、應用場景
我常用的場景,列表的內容過多,dropdownlist顯示不便。例如:
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
var ret=window.showModalDialog("DialogUrl.htm","","");
}
返回值
HTML Code
window.returnValue="returnvalue-test";
}
b,打開動態頁面
HTML Code
var ret=window.showModalDialog("DialogUrl.aspx","","");
}
返回值
VB Code
Page.ClientScript.RegisterStartupScript(Me.GetType(), "WinRet", s, True)
End Sub
上b,會有一個問題,點擊按鈕Postback時,會打開以個新的窗口顯示DialogUrl.aspx。
c,解決Postback問題
關鍵是借住frame,通過中間頁面。
(1)getInfoFrame2.aspx
<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
{
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部分
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部分
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)調用
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>