Question

我有一个通用的MVC aspnetcore设置，该设置从本地数据库中提取数据，其中包含所有美国邮政编码，它们所关联的州和城市。我想在说出3位数字表示他们应该推断的状态后撤回建议，然后在文本框中输入5位数字后填写缺失的城市。使我感到困惑的问题是javascript函数数据中包含返回的信息。但是，一旦示波器离开该功能，并且尝试将另一个文本框的值设置为任何该信息的任何信息，该信息就会丢失。

我的观点

@section Scripts{
     <script src="Scripts/jquery-1.5.min.js" type="text/javascript"></script>
     <script src="~/js/data.js" type="text/javascript"></script>
}
<div class="form-group">
    <label asp-for="Zip" class="col-xs-2 control-label"></label>
    <div class="col-xs-6">
        <input id="Zip" asp-for="Zip" class="form-control" onkeyup="loadData()"/>
        <span asp-validation-for="Zip" class="text-danger" />
    </div>
</div>

我的JavaScript文件

function loadData() {
     var str = $("#Zip").val();
     if (str.length == 3){
        $.get("/Localities/OnChange", { id: str }, function (data) {
            $("#Code").val(data.code);
        });
    }
    if (str.length == 5) {
        $.get("/Localities/OnChange", { id: str }, function (data) {
            $("#Boroughs").val(data.boroughs);
            $("#City").val(data.city);
            $("#Code").val(data.code);
            $("#Country").val(data.country);
            $("#County").val(data.county);
            var temp = data.city;
        });
    }
}

我的控制器

 [HttpGet]
    public Localities OnChange(string id)
    {
        Localities temp = _context.Localities.FirstOrDefault(x => x.Zip.StartsWith(id));
        var temp2 = JsonConvert.SerializeObject(temp);
        return temp;
    }

Answer 1

这里几乎没有潜在的问题：

1）在此代码中：

function loadData() {
     var str = $("#Zip").val();
     if (str.length == 3){
        $.get("/Localities/OnChange", { id: str }, function (data) {
            $("#Code").val(data.code);
        });
    }
    if (str.length == 5) {
        $.get("/Localities/OnChange", { id: str }, function (data) {
            $("#Boroughs").val(data.boroughs);
            $("#City").val(data.city);
            $("#Code").val(data.code);
            $("#Country").val(data.country);
            $("#County").val(data.county);
            var temp = data.city;
        });
    }
}

第二个GET中的var temp仅在现在的函数中可用。

第二个最可能导致您的代码不显示数据的原因是因为它很可能

data.data.city和data.data.code等

如果您这样做 console.log(data); 我很确定它嵌套在另一个数据包装器中。

让我知道我会将功能变量更改为function（response），因此您对所处的级别感到困惑。

这应该有效，或者至少可以让您更好地了解发生了什么：

var temp; // Global

function loadData() {
         var str = $("#Zip").val();
         if (str.length == 3){
            $.get("/Localities/OnChange", { id: str }, function (response) {
                $("#Code").val(response.data.code);
            });
        }
        if (str.length == 5) {
            $.get("/Localities/OnChange", { id: str }, function (response) {
                $("#Boroughs").val(response.data.boroughs);
                $("#City").val(response.data.city);
                $("#Code").val(response.data.code);
                $("#Country").val(response.data.country);
                $("#County").val(response.data.county);
                temp = response.data.city;
            });
        }
    }

还要检查您的控制台是否有其他错误，这些错误可能会阻止代码执行。

检查此内容：

右键单击元素并获取ID

<input type="text" id="#city">

此ID可能与您期望的渲染后的ID不同

对Javascript功能缺乏理解

1 个答案: