Using REDIPS.drag to add drag and drop to your .Net webapplication
Architecture, security and coding
Written by Division by Zero   
Saturday, 19 May 2012 21:09

The REDIPS.drag is a free Javascript drag and drop library. I't easy to use and flexible. I love it. Here is an example how to integrate this library to you .Net webapplication. The redips site and the library download provides a lot of examples on how to work with this library. This example will focus on using it in a .Net page.

At first we will setup the page. In the header we will include the library and our own configuration script (dragdrop.js):

    <script type="text/javascript" src="/js/redips-drag-min.js"></script>
    <script type="text/javascript" src="/js/dragdrop.js"></script>

Then you can add the div's (that will be draggable, see the examples coming with the library) to the page. I prefer to add an UpdatePanel around it to make the drag and drop actions and the postback that will follow it seem fluent. The content of the page is copied from one of the examples. At the end a hidden field is added (Id is DragAction). This will be used to contain the information on which element is dropped on which location.

<asp:UpdatePanel ID="upPage" UpdateMode="Conditional" runat="server">
<ContentTemplate>
    <div>
            <div id="drag">
                <div id="draggableContent">
                    <table id="tblPage" clientidmode="Static" runat="server">
                        <tbody>
                            <tr>
                                <td id="Cell_1_1" clientidmode="Static" runat="server"></td>
                                <td id="Cell_1_2" clientidmode="Static" runat="server"></td>
                                <td id="Cell_1_3" clientidmode="Static" runat="server"></td>
                                <td id="Cell_1_4" clientidmode="Static" runat="server" class="upper_right"></td>
                            </tr>
                            <tr>
                                <td id="Cell_2_1" clientidmode="Static" runat="server"></td>
                                <td id="Cell_2_2" clientidmode="Static" runat="server"></td>
                                <td id="Cell_2_3" clientidmode="Static" runat="server"></td>
                                <td id="Cell_2_4" clientidmode="Static" runat="server"></td>
                            </tr>
                            <tr>
                                <td id="Cell_3_1" clientidmode="Static" runat="server"></td>
                                <td id="Cell_3_2" clientidmode="Static" runat="server"></td>
                                <td id="Cell_3_3" clientidmode="Static" runat="server"></td>
                                <td id="Cell_3_4" clientidmode="Static" runat="server"></td>
                            </tr>
                            <tr>
                                <td id="Cell_4_1" clientidmode="Static" runat="server" class="lower_left"></td>
                                <td id="Cell_4_2" clientidmode="Static" runat="server"></td>
                                <td id="Cell_4_3" clientidmode="Static" runat="server"></td>
                                <td id="Cell_4_4" clientidmode="Static" runat="server"></td>
                            </tr>
                        </tbody>
                    </table>
                </div><!-- right container -->
            </div><!-- drag container -->
        </div>
        <asp:HiddenField ID="dragAction" ClientIDMode="Static" runat="server" />
    </ContentTemplate>
    </asp:UpdatePanel>

In the DragDrop.js we will setup de drag and drop actions. Here we will handle the item dropped event and add the information to the dragAction hidden field. Then it will submit the form (thus perform a postback).

// define redips_init variable
var redips_init;
// redips initialization
redips_init = function () {
    // reference to the REDIPS.drag
    var rd = REDIPS.drag;
    // initialization
    rd.init();
    // set hover color
    rd.hover.color_td = '#9BB3DA';
    // single element per cell
    rd.drop_option = 'single';
    // No cloning of objects
    rd.clone_shiftKey = rd.clone_shiftKey_row = false;
    // Handle dropped event
    rd.myhandler_dropped = function () {
        var obj = rd.obj,         // current element
            tac = rd.target_cell; // target cell
        var cmd = document.getElementById('dragAction');
        cmd.value = obj.id + ',' + tac.id; // Set the value to the two id's, comma seperated
        __doPostBack('upPage', ''); // Perform postback
    };
};
// add onload event listener
if (window.addEventListener) {
    window.addEventListener('load', redips_init, false);
}
else if (window.attachEvent) {
    window.attachEvent('onload', redips_init);
}

So now, if you drag and drop one of the draggable elements, there will be a postback containing the information on the latest event. In the code behind you can do something like this.

if (IsPostback)
{
    // Get the right Id's                
    string[] action = dragAction.Value.Split(',');
    int componentId = int.Parse(action[0].Split('_')[1]);
    int locationX, locationY;
    string[] location = action[1].Split('_');
    int.TryParse(location[1], locationX);
    int.TryParse(location[2], locationY);
    
    // TODO: Do what you need to do with this information
}

Of course you can build the page in the aspx file or from the codebehind. It will help you to simply create user friendly drag and drop actions.

Tags:
Add new comment
 
Force the use of a networking adapter using C#
Architecture, security and coding
Written by Division by Zero   
Thursday, 12 April 2012 11:03

A while ago I described a problem I had with PHP. I had the same problem using C#. Here's how to force the use of a networking adapter using C#.

// Create a request to a specific url
HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create("http://www.test.com");
// Add an endPointDelegate
request.ServicePoint.BindIPEndPointDelegate = new BindIPEndPoint(BindIPEndPointCallback);
// Execute the request
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
 
// Here's the code of the delegate
private IPEndPoint BindIPEndPointCallback(ServicePoint servicePoint, IPEndPoint remoteEndPoint, int retryCount)
{
    // Fill the byte array with the desired IP-address to force the outgoing request to go to that device
    return new IPEndPoint(new IPAddress(new byte[]{xx,xx,xx,xx}), 0);
}
Tags:
Add new comment
 
Mandriva 2010.2 and USB devices in Virtualbox
Architecture, security and coding
Written by Division by Zero   
Wednesday, 28 March 2012 12:23

I'm really happy with my Mandriva 2010.2 setup. The only thing I mis is working USB devices in my Virtualbox machines. Today I got it working.

First I installed the latest version of Virtualbox (4.1.8). You can download it here. To prevent packaging errors I first deinstalled the standard Mandriva Virtualbox package. The second step is to install the Virtualbox Extention Pack. This will enable USB support.

After that you need to add the current user to the vboxusers group. While trying to configure the usb-devices for my virtual machine I still got an error on this point. It turned out that the super user was able to work with the usb-devices.

To solve the error I needed to change the permissions to the directory /dev/vboxusb (I chmodded it to 777). Now the error was gone, but Virtualbox kept telling me that there were no usb devices connected. to solve this last problem I added the current user to the 'usb' and 'usbmux' groups. After restarting my system my usb-devices were working inside the virtual machines! I hope this will help you if you experience the same problem!

Tags:
Add new comment
 
Execute a http request to you own site with PHP
Architecture, security and coding
Written by Division by Zero   
Tuesday, 20 March 2012 14:27

Due an infrastructure setup DNS wasn't working locally. This I found out while working on some PHP code that requested a resource from my own site. The site is hosted on IIS with multiple sites. My site has it's own IP-address.

Requesting the IP-address didn't work, the outgoing address was the same as the incoming. The request to locahost failed. Overriding the hostheader didn't work, because IIS combines IP-addresses with the hostheader and there wasn't an endpoint tot locahost.

The working solution, not the prettiest, was this:

if (function_exists('curl_init'))
{
  // Set up curl
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, 'http://xxx.xxx.xxx.02/service');
  curl_setopt($ch, CURLOPT_HEADER, true);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  // Force the use of a specific networking device 
  curl_setopt($ch, CURLOPT_INTERFACE, "xxx.xxx.xxx.01");
  
  // Override the hostheader, just to be sure
  curl_setopt($ch, CURLOPT_HTTPHEADER, array('Host: '.$this->params->get('ServiceHost')));
  // Perform request
  $response = curl_exec($ch);
}
Tags:
Add new comment
 
How do I - Security videos
Architecture, security and coding
Written by Division by Zero   
Wednesday, 14 March 2012 08:32

Knowledge is the basis for developing secure applications and systems. There are good resources to gain this knowledge. Microsoft added on to it's extensive library: "How Do I" Videos for Security.

You can find them here.

Tags:
Add new comment
 
More Articles...
Start Prev 1 2 3 4 5 6 7 8 9 10 Next End

Page 1 of 71
Search
Back to the top