MVC更新隐藏在jQuery中，并提交给控制器

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