Blog of developer Mikkel Ovesen » control http://blog.ovesens.net My thoughts, stuff I need to remember or things I just want to share with the world Thu, 19 Jan 2012 11:55:29 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 New ASP.NET Charting Control http://blog.ovesens.net/2008/11/new-asp-net-charting-control/ http://blog.ovesens.net/2008/11/new-asp-net-charting-control/#comments Wed, 26 Nov 2008 10:48:00 +0000 Mikkel Ovesen /post/2008/11/26/New-ASPNET-Charting-Control.aspx Continue reading →]]> Microsoft released a free ASP.NET charting controls.

Read more about it here:

http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx

Or take a qucik look directly on these following link:

Microsoft recently released a cool new ASP.NET server control – <asp:chart /> – that can be used for free with ASP.NET 3.5 to enable rich browser-based charting scenarios:

]]> http://blog.ovesens.net/2008/11/new-asp-net-charting-control/feed/ 0 jQuery Ajax uploader plugin (with progress bar!) http://blog.ovesens.net/2008/11/jquery-ajax-uploader-plugin-with-progress-bar/ http://blog.ovesens.net/2008/11/jquery-ajax-uploader-plugin-with-progress-bar/#comments Wed, 26 Nov 2008 10:20:00 +0000 Mikkel Ovesen /post/2008/11/26/jQuery-Ajax-uploader-plugin-(with-progress-bar!).aspx Continue reading →]]> Original post here:

http://blog.codeville.net/2008/11/24/jquery-ajax-uploader-plugin-with-progress-bar/

——————————————

Do your web applications ever involve letting the user upload a file? If so, how’s the end-user experience: do you show a nice progress bar during the upload, or do you just leave the user waiting for minutes, with no clue when (if ever) the upload will complete?

Please show a progress bar, otherwise users will be justified in hating you. Check out this video to see one way it can work:


If you’re not seeing a video here, your feed reader is hiding it. View this post in a browser to see the video.

Those of you who attended my ASP.NET MVC talk at DDD7 last weekend might recognise this ;)

To create this behaviour, I implemented a simple jQuery plugin that replaces normal <input type=”file”/> elements with funky Ajaxy asynchronous uploader widgets. Behind the scenes, it uses the excellent SWFUpload library. All the clever stuff is in SWFUpload; all I did is set up the progress bar / cancellation behaviours, and make it easier to use if you’re already using jQuery.

Notice that it still works if the user doesn’t have JavaScript running in their browser. It gracefully degrades to “traditional” <input type=”file”/> behaviour. This is known as progressive enhancement or unobtrusive JavaScript.

Download

Here are all the files you need to accomplish this: Download jQuery-asyncUpload-0.1.js.

Setup instructions

Uploading files via Ajax, by nature, involves setting things up both on the server and on the client. The most reliable way to get this working successfully in your own app is to download the demo ASP.NET MVC project (see the end of this post) and copy the relevant aspects of its workings into your own app.

Nonetheless, here is an outline of the steps needed to get jQuery-asyncUpload-0.1.js working in your app, assuming you’ve already got jQuery in there:

1.  Add jQuery-asyncUpload-0.1.js, swfupload.js, and swfupload.swf to your project. In an ASP.NET MVC app, you might like to put these in /Scripts.

2.  Add script tags to reference the JavaScript files. 

<head>
    <!-- Adjust the file paths as needed for your project -->
    <script src="/Scripts/jquery-1.2.6.min.js"></script>
    <script src="/Scripts/swfupload.js"></script>
    <script src="/Scripts/jquery-asyncUpload-0.1.js"></script>
</head>

3.  Add an old-style HTML file upload control to one of your pages: 

<input type="file" id="yourID" name="yourID" />

4. Add a jQuery statement that replaces this file upload control with an asynchronous uploader when JavaScript is available: 

<script>
$(function() {
        $("#yourID").makeAsyncUploader({
            upload_url: "/Home/AsyncUpload",
flash_url: '/Scripts/swfupload.swf',
button_image_url: '/Scripts/blankButton.png'
        });
});
</script>

These options are explained later in this blog post. You must make sure to correctly reference the location of swfupload.swf, and put a button image wherever button_image_url specifies.

5. Add some CSS rules to style the progress bar. I’m using the following, though bear in mind it has some nasty hacks to make IE do an inline float properly. CSS gurus might structure this more cleanly. 

DIV.ProgressBar { width: 100px; padding: 0; border: 1px solid black; margin-right: 1em; height:.75em; margin-left:1em; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; }
DIV.ProgressBar DIV { background-color: Green; font-size: 1pt; height:100%; float:left; }
SPAN.asyncUploader OBJECT { position: relative; top: 5px; left: 10px; }
5. At this point, check you have something working. The visitor should now be able to select a file to upload, and should immediately get an alert box saying “Error 404” – that’s because you’ve configured the control to do an asynchronous upload to /Home/AsyncUpload, but your web app probably doesn’t have anything at that URL.

Also, if you use FireBug to inspect the DOM, you’ll see that your <input type=”file” /> has been dynamically replaced with the following: 

<span class="asyncUploader">
   <div class="ProgressBar" style="display: none;">
<!-- This is the progress bar itself - you can style it with CSS -->
   </div>
   <object type="application/x-shockwave-flash" ... >
       ... SWF config here ...
</object>
   <input type="hidden" name="yourID_filename"/>
   <input type="hidden" name="yourID_guid"/>
</span>

Those two hidden inputs let you keep track of any file that was asynchronously uploaded.

6. Work on your web app so that it *does* handle file uploads to /Home/AsyncUpload (or whatever URL you’ve configured in step 4). The handler should save the uploaded file to disk, then return a unique token, such as a GUID or filename, to will identify the file you just uploaded. See the demo project for a simple way to do this using ASP.NET MVC.

7. When the containing form is finally submitted, check whether a file was sent with the request. This will happen if the user doesn’t have JavaScript enabled, as they’ll revert to traditional uploading behaviour. Also check for the hidden inputs called yourID_guid and yourID_filename – these will be populated if the visitor *does* have JavaScript enabled, and reflect any file that was uploaded asynchronously.

Further configuration

The asynchronous uploader plugin has plenty of properties you can configure in step 4 above:

Property Meaning Example
flash_url Location of swfupload.swf “/Scripts/swfupload.swf”
upload_url URL to which files will be asynchronously uploaded “/Home/AsyncUpload”
file_size_limit Files above this size will be rejected before uploading even begins “3 MB”
file_types “Select files” popup will only show files of this type “*.jpg, *.gif”
file_types_description “Select files” popup will use this caption to describe the selectable file types “All images”
button_image_url Location of an image to be used for the “Choose file” button “blankButton.png”
button_image_width, button_image_height Dimensions of “Choose file” button 109
button_text Text that appears on the “Choose file” button "<font face=’Arial’ size=’13pt’>Choose file</font>"
disableDuringUpload Elements matching this jQuery selector will be disabled while an upload is in progress (useful to prevent form submission during async upload). “INPUT[type=’submit’]”
existingFilename Prepopulates the control with the name of a file already uploaded (useful when retaining state across multiple posts) “somefile.zip”
existingGuid Prepopulates the control with the arbitrary unique token you’ve given to a file already uploaded (useful when retaining state across multiple posts) “ec42555e-bfe7-45b0-87bf-36b1299f0398”
existingFileSize Prepopulates the control with the size, in bytes, of a file already uploaded (useful when retaining state across multiple posts) 548293
debug Turns on SWFUpload’s debugging console true
]]> http://blog.ovesens.net/2008/11/jquery-ajax-uploader-plugin-with-progress-bar/feed/ 0 Dynamic controls in ASP.NET http://blog.ovesens.net/2008/11/dynamic-controls-in-asp-net/ http://blog.ovesens.net/2008/11/dynamic-controls-in-asp-net/#comments Tue, 25 Nov 2008 19:42:00 +0000 Mikkel Ovesen /post/2008/11/25/Dynamic-controls-in-ASPNET.aspx Continue reading →]]> As many articles point out it is important to load dynamic control in the Init event of the life cycle. This is important if you want to preserve the view state.

Another thing I found out… you need to instantiate the control, add it to a ControlCollection and then set the properties of the control. If you set the properties before it is added to a ControlCollection. The view state does not work.

This is wrong

BaseProductControl control = (BaseProductControl)this.Page.LoadControl(product.ViewControl);
control.ProductId = productId;
ProductViewPlaceHolder.Controls.Add(control);

This will work

BaseProductControl control = (BaseProductControl)this.Page.LoadControl(product.ViewControl);
ProductViewPlaceHolder.Controls.Add(control);
control.ProductId = productId;

]]> http://blog.ovesens.net/2008/11/dynamic-controls-in-asp-net/feed/ 0 How Do I: Build a Custom ASP.NET AJAX Server Control? http://blog.ovesens.net/2007/09/how-do-i-build-a-custom-asp-net-ajax-server-control/ http://blog.ovesens.net/2007/09/how-do-i-build-a-custom-asp-net-ajax-server-control/#comments Sat, 29 Sep 2007 13:50:00 +0000 Mikkel Ovesen /post/2007/09/29/How-Do-I-Build-a-Custom-ASPNET-AJAX-Server-Control.aspx Continue reading →]]> Original post here:

http://www.asp.net/learn/ajax-videos/video-170.aspx

—

Learn how to create a custom Web server control with ASP.NET AJAX functionality using the AJAX extensions in the Microsoft AJAX Library. This video walks you through both the server-side .NET code and the client-side JavaScript code, and provides an explanation of the ‘prototype’ concept. The custom ASP.NET AJAX control can then be used in an .aspx page like any other server control.

View video: WinVideo-ASP-AJAXCustomAJAXControl.wmv (12.85 mb)

Play Video

]]> http://blog.ovesens.net/2007/09/how-do-i-build-a-custom-asp-net-ajax-server-control/feed/ 0 How Do I: Build Custom Server Controls that Work With or Without ASP.NET AJAX? http://blog.ovesens.net/2007/09/how-do-i-build-custom-server-controls-that-work-with-or-without-asp-net-ajax/ http://blog.ovesens.net/2007/09/how-do-i-build-custom-server-controls-that-work-with-or-without-asp-net-ajax/#comments Wed, 19 Sep 2007 14:37:00 +0000 Mikkel Ovesen /post/2007/09/19/How-Do-I-Build-Custom-Server-Controls-that-Work-With-or-Without-ASPNET-AJAX.aspx Continue reading →]]> View original post here:
http://www.asp.net/learn/ajax-videos/video-186.aspx
—
Play Video

Do you have an idea for a custom server control that should be able to work without ASP.NET AJAX, yet could take advantage of ASP.NET AJAX if it is available? In this video we learn how to build a custom server control that does not reference the ASP.NET AJAX assembly, but uses Reflection to “play nice” with the ASP.NET AJAX UpdatePanel.

Presented by Chris Pels

Duration: 19 minutes, 21 seconds

Date: 9 July 2007

]]> http://blog.ovesens.net/2007/09/how-do-i-build-custom-server-controls-that-work-with-or-without-asp-net-ajax/feed/ 0 Creating a GridView with Resizable Column Headers http://blog.ovesens.net/2007/09/creating-a-gridview-with-resizable-column-headers/ http://blog.ovesens.net/2007/09/creating-a-gridview-with-resizable-column-headers/#comments Wed, 19 Sep 2007 14:31:00 +0000 Mikkel Ovesen /post/2007/09/19/Creating-a-GridView-with-Resizable-Column-Headers.aspx Continue reading →]]> View the original post here:
http://mattberseth.com/blog/2007/08/creating_a_gridview_with_resiz.html

—

I was recently reading Dan Wahlin’s excellent ‘How To’ for creating a GridView extender control.  While I was going through his code samples, I thought it might be interesting to create another GridView extender that allows you to resize the column widths of the GridView by clicking and dragging the header cell borders.  Before I went down the path of actually implementing the extender control, I wanted to get a feel for what the client side code for handling this might look like.  So I quick created a sample application where I added this functionality to the Google Analytics GridView I blogged about in an earlier post.

** Because this sample is a proof of concept, I only tested in IE7.  If I move the code to an extender control I will go back and test it with other browsers.

Live Demo (Updated: 03-06-2011 – Link may not work) | Download

Before I get into the implementation details, here is a quick screen shot of the grid.  Unfortunately the mouse cursor didn’t come across in the screen shot, but when it is placed over the cell borders in the header row, it displays the east/west pointing arrow.

Adding this behavior to the existing GridView required implementing a handful of JavaScript functions.  My approach for implementing this features was to do the following:

  1. Handle each of the header cells’s mousemove events to determine when the user has the cursor placed roughly over the cell’s right hand border.  If a resize is already in processes then I use this event to determine what the new width of the column should be
  2. Handle each of the header cell’s mousedown events to determine when the resizing begins
  3. Handle the document’s mouseup event.  When this occurs I make sure that the resize has stopped
  4. Handle the document’s selectstart event.  I cancel this event if a resize is currently in executing.  Doing this make’s sure that the header cell’s text isn’t highlighted when I am resizing the cell.  I learned this trick from the AjaxControlToolkit’s ResizeableControlExtender.  Here is a screen shot of what this would look like if you don’t cancel this event:

 

 

 

 

pageLoad Event Handler

First, I added the pageLoad JavaScript function to my page.  The ASP.NET AJAX framework will call this method for you so you will not have to worry about wiring it up.  I use this method to add event handlers to the mousemove and mousedown events for the table’s header cells.  Additionally I add handlers for the document level mouseup and selectstart events as follows …

//  true when a header is currently being resizedvar _isResizing;//  a reference to the header column that is being resizedvar _element;//  an array of all of the tables header cellsvar _ths;function pageLoad(args){    //  get all of the th elements from the gridview    _ths = $get('gvCustomers').getElementsByTagName('TH');        //  if the grid has at least one th element    if(_ths.length > 1){            for(i = 0; i < _ths.length; i++){            //  determine the widths            _ths[i].style.width = Sys.UI.DomElement.getBounds(_ths[i]).width + 'px';                    //  attach the mousemove and mousedown events            if(i < _ths.length - 1){                $addHandler(_ths[i], 'mousemove', _onMouseMove);                $addHandler(_ths[i], 'mousedown', _onMouseDown);            }        }        //  add a global mouseup handler                    $addHandler(document, 'mouseup', _onMouseUp);        //  add a global selectstart handler        $addHandler(document, 'selectstart', _onSelectStart);    }       }

TH’s mousemove Event

Next, I add logic to the mousemove event handler.  This event will fire everytime the mouse position changes while the cursor is over any of the header cells.  The code in this handler first checks to see if we are currently resizing a cell.  If we are, we do a little math to figure out what the new width of the column being resized needs to be.  If a resize is not currently taking place, then I check to see how close the mouse cursor is to the cells right hand border.  If it is within 2 pixels I display the east/west cursor so the user knows they can resize the cell.  Here is the JavaScript code for this handler …

function _onMouseMove(args){        if(_isResizing){                //  determine the new width of the header        var bounds = Sys.UI.DomElement.getBounds(_element);         var width = args.clientX - bounds.x;                //  we set the minimum width to 1 px, so make        //  sure it is at least this before bothering to        //  calculate the new width        if(width > 1){                    //  get the next th element so we can adjust its size as well            var nextColumn = _element.nextSibling;            var nextColumnWidth;            if(width < _toNumber(_element.style.width)){                //  make the next column bigger                nextColumnWidth = _toNumber(nextColumn.style.width) + _toNumber(_element.style.width) - width;            }            else if(width > _toNumber(_element.style.width)){                //  make the next column smaller                nextColumnWidth = _toNumber(nextColumn.style.width) - (width - _toNumber(_element.style.width));            }                           //  we also don't want to shrink this width to less than one pixel,            //  so make sure of this before resizing ...            if(nextColumnWidth > 1){                _element.style.width = width + 'px';                nextColumn.style.width = nextColumnWidth + 'px';            }        }    }       else{        //  get the bounds of the element.  If the mouse cursor is within        //  2px of the border, display the e-cursor -> cursor:e-resize        var bounds = Sys.UI.DomElement.getBounds(args.target);        if(Math.abs((bounds.x + bounds.width) - (args.clientX)) <= 2) {            args.target.style.cursor = 'e-resize';        }          else{            args.target.style.cursor = '';        }              }         }

TH’s mousedown Event

The mousedown event handler if very simple.  If checks if the cursor is style is ‘e-resize’.  If so it sets the _isResizing bit to true so the other handlers know that a resize is currently taking place.  It also grabs the header cell that is being resized.  Here is the code …

function _onMouseDown(args){    //  if the user clicks the mouse button while    //  the cursor is in the resize position, it means    //  they want to start resizing.  Set _isResizing to true    //  and grab the th element that is being resized    if(args.target.style.cursor == 'e-resize') {        _isResizing = true;        _element = args.target;                   }                    }

document’s mouseup Event

Next, I added code for the mouseup event.  This is a handler is setup at the document level so no matter where the user lets go of the button this logic will be executed.  This handler does 2 things: resets the _isResizing and _element values back to there unitialized state and resets the header cells cursor style back to its initial state.  Here is the code for this …

function _onMouseUp(args){    //  the user let go of the mouse - so    //  they are done resizing the header.  Reset    //  everything back    if(_isResizing){                //  set back to default values        _isResizing = false;        _element = null;                //  make sure the cursor is set back to default        for(i = 0; i < _ths.length; i++){               _ths[i].style.cursor = '';        }    }}

document’s selectstart Event

Finally, the last handler.  Like I mentioned earlier, I added this one to prevent the header cell’s text from highlighting as I am resizing the cells.  All this function does is cancel’s the event if a resize is currently executing.  Here is the code for this …

function _onSelectStart(args){    // Don't allow selection during drag    if(_isResizing){        args.preventDefault();        return false;    }}

That’s it. Enjoy!

]]> http://blog.ovesens.net/2007/09/creating-a-gridview-with-resizable-column-headers/feed/ 3 ASP.NET Charting http://blog.ovesens.net/2007/09/asp-net-charting/ http://blog.ovesens.net/2007/09/asp-net-charting/#comments Wed, 19 Sep 2007 14:21:00 +0000 Mikkel Ovesen /post/2007/09/19/ASPNET-Charting.aspx Continue reading →]]> Dundas and other Chart controls are often very expensive, that makes them unattractive for small and lowbudget projects.

Well, free charting controls do exist. NPlot is a free charting library for .NET (http://www.nplot.com/), WebChart is also free (http://www.carlosag.net/Tools/WebChart/Default.aspx)

The guys from rolla have written an article here about it:

http://aspnet.4guysfromrolla.com/articles/072507-1.aspx

NPlot example:

WebChart

Chart Sample

]]> http://blog.ovesens.net/2007/09/asp-net-charting/feed/ 0