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

Posted by Otto Neff on Geeks with Blogs See other posts from Geeks with Blogs or by Otto Neff
Published on Wed, 23 Nov 2011 10:00:59 GMT Indexed on 2011/11/24 9:57 UTC
Read the original article Hit count: 680

Filed under:

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 >
<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

Maybe, vNext will fix this.

Developer IT

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

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

Categories cloud