Click to AjaxMap and Save the clicked point to a database table.

Topics: General Topics
Oct 4, 2006 at 1:15 PM
Hello!

Is it possible?

AjaxMap has an OnClickEvent property, but as I know it points to a JavaScript function instead of a C# function.

Am I Right?

inside JavaScript I really don't know the way to handle this problem.

Is there any solution to solve this in C#?

Thanks

Oliver
Oct 4, 2006 at 1:54 PM
Simply store the x & y coordinates in a hidden form field and post the form. Then you can do you database storing in the page's codebehind.

-Abe
Oct 4, 2006 at 1:57 PM
It sounds good! I'll try it, and then I write a feedback here.

Oliver
Jan 7, 2007 at 8:14 PM
Hi Oliver!
I had the same problem with you.
Could you post the result you worked in C# for me? I can't understand the code in JS clearly!
Or can you send me at:educatenter@gmail.com
Thanks alot!
Jan 10, 2007 at 4:06 AM
hello!
I also want to know the c# code about this fact, can you tell me this code.
Thank you!
Jan 10, 2007 at 11:04 AM
This it is a test that I did using Demo Ajax Map with Enterprise Library (Insert Data in SQL) and ASP.Net Ajax (PageMethod):
My aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapaAjax.aspx.cs" Inherits="MapaAjax" %>
<%@ Register TagPrefix="smap" Namespace="SharpMap.Web.UI.Ajax" Assembly="SharpMap.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Mapa</title>
<script type="text/javascript">
var objeto;
function MapClicked(event,obj)
{
var mousePos = SharpMap_GetRelativePosition(event.clientX,event.clientY,obj.container);
var pnt = SharpMap_PixelToMap(mousePos.x,mousePos.y,obj);
var field = document.getElementById('dataContents');
field.innerHTML = "Punto en: " + pnt.x + "," + pnt.y;
objeto = obj;
PageMethods.Punto(pnt, OnSucceeded);
}
function ViewChanging(obj)
{
var field = document.getElementById('dataContents');
field.innerHTML = "Cargando...";
}
function ViewChanged(obj)
{
var field = document.getElementById('dataContents');
field.innerHTML = "Centro: " + obj.GetCenter().x + "," + obj.GetCenter().y;
}
function OnSucceeded(result)
{
SharpMap_BeginRefreshMap(objeto,1);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm1" runat="server">
</asp:ScriptManager>
<div style="background-color: #fff; color:#000;">
<asp:RadioButtonList ID="rblMapTools" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="0" onclick="ajaxMapObj.disableClickEvent(); ajaxMapObj.zoomAmount = 3;" Selected="True">Zoom +</asp:ListItem>
<asp:ListItem Value="1" onclick="ajaxMapObj.disableClickEvent(); ajaxMapObj.zoomAmount = 0.33333;" >Zoom -</asp:ListItem>
<asp:ListItem Value="2" onclick="ajaxMapObj.enableClickEvent();">Punto</asp:ListItem>
</asp:RadioButtonList>
</div>
<div style="background-color:#f1f1f1; border:solid 1px #000;">
<smap:AjaxMapControl width="100%" height="400px" id="ajaxMap" runat="server"
OnClickEvent="MapClicked" OnViewChange="ViewChanged" OnViewChanging="ViewChanging" />
</div>
<div id="dataContents"></div>
<asp:HyperLink ID="HyperLink1" NavigateUrl="~/MapPuntos.aspx" runat="server">Puntos</asp:HyperLink>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</form>
</body>
</html>

Codebehind:
using System;
using System.Data;
using System.Data.Common;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Services;
using System.Web.Script.Services;
using Microsoft.Practices.EnterpriseLibrary.Data;

public partial class MapaAjax : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ajaxMap.Map = MapHelper.InitializeMap(new System.Drawing.Size(10, 10));
if (!Page.IsPostBack && !Page.IsCallback)
{
//Set up the map. We use the method in the App_Code folder for initializing the map
ajaxMap.Map.Center = new SharpMap.Geometries.Point(-64.1932, -31.3991);
ajaxMap.FadeSpeed = 10;
ajaxMap.ZoomSpeed = 10;
ajaxMap.Map.Zoom = 0.45;
}
ajaxMap.ResponseFormat = "maphandler.ashx?MAP=SimpleWorld&Width=WIDTH&Height=HEIGHT&Zoom=ZOOM&X=X&Y=Y";
}
WebMethod
public static string Punto(SharpMap.Geometries.Point punto)
{
InsertPunto(punto);
return "Punto: " + punto.X.ToString() + ", " + punto.Y.ToString();
}
protected static void InsertPunto(SharpMap.Geometries.Point punto)
{
Database db = DatabaseFactory.CreateDatabase("MetaForm");
string sqlCommand = "Pa_PuntosInsert";
DbCommand dbCommand = db.GetStoredProcCommand(sqlCommand);
db.AddInParameter(dbCommand, "X", DbType.Double, punto.X);
db.AddInParameter(dbCommand, "Y", DbType.Double, punto.Y);
db.ExecuteNonQuery(dbCommand);
}
protected void Button1_Click(object sender, EventArgs e)
{
ajaxMap.Map.Center = new SharpMap.Geometries.Point(-64.1932, -31.3991);
ajaxMap.FadeSpeed = 10;
ajaxMap.ZoomSpeed = 10;
ajaxMap.Map.Zoom = 0.45;
ajaxMap.ResponseFormat = "maphandler.ashx?MAP=SimpleWorld&Width=WIDTH&Height=HEIGHT&Zoom=ZOOM&X=X&Y=Y";
}
}

Punto (spanish) is a point
Pa_PuntosInsert is a store procedure that insert point (x,y) in the table.

Due to the fact that me the OleDbPoint was not working I changed it into SqlClientPoint (see this post:
http://www.codeplex.com/SharpMap/Project/DisplayThread.aspx?ForumId=394&ThreadId=3056&ANCHOR#Post9654
But I think that it is better to use the MsSqlSpatial provider and insert a geometries point and not a x,y point, see this:
http://www.codeplex.com/MsSqlSpatial/Project/DisplayThread.aspx?ForumId=763&ThreadId=1655&ANCHOR#LastPost

Sorry my bad source code and my bad English
Regards from Argentina
/Leandro