MVC4 从 View 调用 Javascript 函数答案

【问题标题】：MVC4 calling Javascript function from ViewMVC4 从 View 调用 Javascript 函数
【发布时间】：2013-08-17 15:24:08
【问题描述】：

如果您输入城市和州，然后在文本框外部单击而不是直接在“搜索”提交按钮上，则以下代码有效。在文本框外部单击会触发 onblur 事件，该事件会触发 javascript 代码以在城市和州上运行 bing 地图地理编码，并使用纬度和经度填充两个隐藏的文本框。然后，当您单击提交按钮时，代码将纬度和经度传递给 Job 控制器上的 CityDistanceSort 操作，该操作根据传入的纬度和经度与数据库中的城市的距离对数据库中的城市进行排序，然后将该排序模型发布到视图。一切正常，除了您需要能够输入城市和州，然后当然只需直接单击提交按钮。但是这样做不会给 JS 代码时间进行地理编码并导致错误：参数字典包含不可为空类型“System.Double...”的参数“SearchLatitude”的空条目...

@using(Html.BeginForm("CityDistanceSort", "Job"))
{     
    <input type="hidden" name="SearchLatitude" id="SearchLatitude"> 
    <input type="hidden" name="SearchLongitude" id="SearchLongitude"> 
    <input type="text" name="CityStateName" id="CityStateName" placeholder="CITY, BY DISTANCE" onblur="GeocodeSearchCityState()">   
    <input type="submit" value="SEARCH" />
}

    [HttpPost]
    public ActionResult CityDistanceSort(double SearchLatitude, double SearchLongitude)
    {
        var model = db.Jobs.ToList();
        foreach (var item in model)
            { item.PickupDistanceSort = ICN.CustomMethods.GetDistance(SearchLatitude, SearchLongitude, item.PickupLatitude, item.PickupLongitude); }
        return View("JobHeadings", model.OrderBy(s => s.PickupDistanceSort));
    }

【问题讨论】：

在提交表单之前调用你的计算函数。
如何在表单提交前调用函数，而不需要用户点击两个按钮？一个调用计算，一个提交表单。另外，在使用 onblur 事件提交表单之前调用计算，但这不起作用。
实现此目的的一种方法是，将提交按钮设为普通按钮，然后单击按钮调用计算代码，然后从 jquey 代码$("form#formID").submit();提交表单
但在这种情况下，表单正在提交给 MVC 控制器内的操作。我不知道将表单提交给控制器并传入隐藏文本框的值等的 javascript 按钮的语法。
不要担心隐藏字段会在表单集合中发布，您的表单也会发布到正确的操作。有关表单收集的更多信息，请查看stackoverflow.com/questions/1391318/…

标签： javascript asp.net-mvc

【解决方案1】：

假设您可以使用 jQuery（它为处理 XMLHttpRequest 对象提供了一个很好的抽象），您可以使用 $.get 执行类似的操作：

$(function(){
    $('#your-submit-button').on('click', function(e){

        e.preventDefault();

        $.get('your-action-url', { /* your data */ }, function(response, status, jqxhr){

            // this is the callback of the request for your geocode info
            // response is whatever your action returns; I recommend JSON

            // bind your values to their relevant inputs
            $('#your-latitude-input').val(response.latitude); // and so on

            $('#your-form-id').submit(); // when called with no parameters, triggers form submission
        });
    });
});

这显然不包括错误处理并做出一些假设......

【讨论】：