JQuery пользовательского элемента управления загружается до загрузки JQuery

Question

Я создаю пользовательский элемент управления, который использует функцию автозаполнения jQuery.UI. Мое приложение имеет стандартную главную страницу веб-формы, которая содержит тег ScriptManager.

Я встраиваю файл javascript, который имеет следующий код:

$(document).ready(function () {  
    var param;
    var p = '<%=this.PostbackURL%>';


    $('#<%=AutoCompleteTextBox.ClientID%>').autocomplete({
        source: function (request, response) {
            param = $('#<%=AutoCompleteTextBox.ClientID%>').val();
            console.log('Param: ' + param);
            $.ajax({
                type: "POST",
                url: p,
                data: '{term:"' + param + '"}',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item
                        }
                    }))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        },
        close: function (event, ui) {
            c();
        },
        minLength: 1
    })
        .autocomplete("instance")._renderItem = function (ul, item) {
            return $("<li>")
                .append(formatListItem(param, item.value))
                .appendTo(ul);
        };

});

В самом классе я пробовал различные попытки регистрации файла js, пытаясь получить код Jquery длязагрузить после ScriptManager в MasterPage загружается без удачи.

 protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

 Page.ClientScript.RegisterClientScriptResource(typeof(AutoCompleteTextboxServerControl), "AutoCompleteTextbox.Scripts.Custom.js");
        }

Таким образом, в исходной странице тестовой страницы Webresource.axd загружается до загрузки Jquery.

// WebResource contains the autocomplete js code ->
<script src="/WebResource.axd?d=zNH31OAcb5wrxPoggl5f_MlEhQbiGePLqOV1mx07OO6SSXqoLMXL1kQJWOtZYT8yi9_NYq5dkaLcyDlu5yOmTmJjGDY0XZ5-soxCdlMvlykrdyRRlogmLUOD8kflF3WtmwbAZvh6nWg3uAAwcpe0JQ2&amp;t=637070115488096556" type="text/javascript"></script>

<script src="/bundles/MsAjaxJs?v=D6VN0fHlwFSIWjbVzi6mZyE9Ls-4LNrSSYVGRU46XF81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

// jQuery 3.3.1 loads here ->
<script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script>

<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=N8tymL9KraMLGAMFuPycfH3pXe6uUlRXdhtYv8A_jUU1" type="text/javascript"></script>
<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
</div>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>

Можно ли изменить порядок?

Answer 1

Итак, я разобрался с проблемой порядка загрузки. Это довольно просто. Вам нужна ссылка на ScriptManager в MasterPage, а затем добавить ScriptReference.

protected override void OnInit(EventArgs e)
{
      var mgr = System.Web.UI.ScriptManager.GetCurrent(this.Page);
      mgr.Scripts.Add(new ScriptReference { Path = "Scripts/Custom.js" });
}