Common scenarios are when a user submits something and you want to wait for a response without refreshing the page.
This is easy!
First add two NuGet packages to your web application:
install-package jQuery-UI
install-package jQuery.UI.Combined
Then use the following mark-up:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" /> <link href="Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" /> <link href="Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.9.0.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> $(document).ready(function () { $("#progressDialog").dialog({ autoOpen: false, draggable: false, modal: true, resizable: false, closeOnEscape: false, open: progressDialogOpen }); }); function progressDialogOpen() { $(".ui-dialog-titlebar-close", this.parentNode).hide(); } function progressDialogClose() { $("#progressDialog").dialog('close'); } function doSomethingOpen() { $("#progressDialog").dialog('open'); setTimeout(progressDialogClose, 3000); return false; } function doSomethingClose() { progressDialogClose(); } </script> <button onclick="doSomethingOpen()">Open</button> <button onclick="doSomethingClose()">Close</button> <div id="progressDialog" title="Processing"> <img alt="Processing..." src="Content/images/YourAnimatedProcessingImage.gif" /> </div> </body> </html>
Note that this example just puts in a time out to simulate something happening. You can replace the call to "setTimeout" with some server call.
And that is it.
Posts
0 comments:
Post a Comment