Kazi Manzur Rashid's Blog

[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