Code razor within Javascript code

Question

The code below does not work.

I've tried all forms

@: @() @{} <text> </text>

The apparent problem is the { and } at the beginning and end. (Required, as are parameters)

<script type="text/javascript">

    function initializeFileUploader()
    {
        SetUploader('/Projects/ImageUpload', 'Images', true, ['jpg', 'jpeg', 'png', 'gif', 'zip'], { ProjectID: @Model.ID } );
        SetUploader('/Projects/ImageUpload', 'Logo', false, ['jpg', 'jpeg', 'png', 'gif'], { Logo: true, ProjectID: "@(Model.ID)" } );
    }
    window.onload = initializeFileUploader;

</script>

How to use, @Model.ID in my JavaScript?

[Edit] Adding info

With this code:

<script type="text/javascript">

    function initializeFileUploader()
    {
        SetUploader('/Projects/ImageUpload', 'Images', true, ['jpg', 'jpeg', 'png', 'gif', 'zip'], { ProjectID: @HttpUtility.JavaScriptStringEncode(Model.ID.ToString(), true) });
        SetUploader('/Projects/ImageUpload', 'Logo', false, ['jpg', 'jpeg', 'png', 'gif'], { Logo: true, ProjectID: @HttpUtility.JavaScriptStringEncode(Model.ID.ToString(), true) } );
    }

    window.onload = initializeFileUploader();

</script>

The razor generate this code:

<script type="text/javascript">

        function initializeFileUploader()
        {
            SetUploader('/Projects/ImageUpload', 'Images', true, ['jpg', 'jpeg', 'png', 'gif', 'zip'], { ProjectID: &quot;860c13af-9aa9-4667-8ee8-c5629515c71b&quot; 

</body>
</html>

[Add] Another example of code

$('#Logo').bindAjaxUploader({
    action: '/Project/ImageUpload',
    allowedExtensions:  ['jpg', 'jpeg', 'png', 'gif'],
    params: { Logo: true, ProjectID: @HttpUtility.JavaScriptStringEncode(Model.ID.ToString(), true) }
});

If you set the value manually, everything works perfectly!

$('#Logo').bindAjaxUploader({
    action: '/Project/ImageUpload',
    allowedExtensions:  ['jpg', 'jpeg', 'png', 'gif'],
    params: { Logo: true, ProjectID: "559b0505-09f2-4385-aee0-530d79c82803" }
});

[Edit] Resolution

To correct the problem, I had to do this: (not an elegant way)

@{
    @:function initializeFileUploader()
    @:{
            @:SetUploader('/Projects/ImageUpload', 'Images', true, ['jpg', 'jpeg', 'png', 'gif', 'zip'], { ProjectID: "@(HttpUtility.JavaScriptStringEncode(Model.ID.ToString()))" });
            @:SetUploader('/Projects/ImageUpload', 'Logo', false, ['jpg', 'jpeg', 'png', 'gif'], { Logo: true, ProjectID: "@(HttpUtility.JavaScriptStringEncode(Model.ID.ToString()))" });
        @:}

    @:window.onload = initializeFileUploader;
}

Define "does not work". What is it supposed to do? What does it do? What error messages do you get (if any)? — RobG
– RobG, Commented Nov 14, 2011 at 2:34
That should work fine. What do you see in the rendered source? Is Model.ID a string? — SLaks
– SLaks, Commented Nov 14, 2011 at 2:34
Model.ID and the object ID. When generate the HTML should look something like: SetUploader('/Projects/ImageUpload', 'Images', true, ['jpg', 'jpeg', 'png', 'gif', 'zip'], { ProjectID: "123456"} ); Note the value of ProjectID, it is dynamic. Should get the Model.ID. For me not works! The HTML generated is wrong, see the Javascript code that generates this code. It does not generate the complete HTML, just to 'ProjectID: 123456' And there!. The rest of the JavaScript is not generated. — ridermansb
– ridermansb, Commented Nov 14, 2011 at 4:06
You have a sytnax issue in the surrounding code. Please show a complete file that demonstrates this problem. — SLaks
– SLaks, Commented Nov 16, 2011 at 23:53
Put all the details (including the complete code) this link: gist.github.com/1371965 — ridermansb
– ridermansb, Commented Nov 17, 2011 at 0:15

AlanFoster · Accepted Answer · 2011-11-14 02:35:12Z

1

window.onload = initializeFileUploader();

This is executing initializeFileUploader() straight away, BEFORE window.onload is actually called, it should be

window.onload = initializeFileUploader;

answered Nov 14, 2011 at 2:35

AlanFoster

8,3245 gold badges38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ridermansb Over a year ago

See my changes in the question please.

shizik · Accepted Answer · 2011-11-20 21:02:40Z

1

Try putting @Model.ID in single quotes '@Model.ID'. This always works for me.

Here is the code:

function initializeFileUploader()
{
    SetUploader('/Projects/ImageUpload', 'Images', true, ['jpg', 'jpeg', 'png', 'gif', 'zip'], { ProjectID: '@Model.ID' });
    SetUploader('/Projects/ImageUpload', 'Logo', false, ['jpg', 'jpeg', 'png', 'gif'], { Logo: true, ProjectID: '@Model.ID' });
}

window.onload = initializeFileUploader;

edited Nov 20, 2011 at 21:02

answered Nov 14, 2011 at 16:18

shizik

9106 silver badges17 bronze badges

5 Comments

ridermansb Over a year ago

I do not know why, but it does not work for me! This was what the 'razor' generated: i.imgur.com/CYx9W.png This is the end of the HTML code: <script type="text/javascript">

function initializeFileUploader()     {          SetUploader('/Projects/ImageUpload', 'Images', true, ['jpg', 'jpeg', 'png', 'gif', 'zip'], { ProjectID: 'ad9bc1d0-ab0b-45a9-8fe8-f7fb79146abb', true)   </body> </html>

shizik Over a year ago

I see that the ID is interpreted as it should. Have you tried hardcoding a value to see if it will render successfully? It would also be helpful if you can provide us with the whole markup of the view.

ridermansb Over a year ago

Hello, I modified my function. I created a jQuery plugin to encapsulate everything. Was as follows:

$('#Logo').bindAjaxUploader({ 		action: '/Project/ImageUpload', 		allowedExtensions:  ['jpg', 'jpeg', 'png', 'gif'], 		params: { Logo: true, ProjectID: "559b0505-09f2-4385-aee0-530d79c82803" } 	});

As you can see I put the ID value in the parameter ProjectID

ridermansb Over a year ago

$('#Logo').bindAjaxUploader({ 	action: '/Project/ImageUpload', 	allowedExtensions:  ['jpg', 'jpeg', 'png', 'gif'], 	params: { Logo: true, ProjectID: @HttpUtility.JavaScriptStringEncode(Model.ID.ToString(), true) } });

The same function, but with the dynamic value, does not work! Razor just does not generate the HTML code from ProjectID:

shizik Over a year ago

I noticed I had an error in my code above. Please try again. I have edited my answer.

SLaks · Accepted Answer · 2011-11-14 02:35:40Z

0

Both of your code samples should work fine.

My psychic powers tell me that Model.ID is a string, so you end up writing the string value to the Javascript without quotes. Therefore, it gets parsed as a variable name rather than a value.
Instead, call @HttpUtility.JavaScriptStringEncode(Model.ID, true) to output a properly-escaped string literal.

answered Nov 14, 2011 at 2:35

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

9 Comments

SLaks Over a year ago

user551841's answer is correct; I missed that. This might be a separate problem.

ridermansb Over a year ago

See my changes in the question please.

SLaks Over a year ago

Sorry; I forgot to add that you need Html.Raw to prevent it from HTML-escaping the Javascript. You may want to wrap all that in your own extension method.

SLaks Over a year ago

It looks like you have a syntax error in your surrounding HTML that is causing Razor to think it's in code context. Look for unmatched tags and stray @s.

ridermansb Over a year ago

Would you post an example? I tried as follows:

function initializeFileUploader() { 	SetUploader('/Projects/ImageUpload', 'Images', true, ['jpg', 'jpeg', 'png', 'gif', 'zip'], { ProjectID: @Html.Raw(HttpUtility.JavaScriptStringEncode(Model.ID.ToString(), true)) }); 	SetUploader('/Projects/ImageUpload', 'Logo', false, ['jpg', 'jpeg', 'png', 'gif'], { Logo: true, ProjectID: @Html.Raw(HttpUtility.JavaScriptStringEncode(Model.ID.ToString(), true)) } ); }

|

Collectives™ on Stack Overflow

Code razor within Javascript code

[Edit] Adding info

With this code:

The razor generate this code:

[Add] Another example of code

[Edit] Resolution

3 Answers 3

1 Comment

5 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

[Edit] Adding info

With this code:

The razor generate this code:

[Add] Another example of code

[Edit] Resolution

3 Answers 3

1 Comment

5 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related