How to catch x and y position and reposition exactly in MVC4?

Question

Possible Duplicate:
Dynamically retrieve the position (X,Y) of an HTML element

In a MVC4 app (targeting IE7+) I have an image. I want the user to be able to click on the image to position a little marker (image), and I want to store the relative x/y position related to the image so that I can reposition this pin when the user returns to this page again.

What is the best way to accomplish this?

Answer 1

You could use an <input type="image" /> tag - this acts like <input type="submit" /> but it posts the x and y co-ordinates of the click back to the server.

View

<h1>Click on the image to place a pin</h1>
@using(Html.BeginForm())
{
    <input type="image" name="coords" src="http://placehold.it/300x300" />
}

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(FormCollection form)
    {
        int x = int.Parse(form["coords.x"]);
        int y = int.Parse(form["coords.y"]);

        // FIXME Save location of pin

        return View();
    }

}