Pass Javascript data to C#method

Question

I need to get a user’s location, go to C, get his street data and show it on a label.

I have the following code:

Labels

<asp:Label ID="lblMsg" runat="server" Visible="true"></asp:Label>
<asp:Label ID="lblLatitude" runat="server" Visible="false"></asp:Label>
<asp:Label ID="lblLongitude" runat="server" Visible="false"></asp:Label>   

Javascript to take latitude and longitude

<script>
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
}
else { alert("O seu navegador não suporta Geolocalização."); }
function showPosition(position) {
    document.getElementById('lblLatitude').textContent = position.coords.latitude;
    document.getElementById('lblLongitude').textContent = position.coords.longitude;
}
</script>

Button code

protected void btnLocalizei_Click(object sender, EventArgs e)
    {
        String latitude = lblLatitude.Text;
        String longitude = lblLongitude.Text;

        string url = string.Format("http://maps.googleapis.com/maps/api/geocode/xml?latlng={0},{1}&sensor=false", latitude, longitude);

        XElement xml = XElement.Load(url);

        if (xml.Element("status").Value == "OK")
        {
            lblMsg.Text = string.Format("<strong>Origem</strong>: {0}",
                xml.Element("result").Element("formatted_address").Value);
        }
        else
        {
            lblMsg.Text = "Ocorreu um erro";
        }
    }

Unfortunately it is not passing the javascript data pro C# and I cannot see error in the code :/

Could you help me?

Answer 1

The ID for ASP.NET elements generated on the server (runat=server) is updated at runtime.

Use <%= lblLatitude.ClientID %> to reference the ID correct:

var latitude = "<%= lblLatitude.ClientID %>";
document.getElementById(latitude)(...)

Answer 2

You can do this without calling any method in C#.

An example:

http://jsfiddle.net/moykn/N6x3q/

As stated earlier the element id on the side of usually is not the same on the client side, often being formed by concatenation of kin ids.

An option would be instead of using Document.getElementById to use jquery or querySelector

document.querySelector("[id$=lblLatitude]");

or with Jquery

$("[id$=lblLatitude]");