Get mouse position in control.

  • Thread starter Thread starter Shawn
  • Start date Start date
S

Shawn

I have an application that has a vb.Net client and an ASP.Net page. In the
vb.Net form I use Panel1.PointToClient(Windows.Forms.Cursor.Position) to get
the position on a panel where the mouse was clicked. I would like to do the
same thing in my ASP.Net page, but can't find a way to. Any ideas???
 
You need to handle the onmousemove and onclick event of your panel in
JavaScript.

I've attached an example in C# (should be easy to convert to VB.net).
the getPanelMouseCoOrds JavasScript sets two text boxes (so you can see
it in action) and two hidden fields with the mouse postion.

The onclick handler just submits the form.

When the form is posted back to server the PageLoad extracts the values
from the two hidden form fields and sets the label for info

It works in IE but may ntyo work in other browsers:
Webform1.aspx:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="PanelMousePosition.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<INPUT id="hidX" name="hidX" type="hidden"> <INPUT id="hidY"
name="hidY" type="hidden">
<asp:Panel id="Panel1" runat="server" Width="423px" Height="94px"
BorderStyle="Solid">Panel</asp:Panel>
<p>X: <input name="xPos" type="text" size="5"></p>
<p>Y: <input name="yPos" type="text" size="5"></p>
<asp:Label id="Label1" runat="server"></asp:Label>
<script language="JavaScript">
function getPanelMouseCoOrds()
{
var mouseX = event.clientX + document.body.scrollLeft;
var mouseY = event.clientY + document.body.scrollTop;

document.Form1.xPos.value = mouseX;
document.Form1.yPos.value = mouseY;

document.Form1.hidX.value = mouseX;
document.Form1.hidY.value = mouseY;
return true;
}

function handlePanelClick()
{
document.Form1.submit();
}
</script>
</form>
</body>
</HTML>

and there's the code behind to register and handle events
(WebForm1.aspx.cs):
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace PanelMousePosition
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.Panel Panel1;

private void Page_Load(object sender, System.EventArgs e)
{
if (! Page.IsPostBack)
{
Panel1.Attributes["onmousemove"]="getPanelMouseCoOrds()";
Panel1.Attributes["onclick"]="handlePanelClick()";
}
else
{
int panelX = Int32.Parse(Request.Form["hidX"]);
int panelY = Int32.Parse(Request.Form["hidY"]);

Label1.Text = "You clicked @ " + panelX + ", " + panelY;
}
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}
}
 
Thanks, I will look it over.

Jason Hales said:
You need to handle the onmousemove and onclick event of your panel in
JavaScript.

I've attached an example in C# (should be easy to convert to VB.net).
the getPanelMouseCoOrds JavasScript sets two text boxes (so you can see
it in action) and two hidden fields with the mouse postion.

The onclick handler just submits the form.

When the form is posted back to server the PageLoad extracts the values
from the two hidden form fields and sets the label for info

It works in IE but may ntyo work in other browsers:
Webform1.aspx:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="PanelMousePosition.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<INPUT id="hidX" name="hidX" type="hidden"> <INPUT id="hidY"
name="hidY" type="hidden">
<asp:Panel id="Panel1" runat="server" Width="423px" Height="94px"
BorderStyle="Solid">Panel</asp:Panel>
<p>X: <input name="xPos" type="text" size="5"></p>
<p>Y: <input name="yPos" type="text" size="5"></p>
<asp:Label id="Label1" runat="server"></asp:Label>
<script language="JavaScript">
function getPanelMouseCoOrds()
{
var mouseX = event.clientX + document.body.scrollLeft;
var mouseY = event.clientY + document.body.scrollTop;

document.Form1.xPos.value = mouseX;
document.Form1.yPos.value = mouseY;

document.Form1.hidX.value = mouseX;
document.Form1.hidY.value = mouseY;
return true;
}

function handlePanelClick()
{
document.Form1.submit();
}
</script>
</form>
</body>
</HTML>

and there's the code behind to register and handle events
(WebForm1.aspx.cs):
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace PanelMousePosition
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.Panel Panel1;

private void Page_Load(object sender, System.EventArgs e)
{
if (! Page.IsPostBack)
{
Panel1.Attributes["onmousemove"]="getPanelMouseCoOrds()";
Panel1.Attributes["onclick"]="handlePanelClick()";
}
else
{
int panelX = Int32.Parse(Request.Form["hidX"]);
int panelY = Int32.Parse(Request.Form["hidY"]);

Label1.Text = "You clicked @ " + panelX + ", " + panelY;
}
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}
}
Click to expand...
 
Any idea why I am getting "Input string was not in a correct format." When
it gets to "panelX As Integer = Int32.Parse(Request.Form("hidX"))"?

Shawn said:
Thanks, I will look it over.

Jason Hales said:
You need to handle the onmousemove and onclick event of your panel in
JavaScript.

I've attached an example in C# (should be easy to convert to VB.net).
the getPanelMouseCoOrds JavasScript sets two text boxes (so you can see
it in action) and two hidden fields with the mouse postion.

The onclick handler just submits the form.

When the form is posted back to server the PageLoad extracts the values
from the two hidden form fields and sets the label for info

It works in IE but may ntyo work in other browsers:
Webform1.aspx:
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="PanelMousePosition.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<INPUT id="hidX" name="hidX" type="hidden"> <INPUT id="hidY"
name="hidY" type="hidden">
<asp:Panel id="Panel1" runat="server" Width="423px" Height="94px"
BorderStyle="Solid">Panel</asp:Panel>
<p>X: <input name="xPos" type="text" size="5"></p>
<p>Y: <input name="yPos" type="text" size="5"></p>
<asp:Label id="Label1" runat="server"></asp:Label>
<script language="JavaScript">
function getPanelMouseCoOrds()
{
var mouseX = event.clientX + document.body.scrollLeft;
var mouseY = event.clientY + document.body.scrollTop;

document.Form1.xPos.value = mouseX;
document.Form1.yPos.value = mouseY;

document.Form1.hidX.value = mouseX;
document.Form1.hidY.value = mouseY;
return true;
}

function handlePanelClick()
{
document.Form1.submit();
}
</script>
</form>
</body>
</HTML>

and there's the code behind to register and handle events
(WebForm1.aspx.cs):
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace PanelMousePosition
{
/// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.Panel Panel1;

private void Page_Load(object sender, System.EventArgs e)
{
if (! Page.IsPostBack)
{
Panel1.Attributes["onmousemove"]="getPanelMouseCoOrds()";
Panel1.Attributes["onclick"]="handlePanelClick()";
}
else
{
int panelX = Int32.Parse(Request.Form["hidX"]);
int panelY = Int32.Parse(Request.Form["hidY"]);

Label1.Text = "You clicked @ " + panelX + ", " + panelY;
}
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}
}
Click to expand...
Click to expand...
 
Shawn, just to repeat my emailed reply, it seems as though the
getPanelMouseCoOrds may not be setting the hidden fields hidX and hidY.
The parse error is because they are null or empty

Can you confirm that the text fields are being set when you move over
the panel?

Are you running IE and if so which version?
 
You must log in or register to reply here.

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to: set div scroll position on page load 3
Get position of control 9
Alternative to datagrid control in framework 4.0 4
Moving the Mouse Pointer 3
Problem with panel with absolute position 3
Maintain position in treeview? 2
about positioning control on the form 3
Mouse/Screen Image Status 5

Back
Top