JavaScript Intellisense with Telerik in ASP.NET Master Page Project with VS 2010
- by Otto Neff
Today I was looking for a solution to get finally the JScript/Javascript/jQuery Intellisense Featureworking 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 jQueryBUT, 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/andconfigure 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 VS2010and 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 Classusing 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.
