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

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 编码器）。 “一分钱……”

Answer 2

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

可以使用 e.preventDefault();防止默认提交。