Category Archives: ASP

HTML 5 ASP.NET Drag n Drop IE Chrome Firefox

drag and drop, cross browser support in asp.net

part of a project involved allowing a user to select from a list of 200+ items, and it needed to be easy. So, we decided to provide users with a drag and drop facility

Drag and drop has been around for quite some time, and its a little tricky to get it right. I’m going to show you the basics that i used to enable a drag and drop between lists

What are we after?

we want draggable lists that will do the following

  • Two lists
  • drag and drop
  • support multi select
  • support re order of list items

The end result

this is what the HTML will look like once the page has rendered, go ahead, give it a try. Try selecting multiple items then dragging them over

as you play around with the drag and drop, monitor your browser console to view the events that are firing

notice that when you change the selected fields the text area displays a comma separated list of selected items

Filter list
Choice fields

  • Name 1
  • Name 2
  • Name 3
  • Name 4
  • Name 5
  • Name 6
  • Name 7
  Selected fields

  • Name 8
  • Name 9
  • Name 10
  • Name 11
  • Name 12
  • Name 13
  • Name 14

 

This drag and drop is tied together with just 4 javascript functions, tied to the browser drag events

  • handleStartDrag()
  • handleDragEnter()
  • handleDragOver()
  • handleDropped()

there are ancillary functions that bind events and respond to the filter

  • fltrChanged()
  • UpdatehiddenFields()
  • bindUIactions()

How its done

In a nutshell

The rendered HTML

So whats going on ?

Well a few things are happening here, CSS is styling our stuff. ASP.NET is loading the repeater and generating our “li” elements for the un-ordered lists. And jQuery is doing the rest

the keys points to note here are:

  • the classes used {ctlDrop, ctlDrag} (for CSS and more importantly jQuery hooks)
  • the draggable attribute on the items tell the browser these are allowed to be dragged
  • the use if ID‘s and Data- attributes as hooks for our functionality

how it works

first up i will say you have to do a few inexplicable things to get drag and drop working, but its a given, just do it and don’t ask, or you’ll simply lose your mind like many other techies who ask the “why did they do that?” question. like me

1. enable jQuery to support passing a payload across drag n drop.
2. declare a variable in your class to hold the last entered item that the drag action has entered.

The singleton script layout looks like this

 

The Code

Loading the form

The code infront

jumping straight in, we need two lists, driven by some data source. Here is how we load the lists, using .net repeaters

Notice we have a hidden field in the right hand column, this will be used to stored the selected values, as the selection changes

Code Behind – the repeater code

On our data bind we add list items to the list, and some information to the each list item. Class, draggable, data-fieldName, data-ordinal.

jQuery – the ancillary functions

bindUIactions()

We will bind to the dragover and the drop event on the elements with class ctlDrop

We will bind to the dragstart, dragenter, drop and click events of the elements with class ctlDrag

Finally we will bind to the txtfltr element so we can filter our list

UpdateHiddenFields()

handling the collecting of the selected items into a comma separated list is relatively simple, and this function will be called from the end of the drop event

jQuery – The Drag and Drop routines

handleStartDrag()

The start drag routine, a must have to set the sllowed effect property, this is searchable on the drop if you need to.

handleDragOver()

The drag over routine, this is another must have, without this, obscurely no draggable item will drop. Don’t ask just do

handleDragEnter()

The drag enter routine, this is required because internet explorer doesn’t correctly record which element the drop occurs over, so here we record the last entered element before the drop. And thus we have cross browser compatibility

handleDropped()

The drop routine, this is where all of the hard work is done. If you are a public facing website you might want to add screening of the mime type that is dropped, just incase its not what you are expecting. I’m not doing that here, our project was internal

 

the javascript file is available for download here dragndrop

the CSS is available for download here dragndrop CSS

String.replace ignorecase

Replace a string but ignore the case, I keep forgetting about this little handy function

Heres an example of usage

ASP.NET Master Page Nested inheritance

I seem to be asked this a lot so i thought i would mention this online so hopefully people will no longer ask me, they’ll find the answer when they ask google

You are trying to inherit from a masterpage and you recieve the following error

the page has one or more < asp:content> that do not correspond with < asp:ContentPlaceHolder> controls in masterpage

Script tags are the culprit around 80% of the time. For some reason the visual studio designer doesnt like not fully closing your script tags at design time.

Change all of you script tags from this

< script type="text/javascript" src="js/myjs.js" /> 

correcting it to this:

< script type="text/javascript" src="js/myjs.js" ><  /script>

Any you should be good to go.

VAT Information Exchange System (VIES)

What is the VIES ?
It is an electronic means of transmitting information relating to VAT-registration (= validity of VAT-numbers) of companies registered in EU. Furthermore, information relating to (tax exempt) intra-Community supplies between Member States’ administrations is also transmitted via VIES

The Taxation and Custom Union has provided us developers a nice little webservice to use for validating VAT numbers realtime.

This is their public facing page for one off manual validation
http://ec.europa.eu/taxation_customs/vies/
The service to be used by your application can be found here
http://ec.europa.eu/taxation_customs/vies/checkVatService.wsdl

The FAQ is here http://ec.europa.eu/taxation_customs/vies/faqvies.do

Ok so now i will demonstrate how to use this in your Visual Studio based application

If you have Visual Studio 2010, and your building a web app, in solution explorer right click the web app root node and you should see “Add Web Reference”, this will present you with the “Add Web Reference” dialog box
Paste the above web reference link into the “URL” and hit the “GO” green arrow

VIES Visual Studio Web Reference

Now Hit “Add Reference” and Visual Studio creates the Web Server Proxy and Wrapper Class.
Ok so now your project has the reference lets see how to use it

On your page that you wish to validate a vat number you should do the following
1. Collect a valid 2 character country code from the User
2. Collect a valid vat number from the User
3. Perform the needed filter on both of these values prior to envoking the webservice
4. Verify the return from the service and take action

First off you will need to import the reference into your page. For ease I use asp.net vb, C# will be similar and there are plenty of converters out there to see the code in c#

now your ready to use the reference
For this example we will be supplying country code and VAT number only. There are various other methods available but this suited me so its the only demo you will be getting.
The rules
1.The country code must be valid
2. The VAT number must contain no spaces and only be numerical numbers
3. We pass the validation boolean as a byref, if you also wanted to see what the company name and address the EU have on file for the company the webservice verified, you can pass two strings “Name” and “address” byref and view the content upon return.

This is how i do it

Most of the above code is preparation, there are very few ines tha perform the webservice method.
The actual call is made in the try catch

My particular app verifies the value of IsValid in the calling function, how you validate the values is up to you, on asuccessful return the value will be true and the byref Name and Add will contain the registered company name and address.

For your reference there is also another way to reference the web service described here http://softwareobjects.net/technology/other/vies-vat-number-checker/