Using popup windows in Visual Studio C# and ASP.NET - quick learning
Question
Whenever the "Reserve" button is clicked in my web application (ASP.NET with C#, Visual Studio), a small window should pop up containing detailed options to choose from (drop down lists with values, comboboxes, etc), with a "Next" link, and "Finish", in the end. Changing the values in these controls should update tables I have in the database (Microsoft Sql Server).
Could you point me towards a detailed and useful resource/example of this? I am already using a book for inspiration (Cristian Darie) written in the form of steps / explanations, but scenarios as just described are not included. What should I be looking for? "Using Pop up windows with Visual Studio"? Is what I described known as a popup window?
I don't know JavaScript, is that needed here? Been practising lately a lot with classes, methods, stored procedures, masters, user control type files, handling db tables through Visual Studio classes and methods, etc but still new to these (a month old basically). Thanks a lot!
3 answers
solution1
2 ACCPTED 2012-06-14 16:33:35
it's not necessary to use JavaScript, but if you want anything a bit more fancy than just a regular popup window, javascript will be a good friend to you. As I see it it's basically four main ways of doing it:
1
Create a new ASPX file with the "details", send a querystring to the url of the details view in order to connect the popup with the data from the main window. a key to this is the "target" property of the html "a" tag. For example:
<a href="mynewwindow.aspx?i=3" target="_NEW">Details</a>
2
Create a popup window with some custom properties (ie toolbars window size of popup etc) using regular javascript. Look for window.open in javascript.
Example:
<a href="#" onclick="window.open("details.aspx?i=3","mywindow","menubar=1,resizable=1,width=350,height=250");">Details</a>
3
Using jQuery to open the popup in a modal dialog fashion using a lightbox. For this alternative I don't have any example, but google jQuery lightbox, there are heaps of them. Use that with an AJAX-call and achieve your goals.
4
And at last, use ASP.NET AJAX Control Toolkit (look here: http://www.asp.net/ajaxlibrary/act.ashx ) Download and install, use the ModalPopupExtender (tutorial here: http://www.asp.net/ajaxlibrary/act_ModalPopup.ashx ) from the toolkit, in which case you design your "details" view in a <asp:Panel> control and then using CSS and the ModalPopupExtender to display and hide the details, the looks will be like the lightbox but you don't have to create a separate ASPX page for this option, but you can use the same ASPX.
I've worked alot with all four options, and i tend to like the 4th alternative the best, but we all have our own taste.
Good luck, and feel free to ask away for more detailed information. :)
solution2
1 2012-06-14 21:20:57
let's take this step by step. In order to send that information, I think the easiest way would be to store the parameters as session variables and then reload them when the popup is closed, you can reload the parent window using the "onunload" event in Javascript, for example
<body onunload="window.opener.location.reload(true);">
This would in itself reload the parent window whenever the user closes the popup. IF you want it to close when the user saves changes (and your session variables are set), use this code in order to reload the parent window and close the popup. Put this code in the code behind, just before the end of your method that saves the data:
Page.ClientScript.RegisterStartUpScript(this.GetType(),"close","<script language=javascript>window.opener.location.reload(true);self.close();</script>");
To learn javascript, have a look at codeproject.com, they have a lot of articles regarding javascript (among other things), often with example code. :)
I made a quick example here: http://www.4shared.com/zip/LPtR1gbx/pop.html
solution3
0 2012-06-14 16:54:34
I would recomment using a <div> element rather than an actual new browser window.
It eliminates the need to pass the contextual information from the pop-up window back to the original window along with all the complexities involved with it (including things like the user inadvertently clicking off the pop-up window, clicking multiple times and thus bringing up multiple copies of the pop-up window, and so forth).
By using a <div> that "pops up", via controlled visibility through CSS or JavaScript, the entire context is kept to the same web page, making life so much easier overall.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.