• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 211
  • Last Modified:

Join Javascript and C#

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
praveenuni
Asked:
praveenuni
  • 3
  • 3
1 Solution
 
amit_gCommented:
Add some code in clearObj ...

  function clearObj()
  {
    if (rect)
    {
        rect.parentNode.removeChild(rect);
        document.getElmentById("ZoomInImgBut").click();
    }
    rect = null;
  }
0
 
amit_gCommented:
getElementById was mis-spelled ...

  function clearObj()
  {
    if (rect)
    {
        rect.parentNode.removeChild(rect);
        document.getElementById("ZoomInImgBut").click();
    }
    rect = null;
  }
0
 
praveenuniAuthor Commented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
praveenuniAuthor Commented:
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
 
amit_gCommented:
Yes you could do so.
0
 
praveenuniAuthor Commented:
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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now