jQuery Autocomplete 在动态加载的 ASP.NET MVC 视图中不起作用答案

【问题标题】：jQuery Autocomplete not working inside ASP.NET MVC View Dynamically LoadedjQuery Autocomplete 在动态加载的 ASP.NET MVC 视图中不起作用
【发布时间】：2012-03-30 08:09:33
【问题描述】：

我正在动态加载 ASP.NET MVC 3 视图。在视图内部，有一个需要“自动完成”的文本框。代码如下：

@model CountryViewModel

@using (Html.BeginForm("Create", "Country", FormMethod.Post)) {
@Html.ValidationSummary(true)
<div class="field">
@Html.LabelFor(model => model.Name)
@Html.TextBoxFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>

<div class="field">
@Html.LabelFor(model => model.Description)
@Html.TextBoxFor(model => model.Description)
</div>

<div class="field">
    @Html.LabelFor(model => model.Latitude)
    @Html.TextBoxFor(model => model.Latitude)
</div>

<div class="field">
    @Html.LabelFor(model => model.Longitude)
    @Html.TextBoxFor(model => model.Longitude)
</div>

@Html.HiddenFor(model => model.CultureId, new { id = "CultureId" })
}

<script type="text/javascript">

$(document).ready(function () {
    $('#Name').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '@(Url.Action("GetCountriesB", "Country"))',
                data: "{ 'countryName': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            value: item.Country
                        }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2,
        focus: function( event, ui ) {
            $( '#Name' ).val( ui.item.Country );
            return false;
        }
   });
});

我正在一个 jQuery UI 对话框中加载这个视图。当我使用 Firebug 进行调试时，似乎没有加载“脚本”标签，因此自动完成功能不起作用。

知道为什么会出现这种行为吗？

谢谢

【问题讨论】：

我在您的代码中没有看到任何<script> 标记...这可能是它无法正常工作的原因...您说它是“动态”加载的-如何？在通过 ajax 加载 DOM 之后？
我使用 jQuery.ajax() 加载视图并将其放置在对话框中。它正在与其他视图一起使用（但其他视图中没有嵌入 JS）。我可以使用类似于“实时”的方式将“自动完成”附加到动态加载的元素吗？
响应的内容类型是什么 - 是 text/html 还是 text/plain？如果它不是 text/html，那么当您发出 Ajax 请求以加载视图时，为“text/html”设置“accepts”参数。这可以使用 $.ajaxSetup() 来完成

标签： jquery asp.net-mvc-3 jquery-ui

【解决方案1】：

您不应该将任何脚本放在部分中。脚本属于单独的 javascript 文件。它们不应与标记混合。所以把你的脚本放到一个单独的函数中：

function hookupAutoComplete() {
    // notice that since we have externalized this into a separate js file
    // we can no longer use url helpers here => we will fetch the url
    // from the textbox
    var url = $('#Name').data('url');
    $('#Name').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: url,
                data: JSON.stringify({ countryName: request.term }),
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function(data) { return data; },
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            value: item.Country
                        }
                    }))
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        minLength: 2,
        focus: function( event, ui ) {
            $( '#Name' ).val( ui.item.Country );
            return false;
        }
   });
}

假设 url 存储为 HTML5 data-* 属性：

@Html.TextBoxFor(model => model.Name, new { data_url = Url.Action("GetCountriesB", "Country") })

然后在你的 AJAX 请求的成功回调中，一旦你将部分加载到 DOM 中调用这个函数：

$.ajax({
    url: '/someurl',
    success: function(result) {
        $('#dialog').html(result);
        hookupAutoComplete();
    }
});

实际上，您可以尝试从脚本中删除 $(document).ready(...)，它可能确实有效，但我的建议是从您的标记中将此脚本外部化。

【讨论】：

谢谢达林。我通常从内联脚本开始，确保它有效，然后将脚本移动到单独的文件中。不过有一个问题，我通常有一个方法来处理所有动态视图的加载，但是，有些视图需要像这里这样的自动完成的额外处理。使用通用函数加载所有动态视图的最佳方法是什么，但是为特定视图添加特定函数？我应该一次放置所有函数，然后 jQuery 不会选择选择器，因此不会发生任何事情并影响视图？谢谢

【解决方案2】：

我遇到了同样的问题，结果发现 z-index 太低了。它实际上正在工作，但只是没有显示。

【讨论】：