Mittwoch, 23. November 2011

JavaScript Intellisense with Telerik in ASP.NET Master Page Project with VS 2010

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

Today I was looking for a solution to get finally the JScript/Javascript/jQuery Intellisense feature working with my ASP.Net Webform Project to work. I found some good articles:

- JScript IntelliSense Overview

- JScript IntelliSense: A Reference for the “Reference” Tag

- Enabling JavaScript intellisense in VS.NET 2010 to work with SharePoint 2010

- Rich IntelliSense for jQuery

BUT, all of suggested solutions did not work right with my Master Page based Visual Studio 2010 Solution.
Only with physical Javascript Files (Telerik includes certain Javascript Files like jQuery as Ressource) or/and configure always a new ASP.NET Scriptmanager / RadScriptManager
on every page derived from the Master Page, wasn't exactly what I was looking for.

So I came up with the following simple Solution, to Trick VS2010 and still have the Project running with multiple runat="server" Scriptmanagers.

In short:
- New ASP.NET control derived from ScriptManager with emtpy overwritten OnInit() to use it as emtpy wrapper for VS2010.

In detail:

New RadScriptManager Class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Web.UI;

namespace IntellisenseJavascript.Controls
{
    public class IntelliJS : RadScriptManager
    {
        protected override void OnInit(EventArgs e)
        {
        }
        protected override void OnPreRender(EventArgs e)
        {            
        }
        protected override void OnLoad(EventArgs e)
        {            
        }
        protected override void Render(System.Web.UI.HtmlTextWriter writer)
        {            
        }
        public override void RenderControl(System.Web.UI.HtmlTextWriter writer)
        {            
        }
    }
}
 
web.config
<configuration>
  ...
  <system.web>
    ...
    <pages>
      <controls>
        <add tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>
        <add tagPrefix="VSFix" namespace="IntellisenseJavascript.Controls" assembly="IntellisenseJavascript"/>
      </controls>
    </pages>
    ...
 
Master Page
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="IntellisenseJavascript.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head" runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="radStyleSheetManager" runat="server" />
</head>
<body>
    <form id="form" runat="server">
    <telerik:RadScriptManager ID="radScriptManager" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
                Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
                Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
                Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="radAjaxManager" runat="server">
    </telerik:RadAjaxManager>
    <div>
        #MASTER CONTENT#
        <asp:ContentPlaceHolder ID="contentPlaceHolder" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {
            // Masterpage ready
            $('body').css('margin', '50px');
        });
    </script>
</body>
</html>
 
ASPX Page
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="IntellisenseJavascript.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="contentPlaceHolder" runat="server">
    <VSFix:IntelliJS runat="server" ID="intelliJS">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
                Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
                Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
                Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </VSFix:IntelliJS>
    <div style="border: 5px solid #FF9900;">
        #PAGE CONTENT#
    </div>
    <script type="text/javascript">
        $(function () {

            // Page ready
            $('body').css('border', '5px solid #888');

        });    
    </script>
</asp:Content> 
 
The Result
I know, this is not the way it meant to be... but now at least you can have a Main ScriptManager for all Common Scripts and Settings, inject page specific Javascripts in PageLoad Event in normal ASPX Files and have JavaScript Intellisense for defined Scripts from JS Files or Assembly Ressouce in your Content Placeholder. Maybe, vNext will fix this.



1 Kommentar:

  1. I can confirm that this works properly with 2012 Q2 RadControls for ASP.Net Ajax and Visual Studio 2010.

    AntwortenLöschen