?
Solved

Join Javascript and C#

Posted on 2005-03-03
6
Medium Priority
?
209 Views
Last Modified: 2010-08-05
Hi

I have an aspx page, which contains a picture box (id: MapImage) and ZoomIn Image Button

2 Files:

Javascript function: Draw a rectangle on the picture box
C# code: collect the starting and ending co-ordinates plus some other functions

When I click the zoomin button:
  1. Javascript function should fire up and I should be able to draw the rectangle
  2. When I finished drawing the rectangle ( i.e when I released the mouse button) C# code should fire up .

I should be able to repeat the above 2 steps until I click another button or exit out from the page.

Javascript function:

function init()
{

// Declarations
// ****************

  rect = null;
  ptr = null;

  MapImage = document.getElementById("MapImage");
  MapImage.onmousedown = setObj;
  MapImage.onmousemove = draw;

  xOffset = getX(MapImage);
  yOffset = getY(MapImage);
  document.onmouseup = clearObj;
  MapImage.ondragstart = function() {return false;};


// On Mouse Down
// *********************

  function setObj(e)
  {
    rect = document.createElement("div");
    rect.className = "rectDraw";

    sX = (window.event)? event.x: e.clientX;
    sY = (window.event)? event.y: e.clientY;
    sX -= xOffset;
    sY -= yOffset;

    rect.style.left = (sX+xOffset) + "px";
    rect.style.top = (sY+yOffset) + "px";

    document.body.appendChild(rect);
  }


//On Mouse Move (Draw Rectangle)
//*********************************************

  function draw(e)
  {
    if (rect)
    {
      var currX = (window.event)? event.x: e.clientX;
      var currY = (window.event)? event.y: e.clientY;

      // make sure not outside the bounds of image
      var leftX = getX(MapImage);
      var leftY = getY(MapImage);
      if (currX < leftX || currY < leftY)
     return false;

      currX -= xOffset;
      currY -= yOffset;

      var diffX = currX - sX;
      var diffY = currY - sY;

      if (currX < sX)
      {
        rect.style.left = (currX+xOffset) + "px";
        diffX = Math.abs(diffX);
      }
      if (currY < sY)
      {
        rect.style.top = (currY+yOffset) + "px";
        diffY = Math.abs(diffY);
      }

      rect.style.width = diffX + "px";
      rect.style.height = diffY + "px";

      // output start & end coordinates
      document.getElementById("startX").value = (sX > currX)? currX: sX;
      document.getElementById("startY").value = (sY > currY)? currY: sY;
      document.getElementById("endX").value = (sX < currX)? currX: sX;
      document.getElementById("endY").value = (sY < currY)? currY: sY;
    }
  }


// Get X and Y
//******************

  function getX(obj)
  {
    var temp = obj;
    var left = 0;
    while (temp.offsetParent)
    {
      left += temp.offsetLeft;
      temp = temp.offsetParent;
    }
    return left;
  }

  function getY(obj)
  {
    var temp = obj;
    var top = 0;
    while (temp.offsetParent)
    {
      top += temp.offsetTop;
      temp = temp.offsetParent;
    }
    return top;
  }
 
 
 // On Mouse Up (Clear Rectangle)
//******************************************

  function clearObj()
  {
    if (rect)
    rect.parentNode.removeChild(rect);
    rect = null;
  }
 
 
}

My C# Code:

RegisterStartupScript("FormSubmittedJSCode", "<script>init();</script>");
double sx = Convert.ToDouble(startX.Value);
double sy = Convert.ToDouble(startY.Value);
double ex = Convert.ToDouble(endX.Value);
double ey = Convert.ToDouble(endY.Value);
double realminx   = (sx * pux) + minxx;
double realminy   = ((300 - sy) * puy) + minyy;
double realmaxx  = (sx * pux) + maxxx;
double realmaxy  = ((300-sy) * puy) +  maxyy;
string XMLCommand1 = FrameXMLCommand(realminx, realminy, realmaxx, realmaxy, 0);


Now I'm able to draw the rectangle and execute the code.
But I'm unable to
-- execute the C# code as soon as I release the mouse (finishing drawing the rectangle)
-- and repeat the same until I click other button or exit the page.

Please help !

Regards
-- Praveen
0
Comment
Question by:praveenuni
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 58

Expert Comment

by:amit_g
ID: 13454276
Add some code in clearObj ...

  function clearObj()
  {
    if (rect)
    {
        rect.parentNode.removeChild(rect);
        document.getElmentById("ZoomInImgBut").click();
    }
    rect = null;
  }
0
 
LVL 58

Accepted Solution

by:
amit_g earned 2000 total points
ID: 13454278
getElementById was mis-spelled ...

  function clearObj()
  {
    if (rect)
    {
        rect.parentNode.removeChild(rect);
        document.getElementById("ZoomInImgBut").click();
    }
    rect = null;
  }
0
 

Author Comment

by:praveenuni
ID: 13454321
Hello Amit,

Thanks for your immediate response.

I tried the above code .. somehow its not working (unable to draw the rectangle also) ..

Could you please check that?

__ Praveen
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:praveenuni
ID: 13454502
Hello Amit,

sorry for the above message .. actually its working ..

if there is other button like .. for eg., zoom out how can achieve the same thing .. should i do like this ..?

  function clearObj()
  {
    if (rect)
    {
        rect.parentNode.removeChild(rect);
        document.getElementById("ZoomInImgBut").click();
        document.getElementById("ZoomOutImgBut").click();
    }
    rect = null;
  }

Regards
-- Praveen
0
 
LVL 58

Expert Comment

by:amit_g
ID: 13454582
Yes you could do so.
0
 

Author Comment

by:praveenuni
ID: 13463854
Hello Amit,

when I draw the rectangle using the javascript function and when I use the mouse scroll button to scroll down the page .. the fucntion is acting weird. It is drawing the rectangle, but the distance between the mouse pointer and end point of the rectangle is very high. Normally both the mouse pointer and the end point of rectangle should be attached right!.

I know this is a bit confusing .. if you need any further info .. please let me know ..


Regards
-- Praveen
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

We all know that functional code is the leg that any good program stands on when it comes right down to it, however, if your program lacks a good user interface your product may not have the appeal needed to keep your customers happy. This issue can…
This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question