在asp按钮回发之前运行Javascript更新并访问更新的值

时间:2014-01-25 01:10:21

标签: javascript jquery asp.net

我希望在通过javascript点击按钮后填充隐藏字段,但也可以回发并通过相同的按钮点击访问后面代码中的隐藏字段。

上下文是用户将输入邮政编码和半径,点击搜索按钮,然后我使用Google API获取邮政编码的lat和lng并使用这些值填充隐藏字段,然后搜索按钮执行搜索并使用标准的asp:button onclick事件

填充我目前正在尝试处理的结果

这是我的JS代码

    var geocoder;
    function initialize() {
      geocoder = new google.maps.Geocoder();
    }

    function codeAddress() {
      var address = $('#PostcodeTextBox').val();
      geocoder.geocode({ 'address': address }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              $('#Latitude').val(results[0].geometry.location.lat());
              $('#Longitude').val(results[0].geometry.location.lng());

              __doPostBack($('#SearchButton').attr('id'), '');
          } else {
              alert('Geocode was not successful for the following reason: ' + status);
          }
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

我的标记

<asp:HiddenField ID="Longitude" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="Latitude" runat="server" ClientIDMode="Static" />
<legend><h3>Supplier Search</h3></legend>
<label class="control-label" for="inputEmail">Supplier Type</label>
<asp:DropDownList ID="SupplierTypeDropDownList" runat="server" AppendDataBoundItems="true" >
  <asp:ListItem Text="All" Value="" />
</asp:DropDownList>
<label class="control-label" for="PostcodeTextBox">Postcode</label>
<asp:TextBox ID="PostcodeTextBox" runat="server" ClientIDMode="Static" placeholder="Postcode" />
<label class="control-label" for="RadiusDropDownList">Radius</label>
<asp:DropDownList ID="RadiusDropDownList" runat="server" AppendDataBoundItems="true" >
  <asp:ListItem Text="All" Value="" />
  <asp:ListItem Text="1" Value="1" />
  <asp:ListItem Text="5" Value="5" />
  <asp:ListItem Text="10" Value="10" />
  <asp:ListItem Text="20" Value="20" />
  <asp:ListItem Text="50" Value="50" />
</asp:DropDownList>
<asp:Button ID="SearchButton" runat="server" Text="Search" CssClass="btn btn-primary btn-large" OnClientClick="codeAddress();" OnClick="SearchButton_Click" UseSubmitBehavior="false" ClientIDMode="Static" />

后端代码

private void SearchButton_Click(object sender, EventArgs e)
{
SearchInfo search = new SearchInfo ();
search.Lat = Latitude.Value; // empty
search.Lng = Longitude.Value; // empty
}

这已经经历了许多基于在线评论的不同版本,问题是每次我点击SearchButton_Click隐藏字段都有空白值

任何帮助或想法将不胜感激

由于

1 个答案:

答案 0 :(得分:0)

这可能是一个非常简单的解决方案,但我想不到它,所以我会给你我的“黑客”。

使用CSS隐藏.Net按钮

#SearchButton { display: none }

在.Net(或标准HTML)中添加另一个虚拟按钮

<button type="button" id="fake-button" class="btn btn-primary btn-large">Search</button>

然后是一些jQuery:

var geocoder;
function initialize() {
  geocoder = new google.maps.Geocoder();
}

function codeAddress() {
  var address = $('#PostcodeTextBox').val();
  geocoder.geocode({ 'address': address }, function (results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          $('#Latitude').val(results[0].geometry.location.lat());
          $('#Longitude').val(results[0].geometry.location.lng());

          //alert($('#Latitude').val());
          //alert($('#Longitude').val());

          $('#SearchButton').click(); //trigger the click event of the submit button
      } else {
          alert('Geocode was not successful for the following reason: ' + status);
      }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function(){
    $('#fake-button').click(function(event){
        event.preventDefault();
        // populate your hidden fields here
        codeAddress();
    })
})