-----------------------------------------------------------
New Message on MumbaiUserGroup
-----------------------------------------------------------
From: saurabhdotnet
Message 3 in Discussion
Hi !
You can do this. Read the solution given below :
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.
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.
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.
<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.
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.
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:
<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.
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:
<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>
That's it! You have successfully created a dialog box that will be displayed
in your ASP.NET web form. I have attached the sample source code too, for
your exercise.
Hope, this helps you out. And if any case, this don't you can again get back
to me.
!! Enjoy Coding !!
- Saurabh
Microsoft Certified Trainer for .NET
Microsoft Certified Solution Developer for .NET (Early Achiever)
Microsoft Certified Database Administrator for Windows 2003
_________________________________________________________________
Increase visibility. Maintain confidentiality.
http://go.msnserver.com/IN/38138.asp Post your CV on naukri.com today.
-----------------------------------------------------------
To stop getting this e-mail, or change how often it arrives, go to your E-mail
Settings.
http://groups.msn.com/MumbaiUserGroup/_emailsettings.msnw
Need help? If you've forgotten your password, please go to Passport Member Services.
http://groups.msn.com/_passportredir.msnw?ppmprop=help
For other questions or feedback, go to our Contact Us page.
http://groups.msn.com/contact
If you do not want to receive future e-mail from this MSN group, or if you received
this message by mistake, please click the "Remove" link below. On the pre-addressed
e-mail message that opens, simply click "Send". Your e-mail address will be deleted
from this group's mailing list.
mailto:[EMAIL PROTECTED]
