I am making an ASP.NET application. I have a page which displays a list of data [as a GridView].
I need to display a list of objects [as a GridView] in a new view over the current view, not a new window but a kind of AJAX popup, so that the context shiftes on the page to the new view/form!!
Shall i use Modal Window for this? If so, how shall I do it, as the function to open the modal shall be fired when an item of the GridView is selected?
Is there any plugin which can simplify my task?
You could always try the ASP.net Ajax Control Toolkit
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx
It supported by the ASP.net team and it's really easy to use!
There is a good plugin called blockUI for jQuery that will let you achieve this quite easily.
You can use it to show any HTML that you desire or even load an iFrame using that. You can download this plugin and find examples here
http://jquery.malsup.com/block/
If you post some sample code I can probably help you create your modal pop up!
Please do vote up my answer or mark the checkbox next to it, if I helped you at all. Thanks :)
Related
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!
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:
Details
2
Create a popup window with some custom properties (i.e toolbars window size of popup etc) using regular javascript. Look for window.open in javascript.
Example:
Details
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. :)
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
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.
I'm just wondering if anyone can help with this problem I have?
I have a form view and don't like the current paging that is provided by microsoft. So in the pagertemplate I am adding a button in for Next, Previous etc. Is it possible to create an ajax paging method without using the horrible update panels? Is it possible to have a pager method that gets the event args etc?
When the user clicks next it should populate the form view and two other controls on the page. So say I click next to go to page two, this will get the ID from the List, this Id should also be passed onto the other controls on the page.
Also, if anyone has any suggestions for using a better control please let me know!
If anyone has an answer, suggestion or site that could help, please let me know!
thanks all!!
Louis
How's your javascript? This kind of thing is quite trivial once you get used to writing ajax calls from javascript. I'd recommend using something like jquery as a wrapper around the ajax call. Look at the jquery documentation.
How you implement the server side depends on what framework you're using. It's very natural if you use MVC, but if you use WebForms then you probably want a .asmx webservice.
If you don't want to get into javascript then an updating form region is the kind of thing that update panels are quite good for - although I agree they are 'horrible' in that they're a bit of a lazy way of doing ajax.
I have tried in my MVC app to add jquery modal dialogs to prompt the user for input, but my code turned really sloppy just prompting the user for 1 field of information.
SharePoint 2010 has ajax overlays that are very functional, some even include the office ribbon.
How is this being done? What libraries can I use where I can open up entire forms as ajax overlays on top of a page?
Thanks so much!
If you want to show complete forms, use http://plugins.jquery.com/project/jquery-framedialog - I haven't tried it with standard SharePoint forms, but it should work if you set the return url to a page that will close the dialog.
If you just need a nicer looking javascript prompt, use the standard jQuery UI dialog and define the html for the form where you are using it.
With MVC you may find it easiest to post the form using ajax (there is a jquery method to serialize a form, though I don't recall the exact syntax) rather than posting the iframe - that gets you a callback structure that is a bit easier to work with if you are doing more complex stuff with the dialogs.
What I am trying to do is create a bit of reusable code that can write a modal popup, either through javascript or using the ajaxcontrol toolkit all from the code behind.
The modal would be a sort of login pop up for controlling access to more restricted areas of the website allowing certain users to re-credential in for higher access.
I was thinking of doing a user control but I forsee some problems with passing all of the appropriate information along without it being completely hoaky.
If anyone has any good links or advice for doing so it would be greatly appreciated!
Thanks!
EDIT: I know how to use the ajax control toolkit and its controls, and I know how to make login screens, I'm asking how to do this entirely from the code behind from a class that would be independent of its implementation
Write a server control or an asp.net extender control like ajax control toolkit does.
The best you can do is download the source of AjaxControlToolkit from CodePlex and explore the source of ModalPopup within that.
Another thing you can do is just simply call the popupExtender to show from the code behind file.
As we know the extender has to be somehow linked to a target control, just add a dummy control as a hidden textbox (actually to hide the control, do it from the asp file, as style="display:none" not from the control properties (visible=false) otherwise it won't work), and then just call from the code behind the extender like this:
DummyTextBox_ModalPopupExtender.Show();
You can call it in the page_load or with anyother trigger.
No need javascript neither client side, just, server side.
Xds.
There's a sample modal popup using the ajaxtoolkit on asp.net
The modalpopupextender in the Ajax control toolkit is easy to use, plus it has a server or client side method for showing the popup (in past versions, I had trouble with the server-side method, but it may have been resolved in the current version).
You could put the modalpopupextender inside the master page, and create a JS method in the master page you can call to invoke the modal popup extender, like:
function showPopup() {
var modal = $find("<%= mpe1.ClientID %>");
modal.show();
}
The contents of the popup can be replaced via javascript, as you control that content.
Add BehaviorID="my_cool_id" to your modalpopup extender and add this to any server function
ScriptManager.RegisterStartupScript(Page, this.GetType(),"id","function pageLoad(){$find('my_cool_id').show();}",true);
I would like to create a javascript modal pop up window to get some values from a user in a ASP.Net 2.0 webpage.
The basic idea is this. When a user clicks a button, a modal window will come up and ask 3 or 4 questions. The asp.net page will not be able to be changed while this window is up. Once the questions have been answered I need to grab the values from this window so the asp.net page has access to them and can handle them in the code behind.
Can I please get some examples on how you would implement this scenario.
Have you looked at the ModalPopupExtender?
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx
The easiest methods would be to either use ModalPopupExtender as mentioned by Jon or potentially use jQuery's thickbox or something similar as well.
Otherwise, you could roll your own JS to do it.
You could use the javascript function 'window.showModalDialog', but it only works in Internet Explorer.
You can pass in and return any number of variables by wrapping them up into an object.