Adding lightbox (or something similar) to ASP.NET project - asp.net

I need to implement some, let's call it "dialog" in some old ASP.NET project that I took over. It's huge project so I'm not allowed to implement new things.
I have a form on which user can attach up to 3 file attachments, enter some 10-15 fields, and when required fields are filled, submit button get's enabled.
What need to be done is press submit, wait for any possible response for server, and then display some sort of dialog, alert, lightbox which would display short summary and list of correctly uploaded files.
What would be the best approach to do this in ASP.NET?

Considering jQuery Lightbox is designed for overlaying images rather than HTML I would recommend using FancyBox or FaceBox instead.

Related

HTML Change button state permanenty

I am completely new to web development. The question I have is rather simple (I guess), but after multiple hours of using google and experimenting I am still without any solution. The problem I have is probably not how to do it, but which keywords to use while searching.
I want to create a simple website. (For testing I use Caddy Server). For my website I use a simple index.html file. On my website I want to have 9 buttons, which will be disabled once clicked. After refreshing the page, every client should also see the changes, so the button-state has to be stored somewhere on the server.
Then there will be another button, which sets the web page to its initial state (all buttons enabled). The purpose of this web page is that 2 persons can click buttons successivley until only one button is left enabled (the web page reloads itself every second on every client). This will be used to select a certain map from a map-pool of 9 maps.
My main problem is, to store the button states, so after refreshing the page the buttons should be still disabled if they were clicked. All clients should see the buttons as diabled once they refresh their pages. Do I have to implement a database for this or store the button states in xml or json? Do I need javascript, jquery, php or ajax for this? I do not want to make it very complicated, so if I need for example a database for this, I will probably just give up.
What I'm asking for: Any point in the right direction on how to implement a simple button that keeps its state after reloading the page would be much appreciated. I found a solution for this using JQuery, but it does not work for me (button does not preserve state after refreshing See here).
Thank you so much for any help!
Your server will need a data store (database) to save the values desired for each button.
Client Side
Set disabled attribute on all relevant buttons in your HTML. On (client-side) page load, fetch the value(s) from your server (database) and depending on what the returned value(s) are, .clearAttribute("disabled") on all buttons accordingly.
Server Side
Have your server set the disabled attribute on the HTML <button> elements based on values in your database prior to serving the HTML to your client(s).

ASP.Net Load Data from another page

i am facing one problem..
I have a page which has some templates related to user..
User use this template to send email..
User can have option to save this template and then he can load the saved templates...
What i want is on click on "Load Template" link. a new page appears which will display all the saved templates for logged in user. this page can contain grid. on select i want to close this load template page. and pass the text data back to previous page. which will display this template into text field. so that user can use saved templates.
How to do this using Asp.Net
You can do this using JavaScript, assuming the template selection window is opened with a call to window.open(). When the template is selected you can communicate and invoke methods (such as passing back the selected template ID) with code similar to this:
window.opener.templateSelected(selectedTemplateID);
window.close();
Here is information about window.opener
I believe that this may be what you're looking for. It's pretty straight forward and is in C#. It is done in .Net as opposed to client side JS.

Options for displaying existing ASP.NET WebForm in a lightbox

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.

asp.net mvc Upload File ajax

Hi ive got an mvc form with a fileupload functionality. Ive got an action that accepts an file and extracts thumbnails from it, after which the user can select the images and then proceed to submit the form. How can post the initial file via ajax, bearing in mind, this is not the final submission on the form and I want to retain user input. ie no postback
Thanks
I use the ajaxupload plugin for jQuery. Lots of sample code is provided on the site. From the site:
[The] plugin creates invisible file input on top of the button you provide, so when user clicks on your button the normal file selection window is shown. And after user selects a file, plugin submits form that contains file input to an iframe. So it isn’t true ajax upload, but brings same user experience.
Browsers don't allow the uploading of files via ajax. There are several good workarounds, however.

How do I - in ASP.NET save the info from a page when a user leaves the page?

In our CMS, we have a place in which we enable users to play around with their site hierarchy - move pages around, add and remove pages, etc.
We use drag & drop to implement moving pages around.
Each move has to saved in th DB, and exported to many HTML files. If we do that in every move, it will slow down the users. Therefore we thought that it's preferable to let the users play around as much as they want, saving each change to the DB, but only when they leave the page - to export their changes to the HTML files.
We thought of making the user click a "publish" button when they're ready to commit their changes, but we're afraid users won't remember to do that, because from their stand point once they've moved a page to a new place - the action is done. Another problem with the button is that it's inconsistent with the behavior of the other parts of the site (for example, when a user moves a text inside a page, the changes are saved automatically, as there is only 1 HTML file to update)
So how can we automatically save user changes on leaving the page?
You should warn the user when he leaves the page with javascript.
From http://www.siafoo.net/article/67:
Modern browsers have an event called window.beforeunload that is fired right when any event occurs that would cause the page to unload. This includes clicking on a link, submitting a form, or closing the tab or window.
Visit this page for a sample the works in most browsers:
http://www.webreference.com/dhtml/diner/beforeunload/bunload4.html
I think it's bad practice to save the page without asking the user first, thats not how normal web pages work.
Sample:
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
function unloadMess(){
mess = "Wait! You haven't finished."
return mess;
}
function setBunload(on){
window.onbeforeunload = (on) ? unloadMess : null;
}
setBunload(true);
//-->
</SCRIPT>
The easiest way I can think of is to store the page info each time the user moves items around using Ajax (e.g. with an UpdatePanel, onUpdated event, let it fire some script that updates the users page config.
Alternatively - .Net's WebParts implementation does this automatically without intervention by the programmer (unless you want to change the storage engine, it uses a local mdb in by default.
Use a "Publish" checkbox/button and when the user interacts with the page in a way that causes them to navigate away ask them if they want to publish if that box is NOT checked/button not clicked. Be aware that there are actions (closing the browser, accessing their favorites menu, etc.) that you will probably not want or not be able to prompt the user.
I would force them to click a button such as publish. That is a 'training' issue.
Automatically saving changes when they leave could have other ramifications. For example if a user opens up a record and plays around with it and has no intention of changing it, they close it, like a word document, excel, etc. . . I would have your site mimic that model.
You also have to remember that the web is a disconnected environment and is not required all web applications run like a windows application.
If the user doesn't click the publish/save button then there changes are not saved and that is up to them to remember to do.

Resources