Monday, November 9, 2009 1:28 PM Kazi Manzur Rashid

Web Asset Enhancements in Telerik Extensions for ASP.NET MVC

[Updated: Source code attached]

In the recent release, there has been few enhancements in the Web Asset Management. One of the new thing that we introduced which was actually requested by the community is Shared Web Asset. In this post, I will show you, how to use it in your ASP.NET MVC Application.

In the previous version, you can only define the web assets either in the ScriptRegistrar or StyleSheetRegistrar like the following:

<% Html.Telerik()
       .ScriptRegistrar()
       .Scripts(scripts =>
                scripts.AddGroup("myScripts",
                                  group => group.Add("script1.js")
                                                .Add("script2.js")
                                                .Add("script3.js")
                                                .Combined(true)
                                                .Compress(true)
                                )
               )
       .Render();%>

if you want to reuse it in another page, you have to copy the exact same thing. Also the url that it generates is bit cryptic and very long, for example for the above the following html snippet is generated:

<script type="text/javascript" src="http://weblogs.asp.net/asset.axd?id=rgAAAB-LCAAAAAAABADtvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8UfT9qNHH2WrVVlMs7aolnffbf90dpk107pYtR-NPrqkr_d2dh6O7413d3fujXfos-lHj9p6ndMvs48e3fv0_ugj-vm9X_zRitq-5hcbanXOn1UfPdoZfbSkbwTk7vinm49-yYi_2PW_2PO-2PO_uMdffP-XfP-X_D-iwlMArgAAAA%3d%3d"></script>

After evaluating quite a different scenarios, we found that we have to include the complete details of the web assets in the script/stylesheet url and this is the reason the url becomes long and cryptic. Behind the scene, we are serializing and compressing the web asset group and then writing it as a base64 encoded string in the page.

With our new Shared Web Asset, you will not only be able to share the same web assets across the different pages, you will also be able to control the generated urls. There are two ways you can define the shared web assets, through the configuration file or with the fluent syntax. First, lets see, how you can define it the in the configuration file.

For example, for the above web assets we can declare it in the web.config file like the following:

<configuration>
    <configSections>
        <sectionGroup name="telerik">
            <section name="webAssets" type="Telerik.Web.Mvc.Configuration.WebAssetConfigurationSection, Telerik.Web.Mvc"/>
        </sectionGroup>
    </configSections>
    <telerik>
        <webAssets>
            <scripts>
                <add name="myScripts" combined="true" compress="true" enabled="true">
                    <items>
                        <add source="script1.js"/>
                        <add source="script2.js"/>
                        <add source="script3.js"/>
                    </items>
                </add>
            </scripts>
        </webAssets>
    </telerik>
</configuration>

Or you can place it the global.asax like the following:

protected void Application_Start()
{
    RegisterRoutes(RouteTable.Routes);

    SharedWebAssets.Scripts(scripts =>
                            scripts.AddGroup("myScripts",
                                              group => group.Add("Script1.js")
                                                            .Add("Script2.js")
                                                            .Add("Script3.js")
                                                            .Combined(true)
                                                            .Compress(true)
                                            )
                           );
}

Now, use the AddSharedGroup of the ScriptRegistrar like the following:

<% Html.Telerik()
       .ScriptRegistrar()
       .Scripts(scripts => scripts.AddSharedGroup("myScripts"))
       .Render(); %>

And it would render the following:

<script type="text/javascript" src="http://weblogs.asp.net/asset.axd?id=myScripts"></script>

You can also mix the configuration file and fluent syntax, in that case, the configuration file assets will be registered first and then the fluent syntax.

Before completing this post, I would like to mention one more feature, though it was available from the CTP release. If you have downloaded the release zip file, in the Example Project, you have seen, we have placed the css and js files under the “2009.3.1103.0” folder in there corresponding assets folders. The “2009.3.1103.0” is actually the version number of our component. When locating any asset the version number folder is first scanned for the requested asset name, if it does not exist, it search its parent folder which is Content for css and Scripts for the js files. The next rule is whether the application is running in debug or release mode (compilation debug="true" in web.config file), when the application is running in debug mode, and lets say the assets is script1.js, then it will be searched in the following order:

1. script1.debug.js
2. script1.js
3. script1.min.js

and in the release mode:

1. script1.min.js
2. script1.js
3. script1.min.js

And this is the reason our examples, we did not mention the actual file name, instead we depend on the framework to resolve it based upon the runtime environment and don’t worry about the performance, in the release mode the resolve logic gets only executed when the asset is accessed for the first time and then we cache the resolve path for the consequent request.

That’s it for today.

Download: SharedWebAsset.zip

Shout it
Filed under: , , , , ,

Comments

# re: Web Asset Enhancements in Telerik Extensions for ASP.NET MVC

Monday, November 9, 2009 4:51 AM by redsquare

Is there any trick to get this working? I have defined the scripts in the web config but it does not render the asset.axd script tag.

# re: Web Asset Enhancements in Telerik Extensions for ASP.NET MVC

Monday, November 9, 2009 6:23 AM by Kazi Manzur Rashid

@redsquare: Could you please check the attached source code.

# re: Web Asset Enhancements in Telerik Extensions for ASP.NET MVC

Monday, November 9, 2009 6:29 AM by redsquare

Yeah, I figured out the above. thanks

# re: Web Asset Enhancements in Telerik Extensions for ASP.NET MVC

Monday, November 9, 2009 6:37 AM by Luiz Adilson

I have used the telerik controls just for the assets and I need to make little changes on it for me.

I have created InsertScript and InsertGroup with an extra parameter called index. This index is the position of the script in the render routine.

I needed this because my scripts have an hierarchy, like I need to load Jquery, then Google Maps and after this my own script.

This cuold be a good tweak to integrate in ScriptRegistrar.

# re: Web Asset Enhancements in Telerik Extensions for ASP.NET MVC

Monday, November 9, 2009 7:22 PM by Greg

I've used the previous incarnation of the asset management that I believe you created called "ReadZ.AssetManagement" that already handled this in the config, as well as versioning, which is incredibly important when caching scripts on the client side.  

Is the version number part of telerik's implementation?  If not is it coming soon?

# re: Web Asset Enhancements in Telerik Extensions for ASP.NET MVC

Monday, November 9, 2009 11:24 PM by Kazi Manzur Rashid

@Greg: You are absolutely right, but it has evolved a lot since then.