ScriptRegistrar creates two jQuery blocks in Razor view

[King Wilder]

I have a weird issue.  Here's my application specs:

• ASP.NET MVC 3
• Razor views
• Telerik Extensions for Mvc version 2011.1.315.340

The issue renders double script blocks on partial Razor view.

Here's the ScriptRegistrar in my layout master:

    @(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)
    .Add("jquery.validate.js")
    .Add("jquery.validate.unobtrusive.js")
    .Add("pngfix.js")
    .Add("menu_ie.js")))
</body>
</html>

Here's the ScriptRegistrar with OnDocumentReady in my partial Razor view:

@(Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(
    @<text>
        var passwordField = $("#PasswordText");

        $("#generate-password").click(function () {

            $.ajax({
                url: '@Url.Action("GeneratePassword", "Password")',
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    if (data.Success) {
                        passwordField.val(data.Message);
                    }
                }
            });
        });
    </text>
    ))

Here's the produced HTML source output:

<script type="text/javascript" src="/Scripts/2011.1.315/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){

                    var passwordField = $("#PasswordText");

        $("#generate-password").click(function () {

            $.ajax({
                url: '/Password/GeneratePassword',
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    if (data.Success) {
                        passwordField.val(data.Message);
                    }
                }
            });
        });

});
//]]>
</script>


        </div>

        <div class="gap10">
        </div>
    </div>

    <!--/WRAPPER-->

    <script type="text/javascript" src="/asset.axd?id=9AAAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Uevp3WxapuPRh-d82dL-uynf9E6r6-3d8f3x7vjn8Z31UePdn7JyP92fJmVxSxrc9tgd6jBellN2nrdFJeu8Z5pvFpenBfv7Of3zOeLfLn-_Qv3wv4v-f4v-f7oo2lL37X5u_buT2eXWcPIU4NL-nRvZ3eX8L23e58-mNII7316n3756BH1nf-S_ycAAP__oCxA8PQAAAA%3d"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){

                    var passwordField = $("#PasswordText");

        $("#generate-password").click(function () {

            $.ajax({
                url: '/Password/GeneratePassword',
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    if (data.Success) {
                        passwordField.val(data.Message);
                    }
                }
            });
        });

});
//]]>
</script>
</body>
</html>

Any ideas why this is rendering twice?  It also seems to be affecting my results.

Any help is appreciated.

[Atanas Korchev]

Hello King Wilder,

 It is rendering twice because you are rendering it twice. The @(Html.Telerik().ScriptRegistrar()) syntax means "output a script registrar". You need to use @{ } in order to just declare a ScriptRegistrar in your partial view.

Kind regards,
Atanas Korchev
the Telerik team

[King Wilder]

Atanas,

That did the trick!  I guess I need to read up a bit more on the razor syntax.  :^)

Now I just have to figure out why I'm getting an "invalid label" from my ajax call.  It's always something.

Thanks.

[King Wilder]

I know this is not related to this thread but it might help others, as I found the solution to the "invalid label" json error.

http://stackoverflow.com/questions/4886525/jquery-1-5-ajax-call-fails-with-invalid-label-for-json-requests

It seems there might be a bug in jQuery 1.5.x for ajax calls that injects jsonp into json calls.

This was my solution:

Before solution:

@{Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(
    @<text>
        var passwordField = $("#PasswordText");

        $("#generate-password").click(function () {

            $.ajax({
                url: '@Url.Action("GeneratePassword", "Password")',
                dataType: 'json',
                type: 'GET',
                success: OnGeneratePasswordSuccess,
                error: OnGeneratePasswordError
            });
        });

        function OnGeneratePasswordSuccess(data){
            if (data.Success) {
                passwordField.val(data.Message);
            }
        }

        function OnGeneratePasswordError(xhr, status, error){
            alert("There was an error generating the password. - Status: " + status + " - Error: " + error);
        }
    </text>
    );}

After solution:

@{Html.Telerik().ScriptRegistrar()
    .OnDocumentReady(
    @<text>
        var passwordField = $("#PasswordText");

        $("#generate-password").click(function () {

            $.ajax({
                url: '@Url.Action("GeneratePassword", "Password")',
                dataType: 'json',
                type: 'GET',
                jsonp: null,              <-- Added this line
                jsonpCallback: null,      <-- and this line
                success: OnGeneratePasswordSuccess,
                error: OnGeneratePasswordError
            });
        });

        function OnGeneratePasswordSuccess(data){
            if (data.Success) {
                passwordField.val(data.Message);
            }
        }

        function OnGeneratePasswordError(xhr, status, error){
            alert("There was an error generating the password. - Status: " + status + " - Error: " + error);
        }
    </text>
    );}

I hope this helps others with this problem.

[Dan]

Can you post an example about what you mean about using @{}.  I am having the same problem and don't understand.