使用MVC 4进行Jquery UI自动完成

Question

我在使用Razor HTML的MVC 4中使用jquery ui autocomplete。 我可以使用硬编码值，但我想知道如何将它连接到数据库，所以出现的值不必硬编码。

Answer 1

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

远程源的文档在这里 。

对于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 );
      }
    });

Answer 2

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

在上面的示例“/ MyController / OptionsAction”中，如果您将视图移动到一个文件夹，那么@ URL.Action将继续工作。

注意ajax调用的格式如下：

1. 发送数据：

url（你要发布到的地方）

数据（您发布的数据）

type（正在进行的请求类型：POST或GET或PUT。如果留空，则为默认值）

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

2. 接收数据：

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

成功（如果请求成功则调用函数）

        $('#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 };
    }