ASP.NET Core MVC 自动完成部分视图不显示结果

Posted 2023-05-09

【中文标题】ASP.NET Core MVC 自动完成部分视图不显示结果

【英文标题】：ASP.NET Core MVC autocomplete partial view not showing result

【发布时间】：2021-02-07 15:13:18

【问题描述】：

我有一个局部视图，它不会显示它从控制器获得的结果。这是在 ASP.NET Core MVC 2.1 中。

代码的基础来自here。

这是部分视图：

@model City

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Grad</h4>
            </div>
            <div class="modal-body">
                <form asp-controller="City" id="TestForm">
                    <div class="form-group">
                        <label class="control-label">Name</label>
                        <input asp-for="Name" class="form-control" id="CityName" />
                        <span asp-validation-for="Name" class="text-danger"></span>
                    </div>

                    <div class="form-group">
                        <label class="control-label">Postal Code</label>
                        <input asp-for="PostalCode" class="form-control" id="PostalCode" onkeypress="return isNumberKey(event)" />
                        <span asp-validation-for="PostalCode" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Country TEST</label>
                        <input type="text" id="txtCounty" name="CountyName"/>
                        <input type="hidden" id="hfCountry" name="CountyID" />
                        <span asp-validation-for="CountryID" class="text-danger"></span>
                    </div>


                    <div class="form-group">
                        <input type="submit" value="Save" class="btn btn-default" id="SaveCity" />
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" id="CloseCity" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

有问题的部分是：

<div class="form-group">
    <label class="control-label">Country TEST</label>
    <input type="text" id="txtCounty" name="CountyName"/>
    <input type="hidden" id="hfCountry" name="CountyID" />
    <span asp-validation-for="CountryID" class="text-danger"></span>
</div>

它不想显示结果它gets。

我使用的 jQuery 方法是在 Index.cshtml 脚本中：

$(document).on("focus", "#txtCountry", function (e) 
    $("#txtCountry").autocomplete(
        source: function (request, response) 
            $.ajax(
                url: '/City/AutoComplete/',
                type: "POST",
                data:  "prefix": request.term ,
                success: function (data) 
                    response($.map(data, function (item) 
                        return item;
                    ))
                
            );
        ,
        select: function (e, i) 
            $("#hfCountry").val(i.item.val);
        ,
        minLength: 1
    );
);

当我输入这段代码时：

<input type="text" id="txtCounty" name="CountyName"/>
<input type="hidden" id="hfCountry" name="CountyID" />

在部分视图之外shows 搜索到的东西。

这是它的控制器：

        [HttpPost]
    public JsonResult AutoComplete(string prefix)
    

        var countries = (from country in this._dbContext.Countries
                        where country.Name.ToLower().Contains(prefix.ToLower())
                        select new
                        
                            label = country.Name,
                            val = country.ID
                        ).ToList();
   return Json(countries); 

任何人都可以帮助我找不到答案。

【参考方案1】：

我找到了答案。 文本显示在模态后面，所以我看不到它。

    <style>
        .ui-autocomplete 
            z-index: 5000;
        
    </style>

将它放在 _Layout.cshtml 文件中，在环境中。

<environment include="Development">
    ... some stuff...    

    <style>
        .ui-autocomplete 
            z-index: 5000;
        
    </style>

     ... some ,oe stuff...    
</environment>