Question

我正在尝试编写可以通过绑定来过滤结果的下拉列表。因为我使用了jquery自动完成功能。

模型类

public class Customer
{
    public int CustomerID { get; set; }
    public string CustomerName { get; set; }

}

控制器类

    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult GetVisitCustomer(string term = "")
    {

        List<Customer> objCustomerlist = new List<Customer>()
        {

            new Customer {CustomerID=1,CustomerName="Ananda" },
            new Customer {CustomerID=2,CustomerName="Basitha" },
            new Customer {CustomerID=3,CustomerName="Chathura" },
            new Customer {CustomerID=4,CustomerName="Darashana" },
            new Customer {CustomerID=5,CustomerName="Eshan" },
            new Customer {CustomerID=6,CustomerName="Fuzal" },
            new Customer {CustomerID=7,CustomerName="Gihan" }

        };


        var filteCustomers = objCustomerlist
                    .Where(c => c.CustomerName.ToUpper()
                    .Contains(term))
                    .Select(c => new { Name = c.CustomerName, ID = c.CustomerID })
                    .Distinct().ToList();

        return Json(filteCustomers, JsonRequestBehavior.AllowGet);
    } 
}

查看课程

@model MVC5AutoComplete.Models.Customer

@{
    ViewBag.Title = "Customer Dropdown";
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $("#CustomerName").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("GetVisitCustomer", "Customer")',
                    type: "POST",
                    datatype: "json",
                    data: {
                        term: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (val, item) {
                            return {
                                label: val.Name,
                                value: val.Name,
                                customerId: val.ID
                            }
                        }))
                    }
                })
            },
            select: function (event, ui) {
                $("#CustomerID").val(ui.item.customerId);
            }
        });
    });
</script>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />

        <div class="form-group">

            <div class="col-md-12">
                @Html.TextBoxFor(model => Model.CustomerName, new { @class = "form-control" })
                @Html.HiddenFor(model => Model.CustomerID)
            </div>
        </div>

    </div>
}

这是在没有任何编译时错误的情况下进行编译。但是这不会在下拉列表中填充任何结果，我在GetVisitCustomer上放置了一个甚至没有触发的调试点，

Answer 1

我认为你可能需要改变两个地方。

您的js代码

如果您有布局页面（LayOut = Null未在视图中设置）和jquery- {version} .js已经存在于布局页面中。

从代码中删除<script src="//code.jquery.com/jquery-1.10.2.js"></script>。

将整个脚本保存在@section Scripts内。

@section Scripts {
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    @*<script src="//code.jquery.com/jquery-1.10.2.js"></script>*@
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#CustomerName").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("GetVisitCustomer", "Test")',
                        type: "POST",
                        datatype: "json",
                        data: {
                            term: request.term
                        },
                        success: function (data) {
                            response($.map(data, function (val, item) {
                                return {
                                    label: val.Name,
                                    value: val.Name,
                                    customerId: val.ID
                                }
                            }))
                        }
                    })
                },
                select: function (event, ui) {                            
                    $("#CustomerID").val(ui.item.customerId);
                }
            });
        });
    </script>
}

需要更改LINQ表达式以获取正确的结果。将.Contains(term))更改为.Contains(term.ToUpper()))
最重要的是删除所有与此代码相关的断点和调试器。

使用asp.net mvc 5的jquery自动完成功能不会填充

1 个答案: