jQuery Select2 ajax数据源未触发/调用

时间:2016-04-24 20:35:40

标签: c# jquery asp.net-mvc jquery-select2-4

我试图将我的Select2下拉列表绑定到我的应用程序的MVC(v5.2.3)控制器。

我几乎复制了demo

中的代码
<select id="select-ticket-test" class="duplicate-post-select" style="width: 100%;" placeholder="Select ticket">
    <option></option>
    <option value="3620194" selected="selected">select2/select2</option>
</select>

@section Scripts {
    <script type="text/javascript">
        function formatTicket(ticket) {
            if (ticket.loading) {
                return ticket.text;
            }

            var markup = "<div class='select2-result-repository clearfix'>" +
              "<div class='select2-result-repository__avatar'><img src='" + ticket.owner.avatar_url + "' /></div>" +
              "<div class='select2-result-repository__meta'>" +
                "<div class='select2-result-repository__title'>" + ticket.full_name + "</div>";

            if (ticket.description) {
                markup += "<div class='select2-result-repository__description'>" + ticket.description + "</div>";
            }

            markup += "<div class='select2-result-repository__statistics'>" +
              "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + ticket.forks_count + " Forks</div>" +
              "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + ticket.stargazers_count + " Stars</div>" +
              "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + ticket.watchers_count + " Watchers</div>" +
            "</div>" +
            "</div></div>";

            return markup;
        }

        function formatTicketSelection(ticket) {
            return ticket.Id || ticket.Subject;
        }

        $("#select-ticket-test").select2({
            placeholder: "Select a state",
            allowClear: true,
                ajax: {
                    url: "@Url.Action("GetAjaxAsync")",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            searchTerm: params.term,
                            pageSize: params.page,
                            pageNum: params.page
                        };
                    },
                    processResults: function (data, params) {
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite
                        // scrolling can be used
                        params.page = params.page || 1;

                        return {
                            results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 1,
                templateResult: formatTicket,
                templateSelection: formatTicketSelection
            });
    </script>
}

public async Task<ActionResult> GetAjaxAsync(string searchTerm, int pageSize, int pageNum)
{
    long number = Convert.ToInt64(searchTerm.Replace("T", null));

    var posts = await UnitOfWork.SupportPosts.Where(x => x.Number == number).ToListAsync();
    var json = new
    {
        Results = posts.Select(x => new
        {
            x.Id,
            x.NumberName
        }),
        Total = posts.Count
    };
    return Json(json, JsonRequestBehavior.AllowGet);
}

我注意到的是,占位符甚至没有显示出来。 Select2被初始化(如&#34;不是&#34;真实&#34;下拉列表&#34;),但没有显示占位符。在文本框中输入内容时,甚至不会对我的控制器进行任何调用。

控制台中也没有JavaScript错误。

0 个答案:

没有答案