[Solved] ScriptRegistrar best pratices

[Stéphan Parrot]

Hi, 
    I have searched these forums and google for an extensive guide on how to use ScriptRegistrar efficiently in an MVC project but I couldn't find anything that would show how to use it in a real-life scenario.

My main problem is that I want to get rid of the <script src="somepath" type="text/javascript"></script> tags that are all over in my master page and just register the proper js files where they need to be loaded (I.E: in user controls, pages, etc...)

I already read those examples where it shows simple (way too simple) scenarios just to show the basic usage of it.

Thanks in advance!

Stéphan

[Atanas Korchev]

Hi Stéphan Parrot,

The trick is that you can have as many ScriptRegistrar declarations as you want. However only one can be output in the page. The best practice is this:

Site.master (the "master" ScriptRegistrar that gets output in the page):

<%= Html.Telerik().ScriptRegistrar() %> 

Index.aspx (define some assets here but do not render the ScriptRegistrar)

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("file1.js")); %>

Partial.ascx (define additional assets here)
<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("file2.js")); %>

I hope this helps,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Stéphan Parrot]

Thanks Atanas for the quick response, it cleared up what I wasn't understanding!

[Stéphan Parrot]

Hmmmm I have another question:

I just did this in my MenuControl user control:

 

 

 

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("~/Scripts/jquery.validate.min.js"));%>

And for a reason, my treeview isn,t working anymore... I mean, I can't select any nodes in it whatsoever!
What am I doing wrong?

[Stéphan Parrot]

Nevermind, I had the jquery.validate.js version 1.5 that shipped with 2010 Q1 update and updated it to 1.7 and now works #1.
Thanks!

[Shane Milton]

(thread hijack here - sorry!)

Am I reading this correctly in that using ScriptRegistrar, I can have my Partial Views register javascript files and whatnot? And am I correct to assume that ScriptRegistrar will not register the same script twice in case my partial view exists multiple times on there? What about custom/inline javascript?

If this handles all of the above, then this is very good indeed! :-)

[Atanas Korchev]

Hello Shane Milton,

Yes to all questions with one exception - script files and statements WILL NOT be registered if the partial view is loaded via ajax.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Shane Milton]

Excellent! You know, Atanas, you really need some help with the MVC stuff. It's great so far and it's going in a wonderful direction! We just need much more of it! Keep up the good work! :-)

[Stéphan Parrot]

Indeed, the products are very nicely done and the support is also excellent! No regrets in buying the licence in our case!
Atanas, for the view loaded via Ajax, is there a workaround to have the javascript available?
I have one problem related to this issue:

I have a .aspx page that renders a partial view which is containing a list of partial views added via a button as follow:

Page
    Primary Partial View
    - Add Button Click Adds: (When thisis clicked, it loads a new secondary partial view AFTER all the existing ones and is supposed to set the focus on a textbox in the lastly added)
        Secondary Partial View 1
        Secondary Partial View 2
        Secondary Partial View 3
        Secondary Partial View 4

My proble is that I cannot set the focus on the last Secondary partial view textbox because the $ (jquery) doesn't exist in the partial view's scope...
It's hard to explain but I guess you get the picture?

Thanks!

[Atanas Korchev]

Hello Stéphan Parrot,

I am not sure I understand your scenario completely. Is jquery already loaded when you load your partial view with Ajax? If yes - then $ should be already available. If not - you can try manually registering jquery in the head tag of your page and disable the automatic including:

<%= Html.Telerik().ScriptRegistrar().jQuery(false) %>

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Stéphan Parrot]

Hi Atanas,
I've already tried that without any success.
Basically, I have a page and on this page, I have a collection of partial view rendered inside another partial view.
The $ sign representing jquery isn't available in the partial views in a <script> tag. I get an error about $ being undefined.
the work around is to have all my javascript in a js file which I include in the main .aspx page but, when the partial views are reloaded via ajax, because I have a button on the first partial view that adds nested partial views indie, the javascript isn't firing because it's not there anymore.
I'm trying a different approach right now so, don't give too much attention to this if you don't have any pointers as my design was a bit too much for what I had in mind anyways! ;)
If you have a suggestion right off the bat though, it might help someone else!

Thanks again!

Stéphan

[Atanas Korchev]

Hello Stéphan Parrot,

Unfortunately I can't help without first seeing the problem in action. Perhaps you could assemble a sample project and send it over?

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Stéphan Parrot]

Hi Atanas,
     From another post I did, you answered me with a link to a solution for Partial views loaded with Ajax which helped me solve the posted issue. This solution also fixed the issue in this thread so, I thank you very much again for the help! ;)

If someone else has the same problem reads this, here are the links to my other post and the link to the solution.
Hope this helps!

My other post:
http://www.telerik.com/community/forums/aspnet-mvc/datepicker/datepicker-inside-partial-view-loaded-from-ajax-actionlink.aspx

Solution link:
http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html

[Sydney]

I'm not sure I understand how this would work:

In my master/layout, I want to load several scripts upon whch other script depend (including jquery).  If I load scripts in my pages or partials, I want them loaded AFTER the scripts in the layout/master.  Same goes for the css.  But I seem to get the opposite behavior.

Master/Layout:

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
                            .Add("MicrosoftAjax.debug.js")
                            .Add("MicrosoftMvcAjax.debug.j")
                            .Add("MicrosoftMvcValidation.js")
                            .Add("jquery-ui-1.8.2.custom.min.js")
                            .Combined(true)
                            .Compress(true))
                            )


Web Page or Partial

    @Html.Script("~/Scripts/ItemPane/shared.js") 
<script>
--some page-specific script
</script>

How/where would I use the Registrar in the web page/partial in such a way that the scripts in the master page are loaded first?

[Aleksey Karlin]

I have the same issue. How is it supposed to register base scripts (like jQuery) in the layout page and based on them scripts (like jQuery.validation) in a view?

_Layout.chtml:
@(Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false)
        .DefaultGroup(group =>
            group.Add("jquery-1.6.3.min.js")
                 .Add("jquery-ui-1.8.16.min.js")
                 .Add("modernizr-1.7.min.js")
                 .Add("jquery.query-2.1.7.js")))

Index.chtml:
@{
    Html.Telerik().ScriptRegistrar().DefaultGroup(group =>
                                                  group.Add("jquery.validate.min.js")
                                                      .Add("jquery.validate.unobtrusive.js"));
}

I got validation library loaded first, and only then jQuery one. In this case scripts don't work properly of course.

[Matt Meisinger]

Try putting your page-specific scripts into a new group, like so:  

@{
    Html.Telerik().ScriptRegistrar().Scripts(a => 
        a.AddGroup("PageSpecific", newGroup => newGroup.Add("~/Scripts/myscripts.js"))
    );
}

I think that groups added in this way default to being loaded AFTER the DefaultGroup.

[Ed]

A little off topic, but you don't have to use the ScriptRegistrar, you can also use the very nicely done CombresMvc package to combine, minify, support css variables, etc. It provides a lot of options.