ASP.NET 按钮 onclick 重置标签文本答案

【问题标题】：ASP.NET Button onklick resets label textASP.NET 按钮 onclick 重置标签文本
【发布时间】：2017-04-18 11:22:33
【问题描述】：

我正在开发我的第一个 Web 应用程序。我正在尝试获取 GPS 位置并将其保存以供进一步处理。这是代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CreatePlace.aspx.cs" Inherits="BeeMaster.CreatePlace" %>

<!DOCTYPE html>

<html style="background-image:url('images/background.png'); background-repeat:repeat-x">
<head runat="server">
    <title>Create new Place</title>
    <link href="CreatePlace.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #taComment {
            height: 142px;
            width: 339px;
        }
    </style>
</head>
<body>
    <img src="Images/CNP.png" id="logo"/>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div>
        <p id="Comment" style="font-size: large">Click the button to get your position.</p>



        <button onclick="getLocation()" style="font-size: xx-large; width: 380px; height: 50px;">
            Get current location
        </button>
        <br />
            <asp:Label ID="lblCoordinates" runat="server"></asp:Label><asp:Label ID="lblLat" runat="server"></asp:Label>,<asp:Label ID="lblLon" runat="server"></asp:Label>
        <br />

        <iframe
            height="600"
            style="border:0"
            id="iFrame">
        </iframe>
    </div>
    <form runat="server">
        <br style="font-size: x-large" />
        <br style="font-size: x-large" />
        <asp:Label ID="lblName" runat="server" Text="Name:" Font-Size="X-Large"></asp:Label>
        <br style="font-size: x-large" />
        <asp:TextBox ID="tbName" runat="server" Font-Size="X-Large"></asp:TextBox>
        <br style="font-size: x-large" />
        <asp:Label ID="lblNameComment" runat="server" Text="It is recommended to give a name for the place." Font-Size="Medium"></asp:Label>
        <br style="font-size: x-large" />
        <br style="font-size: x-large" />
        <asp:Label ID="lblComment" runat="server" Text="Comment:" Font-Size="X-Large"></asp:Label>
        <br style="font-size: x-large" />
        <textarea id="taComment" ></textarea>
        <br style="font-size: x-large" />
        <asp:Label ID="lblCommentComment" runat="server" Text="Comment specific for the physical place" Font-Size="Medium"></asp:Label>
        <br style="font-size: x-large" />
        <br style="font-size: x-large" />
        <asp:Button ID="btSaveLocation" runat="server" Text="Save current location as new place" OnClick="btSaveLocation_Click" Font-Size="XX-Large" Height="50px" />
    </form>

    <script hidden="hidden">
        var x = document.getElementById("Comment");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {
            var latlon = position.coords.latitude + "," + position.coords.longitude;
            document.getElementById("lblCoordinates").textContent += "Your location in Coordinates is: ";
            document.getElementById("lblLat").innerHTML = position.coords.latitude;
            document.getElementById("lblLon").innerHTML = position.coords.longitude;
            document.getElementById("iFrame").src = "https://www.google.com/maps/embed/v1/place?key=<key>&q=" + latlon + "&maptype=satellite";
            document.getElementById("iFrame").hidden = "";

        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "User denied the request for Geolocation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "Location information is unavailable."
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "The request to get user location timed out."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "An unknown error occurred."
                    break;
            }
        }
        </script>

    </body>
</html>

当我单击第一个按钮时，两个标签会按照预期填写纬度和经度。当我单击“将当前位置另存为新位置”按钮时，它会在 C# 中执行以下代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data.OleDb;
using System.Data.Odbc;

namespace BeeMaster
{
    public partial class CreatePlace : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void btSaveLocation_Click(object sender, EventArgs e)
        {
            string lat = lblLat.Text;
            string lon = lblLon.Text;
        }
    }
}

如您所见，Page_Load 函数中没有任何内容，但它似乎仍以某种方式将标签重置为其初始状态，因为当我在运行时调试应用程序并在 btSaveLocation_Click 函数的开头设置断点时，我看到两个标签的文字已经是空白了。

请问有人知道这是什么问题吗？

谢谢

【问题讨论】：

那不是 C！不要使用错误的标签！
将值放在隐藏字段中，因为通过JS设置的隐藏字段值可以在回发中访问
@Olaf 谁对 C 说了些什么？ C#！
@Sami 好的，我会试试的。谢谢
@josibu：你是通过添加 C 标签来做到的！

标签： html asp.net web

【解决方案1】：

标签的内容不是回发的一部分，因此不会在视图状态中更新。将您的值放在两个隐藏字段中，并使用它们与服务器逻辑进行通信。

【讨论】：

所以我现在按照您的建议稍微更新了代码。但它仍然不起作用。 document.getElementById("tbLat").innerText = latlon; 行似乎让它崩溃，即使我在它没有被执行之后将它放在行之上 2 行。我也尝试过修改 textcontent 和 innerHTML - 都一样。
你应该改变值：document.getElementById("lblLat").value = position.coords.latitude; document.getElementById("lblLon").value = position.coords.longitude;
抱歉回复晚了。我无法让它工作。不管我做了什么。但我真正需要的是访问我从 CodeBehind (C#) 中的 JavaScript 获得的值。
对不起。你的 javascript 应该是 document.getElementById("tbLat").value = position.coords.latitude; document.getElementById("tbLon").value = position.coords.longitude;
我的问题不是获取显示坐标的标签（或文本框或其他），而是将值传递给 codeBehind，因为在 PostBack 它将页面和元素初始化为其默认值之前请求标签（或文本框）值的函数。

【解决方案2】：

我找到了解决方案。实际上有两个问题：

我在代码隐藏文件中提到的两个标签不是表单的一部分，它们实际上在表单之外。
在代码隐藏文件中，我必须在 Page_Load 函数中而不是在按钮的函数中请求它们的值。

这实际上解决了问题。

谢谢大家

【讨论】：