May 17, 2008

How To Embed Resource And Use It With WebResource Handler

Before you go deeper into this please look into my previous post Why WebResources for good reasons for using WebResources.

Three simple steps for this
.
Embed a resource in the assembly : Select your resource (javascript or image or any other) and goto properties and select "Embedded Resource" as Build Action.



Mention in your AssemblyInfo.cs file :
Mention above this resource in the AssemblyInfo file with the following syntax.
[assembly: WebResource("TestWeb.JavaScripts.common.js", "text/javascript",PerformSubstitution=true)]
Here the first parameter is the path as fully qualified name from the root namespace, like TestWeb is the root namespace and JavaScripts is the directory and then common.js is the filename. Second parameter is the MIME type for the resource being called. Third parameter tells .net that this resource contains some expression that need to be parsed and replaced with real values. We will discuss this third parameter at the end of the topic.

Call the GetWebResourceUrl() : To get the URL that can be used to call the embedded resource. The Url will be in the format
/PathFromRoot/WebResource.axd?d=P6z37LRwQoHAo_Le8MfO3Q2&t=63338169731478
Where d specify the assembly key and t specify the last time the assembly is written (compiled).

syntax of GetWebResourceUrl method is
GetWebResourceUrl(Type type, string resourceName);

I have used the following syntax to register the WebResource given javascript :
string scriptUrl = ClientScript.GetWebResourceUrl(typeof(_Default), "TestWeb.JavaScripts.common.js");
ClientScript.RegisterClientScriptInclude("Common", scriptUrl);

So we are done with how to use WebResource handler.

Now let's examine the third parameter of the WebResource attribute we have used above.
Imagine that we want to use another resource (an image) within the JavaScript file we are calling using the WebResource handler. Suppose the javascript is setting "src" of an image and that image is again a WebResource. So we will write something like following in our javascript file

document.getElementById('logo') = <%= WebResource('logo.gif')%>;


Now if you have mentioned PerformSubstitution=true for the javascript resource then all expressions like above one in your javascript will be replaced by the WebResource handler given url when your javascript will be served like

document.getElementById('logo') = "/PathFromRoot/WebResource.axd?d=P6z37LRwQoHAo_Le8MfO3Q2&t=63338169731478"

Submit this story to DotNetKicks

5 comments:

Anonymous said...

Hello

I´ve defined a embedded javascript resource that defines client properties and methods for a textbox component.

On aspx i insert the user control.

How can I access the component in Javascript?

using something like

var oCtr = new BetterSoft.BetterText("TextBox1")

But it doesn't get the object on the page, it generate a new instance.

Paresh Jagatiya said...

Hi,
2 ways..

1 > On the client side event of the textbox, where you are calling the function (in your embedded js) you can pass the textbox as "this"
like
function CheckKeyPress(objText)
{
.... your javascript code...
}
now in your textbox control you can call this function as

this.Attributes.Add("onclick","CheckKeyPress(this)");
so the CheckKeyPress call from the textbox will take the textbox instance with it.

2 > make a property (variable) in your embedded js to hold the textbox instance name.
like
var textBoxToCheck;
and use this variable every where in your javascript. Now the question is to assign the textbox instance to this variable. You can do this by rendering an additional javascript from your control's Render event like
string js="< script type='text\javascript' >";
js += "var textBoxToCheck = document.getElementById('"+this.ClientID+"');";
js += "< /script >";
in short initiate the textBoxToCheck variable just after the textbox is rendered.
But this will work perfect in case of a single textbox (your custom textbox) on a page because if there are multiple textboxes then the latest textbox will assigned to the textBoxToCheck variable.

BIjavar said...

Hi
I have done all you said and every thing is ok but C# code did not compiled in js file(i had passed parameter PerformSubstitution = true)

Anonymous said...

Hi.
Thank for your code.
I've learn how to embed javascript file into an ASP.Net Server Control.
When I register it and use it in my aspx control, it's ok, the script render correct.
But whent I register it and use it in my ascx control, the script doesn't render out.
Do you know why ?
(sorry, i am not good at English)

Paresh Jagatiya said...

can u post the code snippet how u register?