Question

我正在建立一个汽车共享网站，并有一个浏览现有旅程的页面。页面顶部是一个用于搜索位置的搜索栏。我想使用Google Maps API验证地名，然后使用坐标将其发送到控制器，然后在半径范围内进行搜索。

对于我的生活，无论我使用什么样的代码组合，在将表单提交给控制器之前，我似乎无法更新HiddenFor或搜索字段。我知道验证地方的代码是可行的，因为我在另一个页面上使用它来创建旅程。

因此理论是用户在SearchString文本框中输入地名，单击提交按钮，然后运行jquery代码，验证地点，使用地理编码器获取正确的位置，然后更新搜索字符串并协调隐藏字段，最后张贴到控制器。

这是我目前的代码：

@using (Html.BeginForm("BrowseJourney", "Journey", FormMethod.Post, new { id = "searchForm" }))
{    <div class="form-group" style="padding-bottom: 50px;">
        <div class="col-md-2">
            Find by location:
        </div>
        <div class="col-md-3">
            @Html.TextBox("SearchString", null, new { @class = "form-control" , id = "SearchString"})
        </div>
        <div class="col-md-2">
            Distance:
        </div>
        <div class="col-md-1">
            @Html.DropDownList("Distance", null, new { @class = "form-control" })
        </div>
        @Html.HiddenFor(model => model.SearchLatitude, new { id = "SearchLatitude" })
        @Html.HiddenFor(model => model.SearchLongitude, new { id = "SearchLongitude" })
        <div class="col-md-2">
            <input type="submit" value="Search" class="btn btn-default" id="submitButton" />
        </div>
    </div>   

}

和javascript：

   <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyD4lap4yr45W9ztvRtfNw7JA-d03UVYtx0&region=GB" type="text/javascript"></script>
    <section class="scripts">
      <script type="text/javascript">

        $('#submitButton').click(function() {
          var address = document.getElementById("SearchString").value;
          var geocoder = new google.maps.Geocoder();
          geocoder.geocode({
            'address': address,
            componentRestrictions: {
              country: 'UK'
            }
          }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              document.getElementById("SearchString").value = results[0].formatted_address;
              document.getElementById("SearchLatitude").value = results[0].geometry.location.lat();
              document.getElementById("SearchLongitude").value = results[0].geometry.location.lng();
            } else {
              alert("Unable to find location");
              document.getElementById("SearchString").value = null;
            }
          });
        });
      </script>
    </section>

最后是控制器：

public ActionResult BrowseJourney(string searchString, int distance, string searchLatitude, string searchLongitude)
{
}

非常感谢任何帮助！

Answer 1

它不起作用的原因是您在单击处理程序中添加代码，然后调用异步事件并等待响应。

与此同时，表格已经提交。

您需要停止表单提交，并在返回值时从代码中提交表单。

类似的东西：

bool proceed = false;
$('#searchForm').submit(function(e) {
  if (!proceed) {
    var address = $("#SearchString").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': address,
      componentRestrictions: {
        country: 'UK'
      }
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        $("#SearchString").val(results[0].formatted_address);
        $("#SearchLatitude").val(results[0].geometry.location.lat());
        $("#SearchLongitude").val(results[0].geometry.location.lng());
        proceed = true;  // Allow submit to proceed next time
        $('#searchForm').submit();
      } else {
        alert("Unable to find location");
        $("#SearchString").value = null;
      }
    });
  }
  return proceed;
});

注意：请为所有选择器使用jQuery。更短更容易遵循（对于jQuery编码器）。＆＃34;一分钱...＆＃34;

Answer 2

我在mvc 5上遇到了问题，以下问题的回答帮助我解决了。 Wait for form.submit() / POST to complete

可以使用e.preventDefault（）;以防止默认提交。

jQuery中的MVC Update HiddenFor并提交给控制器

2 个答案: