[Solved] Unexpected output with ScriptRegistrar in MVC Razor

[Chris Williams]

This is my first razor MVC site (all of the previous had been asp.net views), so I might be making some basic mistakes, but I'm confused by some output I'm seeing with script registration and html output.

In my _Layout.cshmtl main page, I have this script block:

@(Html.Telerik().ScriptRegistrar()
        .DefaultGroup(group => group
                    .Add("~/Scripts/modernizr-2.0.6-development-only.js")
                    .Add("~/Scripts/script.js"))
         )

In my ChangePassword.cshtmtl view page, I have this script block where I add some additional script files and set an OnDocumentReady block:

@(Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(
      @<text>
           $.validator.setDefaults({
                highlight: function (element) {
                    $(element).closest(".clearfix").addClass("error");
                },
                unhighlight: function (element) {
                    $(element).closest(".clearfix").removeClass("error");
                }
           });
       </text>)
      .DefaultGroup(group => group
                .Add("~/Scripts/jquery.validate.min.js")
                .Add("~/Scripts/jquery.validate.unobtrusive.min.js")
                .Add("~/Scripts/bootstrap-alerts.js")
         )
    )

In the final html that gets rendered, I'm seeing the OnDocumentReady section get rendered twice, and I'm seeing two separate areas with script registrations.

<script type="text/javascript" src="/Scripts/2011.3.1306/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/Scripts/2011.3.1306/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-alerts.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){

           $.validator.setDefaults({
                highlight: function (element) {
                    $(element).closest(".clearfix").addClass("error");
                },
                unhighlight: function (element) {
                    $(element).closest(".clearfix").removeClass("error");
                }
           });
       });
//]]>
</script>

            </section>
            <footer>
                <p>© CloudTools, LLC 2011</p>
            </footer>
        </div>
        )
    </body>
</html>
<script type="text/javascript" src="/Scripts/2011.3.1306/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/Scripts/2011.3.1306/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-alerts.js"></script>
<script type="text/javascript" src="/Scripts/modernizr-2.0.6-development-only.js"></script>
<script type="text/javascript" src="/Scripts/script.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){

           $.validator.setDefaults({
                highlight: function (element) {
                    $(element).closest(".clearfix").addClass("error");
                },
                unhighlight: function (element) {
                    $(element).closest(".clearfix").removeClass("error");
                }
           });
       });
//]]>
</script>

I seem to have had no similar problems when I wrote MVC asp.net view engine apps, so is there something that I've overlooked?

Using 2011.3.1306.

[Dimo]

Hello Chris,

You should have only one ScriptRegistrar inside a @( ) code block (that outputs HTML markup). All others should be included in @{ } blocks.

Greetings,
Dimo
the Telerik team

[Chris Williams]

Thanks!  I knew I was being an idiot.