0

我有两个隐藏字段，它们使用 jQuery 单击按钮获得纬度和经度。下面是运行良好的代码，我想使用这些 lat 和 lng 计算距离。为了测试我试图在文本框和标签中显示隐藏字段值，您可以在 jQuery 中看到。但是，如果我在按钮代码中将属性设置为OnClientClick="return true"，我看不到任何工作。如果我设置为return false我可以看到这些值，但在标签中看不到。

<script type="text/javascript">
    $(function () {
        geocoder = new google.maps.Geocoder();

        $("#btn").on("click", function () {
            var address = $("#tbCity").val();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var lat = results[0].geometry.location.lat();
                    var lng = results[0].geometry.location.lng();

                    //alert(latitude + ", " + longitude);
                }

                $('#latitude').val(lat);
                $('#longitude').val(lng);
                $('#txtBox1').val($('#latitude').val());   
                $('#txtBox2').val($('#longitude').val());
                $('#lbl1').val($('#latitude').val());
            });
        });
    });
</script>

ASP.NET 代码

<form id="form1" runat="server">
     Address: <asp:TextBox ID="tbCity" runat="server"></asp:TextBox>        
     <asp:HiddenField ID="latitude" runat="server" />
     <asp:HiddenField ID="longitude" runat="server" />
     <br /><br />
     <asp:TextBox ID="txtBox1" runat="server"></asp:TextBox>
     <asp:TextBox ID="txtBox2" runat="server"></asp:TextBox>
     <asp:Button ID="btn" runat="server" Text="Button" OnClientClick="return false"  OnClick="btn_Click"/>
     <br />
     <asp:Label ID="lbl1" runat="server" Text="Label"></asp:Label>
</form>

生成的 HTML 代码

    <form method="post" action="GetCoordinates.aspx" id="form2">
         <div class="aspNetHidden">
            <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"   value="/wEPDwUKLTQyNTI1OTg4N2RkGXXMNhEfkB7Ie6CVb4YTwItExhof/IkHpdh6f26grxc=">
         </div>
        <div class="aspNetHidden">
             <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"  value="/wEdAAeWsE0BRbQ0wjG1w60jqqdcq35qZMbaIVF3xrHN6flGNv+/yOgSqO/6irT+NtXuduQ93hcP/MBYTB//29SOqPZfAcmup7kkBHBfToLV39zc8Mj6eKFRARwXIj8IINCyLct0YEyduRVooG3ha/OFYKMXG9w1RtaOWHfqueLltflOGuLDyL1I+PDm4fhtuLq7nGM=">
        </div>
        Address: <input name="tbCity" type="text" id="Text1">        
                 <input type="hidden" name="latitude" id="Hidden1" value="-34.92862119999999">
                 <input type="hidden" name="longitude" id="Hidden2" value="138.5999594">       
                 <input name="txtBox1" type="text" id="Text2">
                 <input name="txtBox2" type="text" id="Text3">
                 <input type="submit" name="btn" value="Button" onclick="return false;" id="Submit1">        
        <span id="Span1">Label</span>
     </form>

更新代码

<form method="post" action="GetCoordinates.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEyMTQwNTA2MzFkZBAUxV0uM2MNtGYuUK81rFUmmAiaeLksG6QHsLB3zWtZ">
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAci5mChXqDZFj3vgdOgA11rq35qZMbaIVF3xrHN6flGNv+/yOgSqO/6irT+NtXuduQ93hcP/MBYTB//29SOqPZfAcmup7kkBHBfToLV39zc8Mj6eKFRARwXIj8IINCyLct0YEyduRVooG3ha/OFYKMX/9MR/+s9E/Yu8cFwBQ5SCqt4ngV9Kdj9/OR/r/Q8mvQ=">
</div>
    Address: <input name="tbCity" type="text" id="tbCity">        
    <input type="hidden" name="latitude" id="latitude" value="-34.92862119999999">
    <input type="hidden" name="longitude" id="longitude" value="138.5999594">     
    <br><br>
    <input name="txtBox1" type="text" id="txtBox1">
    <input name="txtBox2" type="text" id="txtBox2">        
    <input name="btn" type="button" id="btn" value="showCode">
    <span id="lbl1">Label</span>
</form>

更新了 .Net 代码

<form id="form1" runat="server">
    Address: <asp:TextBox ID="tbCity" ClientIDMode="Static"  runat="server"></asp:TextBox>
    <asp:HiddenField ID="latitude" ClientIDMode="Static" runat="server" />
    <asp:HiddenField ID="longitude" ClientIDMode="Static"  runat="server" />
    <br /><br />
    <asp:TextBox ID="txtBox1" ClientIDMode="Static"  runat="server"></asp:TextBox>
    <asp:TextBox ID="txtBox2" ClientIDMode="Static"  runat="server"></asp:TextBox>
    <input type="button"   id="btn" runat="server"  value="showCode" />
    <br />
    <asp:Label ID="lbl1" runat="server" ClientIDMode="Static" Text="Label"></asp:Label>
</form>
4

2 回答 2

1

工作 jsFiddle 演示

ClientIDMode="Static"添加到页面控件后，我们现在可以确定 ASP.NET 生成的 ID 是相同的。

所以现在，您的代码可以正常工作，除了您的标签。As<asp:Label />呈现为<span>标签，因此您必须使用.text()方法而不是.val()：

$('#lbl1').text($('#latitude').val());
于 2013-06-05T07:01:24.007 回答
0

出于测试目的，您可以同时删除OnClientClick="return false"和OnClick="btn_Click"。您的 jquery 代码将处理单击事件。

我还注意到您的 id 与生成的 html 不同。试试这个更新的代码。

    $("#Submit1").on("click", function (e) {
        e.preventDefault();
        var address = $("#tbCity").val();
        var lat, lang;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                lat = results[0].geometry.location.lat();
                lang = results[0].geometry.location.lng();

                //alert(latitude + ", " + longitude);
            }

            $('#Hidden1').val(lat);
            $('#Hidden2').val(lang);
            $('#Text2').val(lat);   
            $('#Text3').val(lang);
            $('#Span1').val(lat);
        });
    });
于 2013-06-05T04:00:29.363 回答