自定义控件的jquery在母版页加载jQuery之前加载

Question

我正在创建一个使用jQuery.UI自动完成功能的自定义控件。我的应用程序有一个标准的Webform母版页，其中包含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代码以加载after，而MasterPage中的ScriptManager却没有运气。

 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

所以我找出了装载顺序问题。这很容易。您需要在MasterPage中引用ScriptManager，然后添加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" });
}