Summary : Creating Dialog Boxes using ASP.NET, JavaScript and IE

这是我翻译的第一篇文章,限于本人低劣的英语水平,可能翻译的很烂,请看不懂我翻译的时候参考一下英文原文吧!

Introduction(简介)

ASP.NET web forms provide a new programming model that eases many development tasks. However, there is misconception amongst many programmers that one should only use the server side model. In fact, most of the books available today give emphasis on server side programming. This is natural as any book will try to cover the new and exciting features of the technology under consideration. However, many times business requirements call for using traditional things like using JavaScript or using DHTML. This article will illustrate one such scenario - Dialog Boxes. IE provides an easy way to create modal browser windows via its object model. In this article I will show you how to create dialog boxes using ASP.NET, JavaScript and IE object model.

asp.net的网页形式提供一个新的编程模型,简化了许多开发的任务.,然而,程序员对此产生了一些误解,程序员只能开发服务器端的程序.事实上,现在大部分书都是在强调服务器端的开发.那自然任何一本书都试着去写新的和精彩的技术在里面.然而,很多时候商业的需求需要用到传统的技术例如JavaScript 或DHTML.本文将举例一个特定的对话框.IE提供很多的容易实现的方式来创建次对象的模式.在这篇文章我会向你展示如何创建对话框使用asp.net , javascript,IE对象模型.  

Sample Scenario(设想实例)

Consider a case where user is presented with a screen on which he is supposed to enter customer ID or Customer Name. Now, under rich client environment you can easily show a Grid or ListBox filled with available customers and then user can select from the list. What about web browser? This is where JavaScript and IE object model comes handy. IE provides certain functions that allow you to show modal and modal-less dialog boxes. We will now develop a sample pages using these techniques. You can actually starting coding along with the explanation given below.

想象有这样的一种情况,用户要在屏幕上输入自己的ID号或者用户的姓名.现在,在丰富的客户端的环境下,你可以用Grid或者ListBox来展示给用户,用户可以自己去选择下拉框菜单.那么关于WEB浏览器呢?那里是以JavaScript 和 IE object 模式来展示的.IE提供了某些函数,你可以去展示你的对话框.我们现在将开发个简单的页面用这项技术.实际上,你可以开始编码随着解释如下.

Creating the main form(创建的主要形式 )

For our example we will create a simple web form that contains a Label (Label1), a Textbox (TextBox1) and two buttons (btnLookUp and btnSubmit). Once you place above controls on your form add following JavaScript block in the HEAD section of the web form.

举个例子,我们将创建一个简单的web表单包含一个标签( label1 ) 一个textbox中( textbox1 )和两个按钮( btnlookup和btnsubmit ) . 你可以在web页面的head标签下写你的javascript代码!

<script>
function ShowDialog()
{
//declare a string variable
var retval="";

//show modal dialog box and collect its return value
retval=window.showModalDialog
('dialogboxhostframe.htm',window);

//check if user closed the dialog
//without selecting any value
if(retval!="" && retval!=null)
{
//fill the textbox with selected value
document.getElementById("TextBox1").value=retval;
}
}
</script>

This block consists of a function ShowDialog that actually displays a modal dialog box to the user. The dialog box in turn contains the web form that presents the list of customers. Please read the comments above to get idea of what each line does. Note that we have given url as 'dialogboxhostframe.htm'. Why? If we display a web form directly in this modal dialog box it opens up in a new window after being posted back. This is irritating behavior and in order to overcome this we need to display the web form as a part of FRAMESET.

此块组成是由一个方法showdialog来完成的,实际上显示一个模态对话框给用户. 对话框又包含网站的形式列出客户名单. 请阅读上述注释理解每一行的代码. 指出我们已经给予url作为' dialogboxhostframe.htm ' . 为什么? 如果我们展示了网站的形式直接在这个开辟了一个新窗口之后被调回. 这是令人讨厌的行为,为了克服这方面我们需要展示网页形式的一个组成部分框架.

We have created the function to display the dialog but when it will be called? We want to invoke this dialog when user clicks on btnLookUp button. We will now add a line of code in the Page_Load event that makes this possible.

我们已经建立了一个方法展示此对话框,但是何时会被回调呢? 我们想引用此对话框时,用户点击btnlookup按钮. 我们现在将添加一行代码,在page_load事件中,使这样变成可能.

Private Sub Page_Load
(ByVal sender As System.Object,
ByVal e As System.EventArgs)
Handles MyBase.Load

	btnLookUp.Attributes.Add("OnClick", "ShowDialog();")

End Sub

Here, we have added OnClick client side event handler to the attributes collection of the button.

Creating the 'Dialog Box'(创建此对话框)

Now, we will design the web form that acts as 'dialog box' or 'selection list'. Add another web form say DialogBox.aspx to your web application. Put a ListBox (lstCustomers) and Button (btnClose)on it. Populate the list box either with hard coded values or via data binding. In the HEAD section of the form write JavaScript block as shown below:

现在,我们会设计网页的形式作为'对话框'或'选择列表' . 添加上另一个网页dialogbox.aspx来展示你的网络应用程序. 把一个列表( lstcustomers )和按钮( btnclose ) 放置在次页面上. 填充列表框,或者硬编码值或者通过数据绑定. 在head标签中写javascript写如下所示代码:

<script>
function CloseWindow()
{
	//set return value of the dialog box or dialog result
	top.returnValue=
	document.getElementById("lstCustomers").value;

	//close the dialog window
	window.close();
}
</script>

Above function will be called when user clicks the btnClose button. Note that here we are closing the dialog box and setting return value of the dialog box (also called as dialog result) to the selected value from the list box. In the Page_Load of this web form add code that will attach this function with the client side OnClick event of the btnClose.

上述函数将在用户点击btnclose按钮时被调用. 看到这里,我们关闭对话框并设置返回对话框的值(也可称为 结果对话框)选定值,从列表框. 在page_load这个网页时添加代码将此功能关联客户端btnclose的onclick事件 .

Private Sub Page_Load
(ByVal sender As System.Object,
ByVal e As System.EventArgs)
Handles MyBase.Load

	btnClose.Attributes.Add("OnClick", "CloseWindow();")

End Sub

This code looks similar to the previous form but is used to close the dialog box.

Creating frameset to host the 'Dialog Box'(为主页面创建框架对话框)

As explained earlier we need to display our dialogbox.aspx as a part of FRAMESET. So, create HTML page say dialogboxhostframe.htm. This HTML page should contain a FRAMESET. One of the frames should point to dialogbox.aspx. Following is a sample HTML markup:

如前所述,我们必须展示我们dialogbox.aspx框架的一部份 . 因此,创造html网页假定为dialogboxhostframe.htm . 这html网页应包含框架. 一个框架应指向dialogbox.aspx . 以下是一个html例子:

<html>
	<head>
		<title>Header Frameset</title>
	</head>
	<frameset rows="0,*">
		<frame name="header" src="" 
		scrolling="no" noresize>
		<frame name="main" src="DialogBox.aspx">
	</frameset>
</html>