使用 MVC 4 的 Jquery UI 自动完成答案

【问题标题】：Jquery UI Autocomplete with MVC 4使用 MVC 4 的 Jquery UI 自动完成
【发布时间】：2013-03-24 22:53:26
【问题描述】：

我在 MVC 4 中使用带有 Razor HTML 的 jquery ui 自动完成功能。我可以将它与硬编码值一起使用，但我想知道如何将它连接到数据库，以便不必对即将出现的值进行硬编码。

【问题讨论】：

请重新表述您的问题。现在你问，我该如何编程，这在任何情况下都是不可行的。您可以尝试nerddinnerbook.s3.amazonaws.com/Intro.htm 了解更多信息。
我很确定自动完成需要一个 url 参数。如果您将其指向返回列表的服务器，那么您就可以开始了。 docs

标签： jquery asp.net-mvc visual-studio asp.net-mvc-4 razor

【解决方案1】：

如果您使用的是 MVC4，那么您应该创建一个可以从视图访问的操作（呈现操作 url）。然后，在设置自动完成 jquery 时，需要将此（url）设置为源。

远程源的文档是here。

对于 MVC，它看起来像这样：

$( "#birds" ).autocomplete({
      source: "/MyController/OptionsAction",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });

【讨论】：

【解决方案2】：

最好使用 MVC 的 @URL.Action 来确保正确编码 URL，即使您的视图是一到十个文件夹。

在上面的示例“/MyController/OptionsAction”中，如果您将视图向下移动一个文件夹，@URL.Action 将继续工作，则该文件夹将不起作用。

注意ajax调用的格式是这样的：

发送数据：

网址（您要发帖的地方）

数据（您发布的数据）

type（发出的请求类型：POST 或 GET 或 PUT。如果留空，则默认为 GET）

contentType（向服务器发送数据时使用的内容类型。除非必要，否则最好不要更改）

接收数据：

dateType（您期望返回的数据类型：在本例中为 json）

success（请求成功时调用的函数）

        $('#Country').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetCountries", "User")',
                data: "{ 'CountrySearch': '" + $('#Country').val() + "' }",
                dataType: "json",
                type: "POST",
                contentType: 'application/json',
                success: function (data) {
                    response($.map(data, function (item) {
                        return JSON.parse(item);
                    }))
                },
                error: function (jqXhr, textStatus, errorThrown) { alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')"); },
            })
        },
        minLength: 1,
    });

国家从这样的数据库调用中返回数据：

{ "国家":"["澳大利亚", "奥地利", "加拿大", "美国"]" }

    public JsonResult GetCountries(string CountrySearch)
    {
        string[] Countries = new AddressManager().GetCountries(CountrySearch);
        string serialisedList = new JavaScriptSerializer().Serialize(Countries);
        return new JsonResult { Data = new { Countries = serialisedList }, ContentEncoding = Encoding.UTF8, ContentType = "text/plain", JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

【讨论】：