asp.net mvc core select2下拉自动填充ajax调用答案

【问题标题】：asp.net mvc core select2 dropdown autopopulate ajax callasp.net mvc core select2下拉自动填充ajax调用
【发布时间】：2020-08-05 17:52:38
【问题描述】：

我有一个视图，我正在尝试实现自动填充文本框/下拉字段。我正在使用我查询的列表。

我正在关注这个例子 http://www.dotnetqueries.com/Article/159/how-to-implement-select2-with-ajax-and-json-in-asp-net-mvc ，断点甚至没有命中我控制器中的方法。那么我的设置方式或在控制器中调用操作结果方法的方式是否有问题。

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using TestSelect2.Models;
using Controller = Microsoft.AspNetCore.Mvc.Controller;
    
    namespace TestSelect2.Controllers
    {
        public class HomeController : Controller
        {
            private readonly ILogger<HomeController> _logger;
    
            public HomeController(ILogger<HomeController> logger)
            {
                _logger = logger;
            }
    
            public IActionResult Index()
            {
                return View();
            }
    
          
            [Microsoft.AspNetCore.Mvc.HttpPost]
            [Microsoft.AspNetCore.Mvc.Route("/home/account-list")]
            public Microsoft.AspNetCore.Mvc.ActionResult GetAccounts(string q)
            {
                List<Account> accounts = new List<Account>();
                // Add parts to the list.
                accounts.Add(new Account() { Id = 1, AccountNumber = "MVP1" });
                accounts.Add(new Account() { Id = 1, AccountNumber = "MVP11" });
                accounts.Add(new Account() { Id = 1, AccountNumber = "ABC2" });
                accounts.Add(new Account() { Id = 1, AccountNumber = "ABC3" });
                accounts.Add(new Account() { Id = 1, AccountNumber = "XYZ3" });
                accounts.Add(new Account() { Id = 1, AccountNumber = "XYZ4" });
    
     
                        
                    if (!(string.IsNullOrEmpty(q) || string.IsNullOrWhiteSpace(q)))
                    {
                        accounts = accounts.Where(x => x.AccountNumber.ToLower().StartsWith(q.ToLower())).ToList();
                    }
                    return Json(new { items = accounts }, JsonRequestBehavior.AllowGet);
            }
          
    
        }
    }



    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Select2 DEMO</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    
        <script>
            $(document).ready(function () {
                $(".accountSelect").select2({
                    ajax: {
                        url: '/home/account-list',
                        width: 'resolve',
                        data: function (params) {
                            return {
                                q: params.term// search term
                            };
                        },
                        processResults: function (data) {
                            return {
                                results: data.items
                            };
                        },
                        minimumInputLength: 2,
                        width: 'resolve'
                    }
                });
     
            });
        </script>
        <style>
            body {
                margin: auto;
                width: 600px;
                padding: 50px;
            }
    
            .accountSelect {
                width: 400px;
            }
        </style>
    </head>
    <body>
    <form method="post">
    
        <select class="accountSelect"></select>
    </form>
    </body>
    </html>

【问题讨论】：

标签： javascript ajax asp.net-core-mvc jquery-select2

【解决方案1】：

删除 GetAccounts 操作上的 [HttpPost] 属性。由于 ajax 发出 get 请求。而您遵循的教程是针对 asp.net 而不是 asp.net core，因此没有 JsonRequestBehavior。

注意：select2model必须带有id和text两个属性，否则无法识别。更改您的 Account 模型，如下所示：

public class Account
{
    public int Id { get; set; }
    public string Text { get; set; }
}

和控制器动作，确保id不能相同。

[Route("/home/account-list")]
public IActionResult GetAccounts(string q)
{
    List<Account> accounts = new List<Account>();
    // Add parts to the list.
    accounts.Add(new Account() { Id = 1, Text = "MVP1" });
    accounts.Add(new Account() { Id = 2, Text = "MVP11" });
    accounts.Add(new Account() { Id = 3, Text = "ABC2" });
    accounts.Add(new Account() { Id = 4, Text = "ABC3" });
    accounts.Add(new Account() { Id = 5, Text = "XYZ3" });
    accounts.Add(new Account() { Id = 6, Text = "XYZ4" });


    if (!(string.IsNullOrEmpty(q) || string.IsNullOrWhiteSpace(q)))
    {
        accounts = accounts.Where(x => x.Text.ToLower().StartsWith(q.ToLower())).ToList();
    }
    return Json(new { items = accounts });
}

视图和脚本：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Select2 DEMO</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {
            $(".accountSelect").select2({
                minimumInputLength: 2,
                ajax: {
                    url: '/home/account-list',
                    data: function (params) {
                        return {
                            q: params.term// search term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.items
                        }
                    },
                }
            });
        });
    </script>

    <style>
        body {
            margin: auto;
            width: 600px;
            padding: 50px;
        }

        .accountSelect {
            width: 400px;
        }
    </style>
</head>
<body>
    <form method="post">
        <select class="accountSelect"></select>
    </form>

</body>
</html>

结果：

【讨论】：

【解决方案2】：

你可以尝试如下：

//1. Action Method Which Returns the data. 
public ActionResult GetSelect2Data(string query)
{
    //In Realtime This should come from the Database
    List<DropDownItem> collection = new List<DropDownItem>() {
        new DropDownItem(){ Value = 1,  Text = "Switzerland"},
        new DropDownItem(){ Value = 2,  Text = "Canada"},
        new DropDownItem(){ Value = 3,  Text = "Japan"},
        new DropDownItem(){ Value = 4,  Text = "Germany"},
        new DropDownItem(){ Value = 5,  Text = "Australia"},
        new DropDownItem(){ Value = 6,  Text = "United Kingdom"},
        new DropDownItem(){ Value = 7,  Text = "United States"},
        new DropDownItem(){ Value = 8,  Text = "Sweden"},
        new DropDownItem(){ Value = 9,  Text = "India"},
       new DropDownItem(){ Value = 10,  Text = "Russia"},
     };


        var searchResult = from c in collection
                           where c.Text.Contains(query, 
   StringComparison.CurrentCultureIgnoreCase)
                           select c;

        return Json(searchResult.ToList());
    }



///2. JS Method which binds any HTML Select as Select2 or Smart Select.   
///In the User Interface (.cshtml file)You may define a framework JS Function as  which could be used anywhere
function registerSelect2(dropDownSelector, ajaxUrl) {
$(dropDownSelector).select2({
    ajax: {
    url: ajaxUrl,
    dataType: 'json',
    delay: 10,
    type: 'GET',
    data: function (params) {
    return {
        query: params.term, // search term
    };
    }
    , processResults: function (data) {
    return {
    results: $.map(data, function (item) {
        return {
            id: item.value,
            text: item.text,
        };
    })
    };
    },
    cache: true,
},
    minimumInputLength: 3,
    allowHtml: true,
    allowClear: true
});
}


//3. Invoke the JS Function to make any particular Select a Select2. 
$(function () {
    //Just you need to pass the Selector of your control and the Ajax Url from which data has to be loaded
    registerSelect2("#ddlSelect2", "/user/GetSelect2Data");
});


//This is the Simple Select which's made a Select2 Control. Paste it somewhere in the UI
<select id="ddlSelect2"></select>

【讨论】：