AJAX Message Box Control Free Download - Asp.Net User Controls - Error, Alert, Info Messageboxes

ASP.NET Popup Message Box User Control

Update 31DEC08: Posted jQuery Alert Dialogs which creates these same dialogs using jQuery.

Alerting my users to some action that is about to occur or has occurred has always been a pain for me in web programming. Everyone has probably used Page.ClientScript.RegisterStartupScript to popup generic message boxes. Tonight I was looking for a better way to accomplish this task and came across Janko's post Create MessageBox user control using ASP.NET and CSS . He presents a great user control to display four types of messages. I decided to take things a little further by using the ModalPopup control from the AjaxControlToolkit as well as some additional CSS and images from Matt Berseth's post YUI Style Yes/No Confirm Dialog with the ModalPopupExtender. I also added the ability to set the height and width of the message container. Though far from perfect, I think its a good start for an evening's work. Please check it out and let me know if you have ideas to improve the control.

Demo | Download

Screenshot of End Product

errormessage

infomessage

successmessage

warningmessage

My to do list:

1. Add the ability to dynamically set the header text.
2. Overload for default height and width or maybe figure out how big the box should be based upon the message string length.

File Upload for Asp.Net Using AJAX - Power File Upload Free Trail

Fully-functional product containing all documentation and sample projects.

PowerWEB File Upload for ASP.NET Product Features

File Upload for ASP.NET is a set of components that use advanced Ajax techniques to transfer files from browser to web server while minimizing the server memory footprint. Animated progress bars are displayed for each file in the ProgressPanel control.

Interactive File Upload Functionality for ASP.NET

  • Upload multiple files using a single upload dialog
  • Progress bars displayed for each file in an upload operation
  • Cancel button optionally allows users to interrupt a file upload
  • Ajax uploads without Postbacks
Read what customers are saying >

Compare Upload Control Features

Feature Microsoft
Control
PowerWEB
Controls
Supports HTTP upload standards /styles/images/icons/check.gif /styles/images/icons/check.gif
Supports AJAX Uploads without Postback - /styles/images/icons/check.gif
Displays animated progress bars and statistics during file uploads - /styles/images/icons/check.gif
Customizable look and feel including image buttons and backgrounds - /styles/images/icons/check.gif
Supports multiple file uploads within a single dialog - /styles/images/icons/check.gif
Supports real time streaming of file data to one or more destinations during an upload - /styles/images/icons/check.gif
Want to know more?
Read "Why Buy PowerWEB File Upload for ASP.NET?" for a detailed comparison of product features

Customizable Look and Feel

  • Image buttons or standard HTML buttons
  • Background colors, borders, and images
  • Fonts and styles set on labels and values for simple localization
  • OpenFileDialog control allows uploads without displaying a "Browse" button

Efficient File Uploads for Low Server Overhead

  • Spool files directly to disk instead of server memory
  • Stream file data directly to any Stream interface
  • Customize temporary and final file destinations
  • Limit file upload sizes
" href="http://www.dart.com/pwfileup_whybuy.aspx#streaming">File Upload for ASP.NET Streaming Support >

Easy to use and Flexibility

  • Cross-browser compatibility
  • Drag, drop, and run - no form or web.config manipulation to get up and running
  • Samples projects included for C# and VB
  • Supports all .NET Framework versions
  • Compatible with Visual Studio 2008, as well as Visual Studio 2003, and 2005

AJAX Multiple Files Upload in Asp Dot Net Using Gaia Controls Free Download

Ajax Multiple FileUpload for ASP.NET

Every Web 2.0 site deserves a good Ajax FileUpload control. That means something that doesn't post back and leave you thinking if the upload was successful or not. For a fully functional website it's common to upload files for processing or usage. Examples include photos, data, text files, documents, etc. In this post we're going to cover one of the latest contributions to the Gaia Ajax control family. The FileUpload Control :-)

The control was created by Pavol and resides in the CommunityExtensions project. The original work can be found here. It has now been made available in the library and is to be shipped with Gaia Ajax 3.5 codename "Themis". Let's go ahead and have a look at how you can apply ajaxified FileUpload capabilities to your application. The control allows a user to select multiple files to upload and one file will be uploaded at the time.

Code Usage

You can configure it for a maximum allowed number of files. In ASPX markup the FileUpload control looks like this. Not all properties are set, but you can see the most important ones below. We've set the MaxFiles to 5, meaning no more than 5 files can be uploaded at any given time.

   1:  <gaia:FileUpload

   2:          ID="fileUpload"

   3:          runat="server"

   4:          TextHeader="Files to Upload. (Max 4MB per file)"

   5:          MaxFiles="5"

   6:          OnFileUploaded="fileUpload_onFileUploaded"

   7:          UploadOnce="false"

   8:          ImgLoadingSrc="Media/file-loader.gif"

   9:          CssClass="fup" >

  10:  gaia:FileUpload>

The most important thing is the OnFileUploaded event. This is fired on the server for each file that is uploaded. In the EventArgs you can get access to the PostFile and decide what you want to do with it. Here we're just calling SaveAs() to persist the file to disk. If the uploaded was successful you can send a friendly text message back to the client.
   1:  protected void fileUpload_onFileUploaded(object sender, FileUpload.FileUploadEventArgs e)

   2:  {

   3:      string fileName = Server.MapPath("~/Images/") + e.PostedFile.FileName;

   4:      e.PostedFile.SaveAs(fileName);

   5:      e.InfoText = "File was successfully uploaded";

   6:  }

Having a FileUpload citizen in the Control suite is a great addition and we've already gotten extensive feedback on the value-add this provides for the library. In the samples that ships with Gaia we've added a quick demo in the DynamicImage sample to demonstrate further use of the FileUpload control.Here you can upload files that will be made available for use in the DynamicImage sample. Ps! This feature is only enabled when the samples are run from localhost to avoid uploading too many images to our servers.

Control can be added dynamically on the page just like any other control and you can have more than one control on the page if you like.

Attributes

  • UploadOnce Set to true if you want to upload files only once and then the control becomes disabled
  • MaxFiles - how many files do you want to upload at one moment
  • MakeCallback - Set to true if you wish a callback after all files has been uploaded to the server.
  • ImgLoadingSrc - if you want to show image while uploading the file. Also you can set all texts through attributes. Just check the code for all of them. They all start with Text. Like TextHeader, TextUploaded etc.

Events

  • FileUploaded - file has been uploaded. If you are uploading three files, then this will event will fire three times.
  • UploadFinished - after all files has been uploaded, you'll get this event. Also if you want to modify any controls in your page. Do it in this event not in FileUploaded

Hopefully this will not be the last contribution to the CommunityExtensions project. All members of the Gaia Community have permissions to upload controls/extensions to the WIKI. A couple of days ago another community member, Nathan posted the InPlaceCollectionEditor.

Gaia Ajax offers an extensible solution for building advanced controls, either in pure C# or with a thin javascript file to embed advanced functionality. This offers you unlimited opportunities when using Gaia Ajax as the main toolkit for building the presentation layer of your web applications.

Ajax Progress Bar Asp.Net Free Download On Page Load

ASP.NET AJAX Progress Bar Control

If you use AJAX in your web app's, you no doubt have made use of some sort of progress/status indicator that lets the user know that some operation is currently executing.  In the app I am currently working on we use an animated gif for this.  It works great, but sometimes you might find it nice to have more control over the indicator - i.e. interacting with it via JavaScript and styling it using CSS.

image

So I did a little research and found a nice example of one built using script.aculo.us.  The demo page looked great so I downloaded the source to get a feel for how it worked.  I liked what I saw so I thought I would create a newAjaxControlToolkit control based on this example.  My original goal was just to port it over to ASP.NET, but as I started playing around with it I thought I might make a few changes to it as well.  So during the process of porting it, I made the following tweaks

  • I added a mode that runs the progress bar from 0 to 100 continuously.  This mode would be useful for scenarios where you don't know how long an operations would run for (like a typical partial postback)
  • The original requires different images for progress indicators of different widths.  I chose to use a repeating background image instead so I could use a single progress image no matter the width of the control.
  • I add an updating CSS class to the control while the progress bar is running.  In my demo page I use this to darken the percentage while the indicator is running.  I was also thinking about adding the current percentage to the class as well so you could have a custom style applied depending upon what the current percentage is.  Then you could do something like .progress .100 {  } to control the styling when the indicator is displaying 100%.
  • I used a skinning approach that is very similar to the Toolkit's Tab control.  I went ahead and created a bunch of sample skins (shown above) just to make sure my skinning technique worked alright.

Below are some details on how the controls - including how to add one to your page, interacting with it from JavaScript and creating custom skins using CSS.  Read on if you are interested and don't forget to check out the live demo and download.  I built it using .Net 3.5 and Toolkit version 3.5.11119.0, but I think it could be ported back to .Net 2.0 without too many issues. 

Live Demo (IE6, IE7, FF and Opera) | Download

 

Using the Control

The download contains plenty of examples of how to interact with the control, but here is some sample markup that specifies the progress mode as well as the width ...

   1:   
   2:  <mb:ProgressControl ID="ProgressControl1" runat="server" Mode="Continuous" Width="150px" />
   3:   
   4:  <mb:ProgressControl ID="ProgressControl12" runat="server" Mode="Manual" Width="70px" /> 

 

When the control is in Continuous mode, you can start and stop the progress animation by using the play() and stop()JavaScript functions

   1:  //  start the indicator
   2:  $find('ProgressControl1').play();
   3:   
   4:  //  stop it
   5:  $find('ProgressControl1').stop();

 

And when the control is in Manual mode, you can use the set_percentage to manually change the percentage value.  You can either provide an absolute value like in the first example, or a value that is relative to what ever the current value is - like the second example.

   1:  //  set the percentage to 62
   2:  $find('ProgressControl1').set_percentage(62);
   3:   
   4:  //  increase the percentage by 15
   5:  $find('ProgressControl1').set_percentage('+15');

 

HTML Emitted by the Control

Below is the markup the control emits.  1 DIV for containing the progress image, 1 DIV for displaying the percentage text, 2 DIV's for applying a border and an outer DIV that wraps it all.

   1:  <div class="ajax__progress" class="ajax__progress" id="ProgressControl1">
   2:      
   3:      <div class="ajax__progress_outer" id="ProgressControl1_outer">
   4:          <div class="ajax__progress_inner" id="ProgressControl1_inner">
   5:              
   6:              <div class="ajax__progress_indicator" id="ProgressControl1_indicator" />
   7:          div>
   8:      div>
   9:      
  10:      <div class="ajax__progress_info" id="ProgressControl1_info">75%div>
  11:  div>

 

Skinning the Control

To skin the control, you need to set the CssClass property of the ProgressControl to the name of the CSS class that defines your custom skin.  For the skin portion of the demo page I have defined 6 custom themes.  Below is the sample markup for this section ... 

   1:  <mb:ProgressControl ID="ProgressControl4" runat="server" CssClass="green" Mode="Manual" Width="200px" />            
   2:  <mb:ProgressControl ID="ProgressControl5" runat="server" CssClass="yelllow" Mode="Manual" Width="200px" />            
   3:  <mb:ProgressControl ID="ProgressControl6" runat="server" CssClass="orange" Mode="Manual" Width="200px" />            
   4:  <mb:ProgressControl ID="ProgressControl7" runat="server" CssClass="red" Mode="Manual" Width="200px" />            
   5:  <mb:ProgressControl ID="ProgressControl8" runat="server" CssClass="lightblue" Mode="Manual" Width="200px" />            
   6:  <mb:ProgressControl ID="ProgressControl11" runat="server" CssClass="solidblue" Mode="Manual" Width="200px" />            
 
 

And here are the CSS style rules that apply the styles for these skins

image

One of the sample skins I made is roughly based on the XP style progress indicator.  To create this custom skin, I first created the background image that I want to use for the indicator (I am using a 6 x 9 image)

image

then I use the .ajax__progress_indicator and .ajax__progress_inner classes to override the default skins height and progress image - Simple!

image

And here is how it looks ...

image

Screen shots of the Control's Features

Here are some static images that show off some of the control;s features ...

Continuous Mode

Progress indicator continuously fills the region from left to right.

image

Fluid Width

Progress indicator continuously fills the region from left to right.

image

Manual Mode - Update Absolute Percentage

Use the JavaScript API to set the percentage an absolute value

image

Manual Mode - Update Relative Percentage

Use the JavaScript API to set the percentage to a relative value

image

Skins

Use CSS to control the progress indicators look and feel

image

AJAX Operations

Example of displaying the indicator for AJAX operations

image

Modal Popup

An example using the progress control with the Tookit's ModalPopup control

image

That's it.  Enjoy!

My Blog List