未捕获的TypeError:$(...)。autocomplete不是ASP.MVC应用程序中的函数

时间:2017-11-09 21:56:35

标签: jquery asp.net-mvc razor model asp.net-ajax

我有简单的ASP.NET MVC Index页面,我想要包含自动填充搜索文本框。我也参考了。但它仍然显示相同的错误。我的页面看起来像:

@model IEnumerable<TestProject.Models.Test>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#txtCustomer").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Home/AutoComplete/',
                        data: "{ 'prefix': '" + request.term + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data, function (item) {
                                debugger;
                                return {
                                    value: item.FName,
                                    id: item.Id
                                };
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (event, ui) {
                    debugger;
                    $("#hfCustomer").val(ui.item.value);
                    $("#hfCustomer").val(ui.item.id);
                },
                minLength: 1
            });
        });

    </script>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{

    <form class="form-inline">
        <div class="form-group">
            <label for="Search">Search</label>
            <input type="text" class="form-control" id="txtCustomer" name="CustomerName" placeholder="Search">
            <input type="hidden" id="hfCustomer" name="CustomerId" class="form-control">
        </div>
        <input type="submit" id="btnSubmit" value="Search" class="btn btn-info" />
    </form>

}

如果我把这段代码然后我工作正常但它删除了ASP.NET MVC提供的默认样式。

@{

Layout = null;
}

我用谷歌搜索但未找到合适的解决方案。请帮我解决这个问题。提前谢谢。

1 个答案:

答案 0 :(得分:1)

感谢您的建议。我已将所有JavaScript代码放在

@section scripts
{

}

现在它对我有用。谢谢你们。