I am writing an ASP.NET 3.5 web app that displays a list of items. I want to be able to display a non-modal popup with details when the user selects an item. I want to be able to display several detail popups simultaneously. (i.e., the user can click an item to see its details, then click another item to get another popup.) Currently I call RegisterStartupScript during postback to write a "window.open(...)" script to the page when it re-renders. The problem, of course, is that this requires a full page postback and refresh.
It occured to me that this might be a perfect use for XMLHttpRequest or AJAX but I don't know how to do it (or whether it's even possible or smart to do this). Can someone show me the way?
I have the AJAX Extensions installed but I'd prefer not to use the AJAX Control Toolkit.
EDIT:
Some clarification: When the user selects an item a custom event is raised. On the server I handle this event and use some server-side logic to construct a URL which I then use with RegisterStartupScript to construct a "window.open(myUrl...)" script. But posting back the whole page to do this seems inefficient and I'd like to know if I can just make a call to a simple server-side function that constructs the url and sends it back without having to roundtrip the entire page.
Creating a popup has very little to do with AJAX, and a lot more to do with JavaScript. See the jQuery dialog library here. You can then use jQuery's AJAX API to do your server dirty work :)
jQuery Dialog UI
--
Bill Konrad
Devtacular - Web Development Tutorials
You can use DHTML Window widget.
It offers many way to display either modal or non modal window.
Also it supports AJAX.
You can use dhtmlwindow for open a new window, or
dhtmlmodal to open a new modal window.
Of course, you can edit it to match your requirement.
Sample:
var insWindow = dhtmlmodal.open("insbox", "iframe","UserMaster.aspx?" + queryStr, "User Master", "width=425px,height=500,center=1,resize=0,scrolling=1", "recal");
Do you really need to open a new window? Opening an absolutely positioned DIV or a new layer on top of the current page in the same window is all the rage these days.
Edit:
I don't think it would limit the number of popups, there is some neat stuff that can be done these days with libraries like jQuery + jQuery UI, you can simply create as many of these DIVs/layers as you need and make them movable, resizable, etc. Only thing that real popups have and these do not is that they do not appear on the tab panel/taskbar.
Yes, you will be limited to the size of the window in which is the main page opened, however, I don't personally see it as a problem since most people surf in a maximized browser window anyways.
Implementation of the oldschool typical popup window is undoubtedly much easier for you, but it also runs into problems with end user popup blockers. Just had that problem # my work, they needed to make a popup during the certificate authentication process for some reason and as soon as Yahoo released a new version their toolbar, it quit working).
Related
So, I've seen this approach on one site (I can't remember it, though) and it works like this:
First, there is a simple page with a simple login form. But when you click the login button of the form, if the validation of user and password is positive and the response from the server is positive as well, a new pop-up window appears (which contains the application written in javascript - ExtJS) and the current tab of the browser (which was the login form page) closes.
In my opinion, this is an excellent approach because the ExtJS is a single page application pattern, powerful enough to run full AJAX, without visible redirects. Plus, the pop-up scenario eliminates the browser page control buttons (back, forward, refresh) and the address bar is read-only.
Now, I'm trying to reproduce this by using the help of ASP.NET as server side scripting language, among ExtJS as the main application. So, the results would be as following:
Login page with a login form - HTML5 + CSS3
Application page (pop-up window) - purely ExtJS
A web service - ServiceStack
The web service exposes the method for login purpose, as well as the other methods, and it always returns JSON responses. A session variable must be set (if the login was successful) before opening the pop-up and closing the window.
And here comes the question:
How can I accomplish this scenario of opening a pop-up and closing the current window/tab if the login was successful? Any help, hints, references, advices, criticism is totally what I'm expecting.
Thank you!
you should be able to close the current window after open another one.
window.open('new window url'); window.close();
I tried this on my box, and it works well on chrome and safari
<input type="button" onClick="window.open('popop.html'); window.close();" value="open" />
Keep away from opening pop-ups if you really don't have to. All modern browsers are set up to prevent you from opening pop-up windows by default.
AFAIK the only 100% scenario to open a new window (with target attribute) is a hyperlink clicked by user.
window.open() and even document.getElementById("hiddenLink").click() are blocked by certain browsers.
Are there any real positives of doing so or is it only a false novelty of that site? The reasons you state are all well with one-window scenario.
Is there a straightforward way to use server-side validation with ASP.NET's validation controls in a form that's displayed in a modal dialog? I am using jQuery and SimpleModal (in C#, VS2010, .NET 4.0)
I've got a modal form which works fine. I need to use a server-side validation because the logic depends on data specific to the record being accessed
My solution for the project I'm working on now is to use a jQuery ajax call to pass all the form data to the server and get back the validation results before allowing the post to proceed. But this is relatively time consuming to implement, and in some situations I'm dealing with now all the validation code exists already.
The first challenge is that of course the modal dialog will close on a full postback. So you could put an UpdatePanel inside the dialog... without even thinking about this too much, though, I assumed that it wouldn't work out that well. It doesn't. And the form which opens the modal dialog to begin with is already in an UpdatePanel, which further confuses matters.
Anyway, I tried putting the contents of the modal form in an UpdatePanel for the heck of it. It does actually do a partial postback, the dialog remains open, but the contents of the dialog do not get updated with anything I change server side. If I close and re-open the dialog on the same page after testing the validation code, though, its contents are in fact updated to reflect these changes. Obviously the way the dialog is rendered is confusing ASP.NET. Or vice-versa. But this just seems sketchy from the get-go.
Rather than trying to hack my way through this problem I was hoping that others had some suggestions about a better way to approach this. Or just tell me I'm trying to hard too mix apples and oranges and I should keep it all client side (or client side + jQuery ajax) if that is the only sensible thing to do.
The two approaches I've taken:
1) submit the data via ajax, the response includes a success:true or false. If false, there is a message included that details the issue.
2) submit the form normally. If there is a validation problem, but the errors in a hidden div on the page and write JS to check for content in that div when the page loads and display the warning/error as necessary.
I have been given a requirement to take an existing stand-alone web-form (i.e. uses postbacks) and throw it into a lightbox.
The standalone web-form already has save and cancel buttons that have predefined behaviors. For example, the Save button attempts to save the form, and either displays validation errors, or if the operation was successful, redirects to some other page in the app.
However, in the context of this new "lightbox mode", the Save button should additionally close the lightbox if the operation was successful.
I see two options:
Option 1-->UpdatePanel + ModalDialogExtender:
a. Extract a UserControl out of the standalone web-form that includes everything but save/cancel buttons
b. Introduce Save and Cancel EventHandlers on said UserControl
c. Use this UserControl on both the standalone and lightbox versions of the page, and wire up the events appropriately
Option 2-->Client side lightbox (i.e. jQuery)
a. ....
I'm a big fan of jQuery and tend to favor its use for Ajax functionality b/c of the level of control it gives me. On the other had, I also want the simplest solution that will possibly work. Assuming that option 2 is that option, any guidance on how to proceed would be appreciated.
I am using fancybox (see http://fancybox.net/home) with great success. It has a mode where it can show my aspx page (usually an edit form without menus and so on) in an iframe fancybox.
It can also be closed from javascript in the iframe.
I'm writing an asp.net web app. and i've hit a bit of a brick wall.
basically i have 2 pages, the main page with a text box in and a popup that contains a treeview.
My problem is this. when i select a treeview item i want the program to perform some database transactions using asp.net and then pass the value retrieved from the database into a javascript function that passes the data back from the popup page to the parent page. My problem is that i cannot find any way of calling a javascript function from asp.net. I've tried assigning attributes to controls on page load, but this does not work as when the page loads the data has not been retrieved from the database.
Have a look at the ClientScriptManager class. You can register scripts from code-behind that will run when the HTML page loads. Those scripts can call other javascript functions on the page.
There are many tutorials and examples on the Web. Here's one I found that may help but there are many more.
How to use the client script manager
You hit the nail on the head when you said "I've tried assigning attributes to controls on page load, but this does not work as when the page loads the data has not been retrieved from the database." You just need to discover when you're pulling the data from the database, and then assign the values after that. Without looking at your code, there's no way to know for sure, but Page_PreRender is probably a good bet to assign your values...it's probably after you're pulling information from the db...it's pretty much the last place that you can make things happen before the html is generated for the client.
You can invoke a function resided in the Main Page and call that function in the Main Page from the Child Page which is your pop up window.
Please refer to these links for references
http://chiragrdarji.wordpress.com/2007/03/10/call-parent-windows-javascript-function-from-child-window-or-passing-data-from-child-window-to-parent-window-in-javascript/
http://www.webmasterworld.com/forum91/2957.htm
http://hspinfo.wordpress.com/2008/01/12/call-parent-windows-javascript-function-from-child-window/
This one helps with retrieving popups from values using javascript
http://www.eggheadcafe.com/articles/20060117.asp
This one shows how to fire a postback using javascript, and manage it in the codebehind.
http://weblogs.asp.net/mnolton/archive/2003/06/04/8260.aspx
If you put them together, and use Control.ClientID to find the actual "html name" of your asp.net controls, you'll be able to set that up in no time.
Might not be the prettiest way to do it in town, and incidentally make little baby Jesus cry, but anyway, it works.
[edit]Oh. I just saw that it seems I answered the question the other way around, or "how to trigger codebehind from Javascript". I think the method I suggest may help you, if you use it right.
The javascript of the popup should pass the information to the parent window, and the parent window function should call a postback when it receives the information.
The javascript of the popup window should be only registered on a postback with the correct information retrieved, so that when the postback occurs on the popup because of the selection of the right information, the window closes and passes the information to the parent page.
The parent page, triggering postback, does the thingies you need it to, and the app resumes "normally" from there on, doing whatever you need it to, outside of the popup page.
I am building a Web Application using asp.net (C#). I come from windows forms development and find myself in a hard spot. Im making an application where the user should edit some simple information about himself, and thus i need to create a new dialog. How do I do that in asp.net? I have a button which event is handled serverside, and when i click lthis button i want to popup a dialog where i can show my custom web control (or any web control, lets make it generic from the start). How do I go about with doing so?
I got some part of the way by looking at the internet, that i need to make a section and set the z-index to 1000, but how do i make it visible (block)? Please help here as i am completely lost...
/H4mm3rHead
If you're not concerned about using a library, try Microsoft ASP.NET AJAX Control Toolkit, they have several controls that can create something you want (the ModalPopup control).
The AJAX Control Toolkit has a ConfirmButton extender which will do exactly what you are looking for.
I used to do the following:
1. my new pop up is just a new aspx page like any other page
2. add a button (or just a link) that fires a client side java script function
3. in the function I use window.open and put params to open my popup page with no toolbars or scrollbars and proper size to its content
check this for more info on #3