[Visual Studio 2015] Telerik Client API and jQuery IntelliSense

2015-11-11

1169
0
Telerik UI for Asp.NET Ajax
2015-12-28

開始之前，先說明這並非 VS2015 專有功能，不同的版本 VS IDE 有不同的步驟

問題情境：

使用 Telerik UI for ASP.NET AJAX 開發網站時，沒有 JavaScript IntelliSense
Telerik UI for ASP.NET AJAX 已經包含了 jQuery，不想要在專案裡再次參考 jQuery 解決方法
Update-$telerik.$ 無法使用 IntelliSense

開始之前，先說明這並非 VS2015 專有功能，不同的版本 VS IDE 有不同的步驟

問題情境：

使用 Telerik UI for ASP.NET AJAX 開發網站時，沒有 JavaScript IntelliSense
Telerik UI for ASP.NET AJAX 已經包含了 jQuery，不想要在專案裡再次參考 jQuery 解決方法
Update-$telerik.$ 無法使用 IntelliSense

開發環境：

Windows 10 企業版 x64
Visual Studio Enterprise 2015

本文連結：

在 Master Page 或 Content Page 加入ScriptReference：
專案裡加入_references.aspx，並讓 VS IDE 參考：
- 加入 jQuery CDN：
- Update-Remove jQueryInclude.js：
Update-$telerik.$ 的IntelliSense：
參考文件：

在 Master Page 或 Content Page 加入ScriptReference：

一直以來我都是在 Master Page (*.aspx) 使用 ScriptManager
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
    </Scripts>
</asp:ScriptManager>
這樣就可以在 Content Page (*.aspx) 使用 $telerik api 的 IntelliSense，不過，上述方法沒有辦法套用在 *.js 外部檔案

注意：若使用 RadScriptManager 將無法使用 IntelliSense

專案裡加入_references.aspx，並讓 VS IDE 參考：

這時候我們可以在 VS IDE 參考 *.aspx ，比如：_references.aspx，新增 _references.aspx，然後把上述的 ScriptManager 區段加進去

再來，把這個檔案加到 JavaScript IntelliSense References，我這裡用相對路徑~/Scripts/_references.aspx，讓 VS IDE 會去抓目前專案裡的目錄

完成後，建置一下專案，沒意外的話，*.aspx 和外部 *.js 檔案就會有 $telerik 的 IntelliSense，若還是沒有 IntelliSense，重啟一下 VS IDE 試看看

加入 jQuery CDN：

解決了 $telerik，接下來是 jQuery 的 IntelliSense

Telerik UI for ASP.NET AJAX 裡面本來就嵌入 jQuery，我想要用 jQuery 的 IntelliSense，不同的版本對應到的 jQuery 都不一樣，我現在用 2015 Q3，不在表列裡面，所以很有可能跟 2014 Q3 相同

http://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery#telerik-ui-controls-using-jquery

我不打算再專案裡面加入 jQuery.js ，我只想單純的使用 jQuery IntelliSense，在 _references.aspx 裡面，加入 CDN 位置<asp:ScriptReference Path=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js />

完成後，建置一下專案，沒意外的話，*.aspx 和外部 *.js 檔案就會有 $telerik 的 IntelliSense，若還是沒有 IntelliSense，重啟一下 VS IDE 試看看

Update-Remove jQueryInclude.js：

後來發現把 jQueryInclude.js 拿掉就可以不需要jQuery CDN

jQueryInclude.js will replace jQuery (the global $ variable) with the version embedded in Telerik RadControls! 出自：http://www.telerik.com/blogs/asp-net-ajax-controls-and-jquery-intellisense---update
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <%--<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />--%>
    </Scripts>
</asp:ScriptManager>

Update-$telerik.$ 的IntelliSense：

加入 jQueryExternal.js 就可以用 $telerik.$ 的 IntelliSense
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <%--<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />--%>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryExternal.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryPlugins.js" />
        <%--<asp:ScriptReference Path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js" />--%>
    </Scripts>
</asp:ScriptManager>
執行結果如下：