Call C# function from Javascript function

you can use onMouseOver or any other javascript event to make a submit with all parameters you want

but you CAN'T call any C# function without submiting the page
and IMHO a page which submits itself without a click have a very bad usability....

in the above you are calling variable 'param' from the c# function. But I want to call the entire C# function from Javascript.

Hello,

The above code you posted is working just fine. But when I try to replciate the same in my code .. I'm getting errors.. Here is my code ..

Java Script function: (this will draw a rectangle on the imagebox of my aspx page)

function init()
{
        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;};

     function setObj(e)
    {
        var sOffset = new Array(2);
         sOffset = getScrollOffset();
         rect = document.createElement("div");
         rect.className = "rectDraw";
         rect.onmousemove = showPos;
   
         sX = (window.event)? event.x: e.clientX;
         sY = (window.event)? event.y: e.clientY;
         sX -= (xOffset - sOffset[0]);
         sY -= (yOffset - sOffset[1]);

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

         document.body.appendChild(rect);
   }

  function clearObj()
  {
    if (rect)
    rect.parentNode.removeChild(rect);
    rect = null;
     <%SetData();%>; <------------------------- Assigned line
 
 }

  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;

      var sOffset = new Array(2);
      sOffset = getScrollOffset();
      currX -= (xOffset - sOffset[0]);
      currY -= (yOffset - sOffset[1]);

      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;
    }
  }

  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;
  }

  function getScrollOffset()
  {
    var x,y;
    if (self.pageYOffset) // all except Explorer
    {
      x = self.pageXOffset;
      y = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop)
    // Explorer 6 Strict
    {
      x = document.documentElement.scrollLeft;
      y = document.documentElement.scrollTop;
    }
    else if (document.body) // all other Explorers
    {
      x = document.body.scrollLeft;
      y = document.body.scrollTop;
    }
    var answer = new Array(x, y);
    return answer;
  }
}

and on the page_load event I assigned :


               if (!IsPostBack)
               {
                    this.ZoomInImgBut.Attributes.Add("onclick", "javascript:init();");
               }

and public void SetData()
{
}

when I try this, I'm unable to draw the rectangle on my image box. Could you please tell me whats wrong with my code..?

most visible problem is that the Init function is missing a }.

other then that, debugging that amount of code requires time,
it would help if you could say what exactly is the problem (what error do you get) ?
is there a public website where you are running this so I can see this in action or do i have to replicate the whole thing ?

This is the exact problem ..

I have a javascript function ( init() ) which will draw a rectangle on a image box of my asp.net page. This init() function should fire up only when I click a image button. While I'm drawing the rectangle and when I release the mouse (after I finish drawing the rectangle) -- there is a C# function SetData() which should get fired.

I'm sorry that, this is not on a public site for now. If you need any details or code, please let me know.

Thanks
Praveen

Init is the main function, which contains all the subfunctions like setobj, clearobj, draw.... I checked all the paranthesis and looks everything is ok. Could you please tell me where am I missing a }.

Check this out. Basically using an HttpHandler to do it.

http://weblogs.asp.net/mschwarz/archive/2005/02/15/373072.aspx

Online Demo: http://beta.schwarz-interactive.de/
Download from: http://schwarz-interactive.de/download/clientcallback.zip

You can try to add alert('here'); below the <%SetData();%>; line to debug

I tried alert('here'); statement, but still its showing there is a syntax error in the <%SetData();%>; line. I'm not getting the alert too.

-- Praveen

Can you show us the code of SetData()? and please place alert('here') before you call SetData.

could it be that there is a redundent ; at the end of :
 <%SetData();%>;

when you get the error, can you please tell us exactly what it says and also
can you "view source" on the page that arrives at the client (as this error happens on the client side)
and tell us what exactly gets in place of the call above ?

Hi,
I tried this solution. The trouble is that as <% %> are template elements, always they are called, independent that it is inside of a "if" (condition). So I tried the other way (.NET "calls" throught document.write, to JavaScript.
It is similar to have it "onload".
For use variables from the server side is great. It was useful

Regards