Donnerstag, 23. August 2012

*It's working now* JavaScript Intellisense with Telerik in ASP.NET Master Page Project with Visual Studio 2012

This Blog moved to http://webapps-in-action.com/

Microsoft did some great improvments on Visual Studio 2012. With some workarounds it was possible to have Javascript Autocompletion in Pages, UserControls, etc. Now the Reference Directives (http://msdn.microsoft.com/en-us/library/bb385682.aspx) are just working.

But if you are on a Telerik Project it's a bit complicated, offical from Telerik: "RadScriptManager currently does not display Intellisense information for the property and the ScriptReferences." (http://www.telerik.com/help/aspnet-ajax/scriptmanager.html)

You need again a little trick, if you want to use the RadScriptManger instead of the ASP ScriptManager on the MasterPage (there can be only one Manager either Telerik or ASP Standard).

Telerik Client-Side JavaScript Auto-completion / Intellisense in VS2012
jQuery from Assembly is also working ;-)

Go to "Options and Settings" in Visual Studio an change the Settings like this:


Next step is to create the referenced ASPX File with ScriptManager supported by Visual Studio

JSReferences.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSReferences.aspx.cs" Inherits="RadControlsWebApp.JSReferences" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </asp:ScriptManager>
    </form>
</body>
</html>
Now it's time for proper a Telerik Master Page. Site.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="RadControlsWebApp.Site" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form2" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <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 Path="~/js/jquery-ui-1.8.23.custom.min.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>
WebForm.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm.aspx.cs" Inherits="RadControlsWebApp.WebForm" %>

<%@ Register Src="~/WebUserControl.ascx" TagPrefix="uc1" TagName="WebUserControl" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <%--// A SIMPLE BUTTON --%>
    FORM BUTTON:
    <telerik:RadButton runat="server" ID="radButton"></telerik:RadButton>
    <telerik:RadTextBox runat="server" ID="radText"></telerik:RadTextBox>
    <%--// JS SCRIPT --%>
    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">

            // TELERIK DEFAULT EVENT like jQuery $ready()
            function pageLoad() {
                // GIVE BUTTON A TEXT
                $telerik.findButton("<%=radButton.ClientID%>").set_text("Click me");

                // FOR TESTING MIX SOME TELERIK WITH JQUERY
                $("#" + $telerik.findTextBox("<%=radText.ClientID%>").get_id()).click(function () { alert('jQuery ClickHandler on RadTextBox') });

                // FIRE USER CONTROL LOGIC
                pageLoadUserControl();
            }
        </script>
    </telerik:RadScriptBlock>
    <%--// USER CONTROL--%>
    <uc1:WebUserControl runat="server" ID="WebUserControl" />
</asp:Content>
WebUserControl.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl.ascx.cs" Inherits="RadControlsWebApp.WebUserControl" %>

<%--// ANOTHER SIMPLE BUTTON IN USER CONTROL --%>
<br />
USER CONTROL BUTTON:
<telerik:RadButton runat="server" ID="radButton"></telerik:RadButton>
<%--// MORE JS SCRIPT --%>
<telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
    <script type="text/javascript">
        function pageLoadUserControl() {
            $telerik.findButton("<%=radButton.ClientID%>").set_text("Click me");
            $.ajax(
        }
    </script>
</telerik:RadScriptBlock>
Nice... everything works as expected!

Keine Kommentare:

Kommentar veröffentlichen