asp.net彈窗選擇實踐

小鱼儿 2022-08-26 00:55 106阅读 0赞

asp.net彈窗選擇實踐

目的主要是彈出一個窗口從數据据庫中查尋并選擇,返回值時不刷新父頁面.問題來了:  
1.數据查尋頁的制作  
選擇有單選和多選之分,這里只做單選.而且這個頁面盡量要有獨立性.不能再去操作別的頁面,關閉時只需返回值就行.  
//popup.aspx

//part1  
<head runat="server">  
  
<base target="\_self" />  
<title>訂單列表</title>  
<script language="javascript" type="text/javascript">  
var ret=null;

//取消其他RadioButton的选中  
function OnSelect(obj)  
\{  
elements = obj.form.elements;  
for(var i=0;i<elements.length;i++)  
\{  
if(elements\[i\].type =="radio" && elements\[i\].id != obj.id)  
\{  
elements\[i\].checked = false;  
\}  
\}  
\}  
//返回GridView选中的RadioButton的值  
function GetSelectedRadioValue(obj)  
\{  
elements = obj.form.elements;  
for(var i=0;i<elements.length;i++)  
\{  
if(elements\[i\].type =="radio" && elements\[i\].id != obj.id)  
\{  
if(elements\[i\].checked)  
\{  
return elements\[i\].value;  
\}  
\}  
\}  
return null;  
\}  
function Manage(obj)  
\{  
ret = GetSelectedRadioValue(obj);  
if(ret != null)  
\{  
//window.alert(id);  
//返回值操作  
window.returnValue = ret;  
window.close();  
\}  
else  
\{  
window.alert("请选择所要处理的列！");  
\}  
\}

function Button1\_onclick(obj) \{  
Manage(obj);  
\}

function Button2\_onclick() \{  
Close();  
\}  
function Close()  
\{  
window.close();  
\}

</script>  
</head>

//part2  
<form id="form1" runat="server">  
<div>  
本頁面用于開窗查尋,返回一個訂單批號<br />  
<br />  
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConflictDetection="CompareAllValues"  
ConnectionString="<%$ ConnectionStrings:testdbConnectionString %>" SelectCommand="SELECT \[od\_no\], \[cust\_no\] FROM \[orders\]">  
</asp:SqlDataSource>  
<br />  
訂單批號: <input id="Text1" type="text" runat="server"/>  
客戶:<input id="Text2" type="text" runat="server"/>  
<asp:Button ID="SearchButton" runat="server" Text="查找" OnClick="SearchButton\_Click" />&nbsp;  
  
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"  
AutoGenerateColumns="False" DataKeyNames="od\_no" DataSourceID="SqlDataSource1" EnableViewState="False">  
<Columns>  
<asp:TemplateField HeaderText="訂單批號" SortExpression="od\_no">  
<ItemTemplate>  
<input id="Radio1" type="radio" οnclick="OnSelect(this)" value='<%\# Eval("od\_no")%>' runat="server" /><%\# Eval("od\_no")%>  
</ItemTemplate>  
</asp:TemplateField>  
<asp:BoundField DataField="cust\_no" HeaderText="客戶" SortExpression="cust\_no" />  
</Columns>  
<EmptyDataTemplate>  
沒有找到訂單  
</EmptyDataTemplate>  
</asp:GridView>  
<input id="Button1" type="button" value="确定" οnclick="return Button1\_onclick(this)" />  
<a style="color: blue; " οnclick="return Close()">取消</a><br />

</div>  
</form>

//pupup.aspx.cs  
protected void SearchButton\_Click(object sender, EventArgs e)  
\{  
string sql = "SELECT \[od\_no\], \[cust\_no\] FROM \[orders\] where 1=1 ";

if (this.Text1.Value != "")  
\{  
sql += " and od\_no like '%" + this.Text1.Value + "%'";  
\}  
if (this.Text2.Value != "")  
\{  
sql += " and cust\_no like '%" + this.Text2.Value + "%'";  
\}  
this.SqlDataSource1.SelectCommand = sql;  
\}

2.選擇什么形式的彈窗,因為是選擇,所以只能是模式窗口,使用showModelDialog,如何取得返回值呢?  
這里用三种形式開窗.(1)單擊按鈕開窗,(2)雙擊客戶端Text控件(3)雙擊服務端TextBox控件

//parent.aspx  
<head runat="server">  
<title>未命名頁面</title>  
<script language="javascript" type="text/javascript">  
// <!CDATA\[

function Button2\_onclick() \{  
getValue("Text1");  
\}

function getValue(objId)\{

var ret=window.showModalDialog("popup.aspx");  
if(ret)  
\{  
document.getElementById(objId).value=ret;  
\}

// \]\]>  
</script>  
</head>  
<body>  
<form id="form1" runat="server" >  
<div>  
<input id="Text1" type="text" οndblclick="getValue(this.id)"/>  
<input id="Button2" type="button" value="button" οnclick="return Button2\_onclick()" />  
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div>  
</form>  
</body>

//parent.aspx.cs  
protected void Page\_Load(object sender, EventArgs e)  
\{  
//在服務端的TextBox中确發雙擊事件必須要添加這段  
if (!IsPostBack)  
\{  
this.TextBox1.Attributes.Add("ondblclick", "getValue(this.id)");  
\}  
\}