Use MVC razor function inside <script type="text/template"></script>

Question

I am trying to solve this issue from last 6 hours, but couldn't complete it.

here I have one template script in my Razor view.

<script type="text/template" id="Blog_Post_Template">   

    {{if DescType == "FULL"}}
            ${FDesc}
    {{/if}}

    {{if DescType == "SORT"}}
            ${SDesc}
    {{/if}}

</script>

Now, what I want is to use Razor function inside this template.

Let's take @Html.Raw(), I want to use @Html.Raw() in ${FDesc}, and ${SDesc}.

I tried many escape sequences like,

@Html.Raw("'${FDesc}'")
@Html.Raw("\'${FDesc}\'")

And mane more solutions, but I came up at the point where I started.

Input is like, A simple text with html parameters

<p> Test this </p>

Output will be a html

Appreciate, if anyone can resolve it..

What are you trying to achieve ? If you want to execute C# code, put it in code block/ or use @ prefix. — Shyju
– Shyju, Commented Jul 27, 2017 at 14:26
text/template provides less support, I want to use @html.raw() function inside script..but it does not allow me.. — Bharat
– Bharat, Commented Jul 27, 2017 at 14:28
What have you tried ? What error /output are you getting ? What is your expected output ? — Shyju
– Shyju, Commented Jul 27, 2017 at 14:29
and what is DescType ? Is it a C# variable ? js variable ? — Shyju
– Shyju, Commented Jul 27, 2017 at 14:31

Chris Pratt · Accepted Answer · 2017-07-27 14:54:54Z

1

It doesn't seem that you understand the effect of the client-server nature of HTTP here. Razor codes runs server-side, while your JavaScript/template code will run client-side, after the server has already done its work and returned a response. As a result, something like @Html.Raw("'${FDesc}'") will literally output '${FDesc}', not the raw HTML that ${FDesc} will eventually evaluate to. If you need to ensure that that template variable is printed without being HTML-escaped, then you need to rely on functionality in your JavaScript templating library for that, not Razor.

answered Jul 27, 2017 at 14:54

Chris Pratt

240k37 gold badges414 silver badges468 bronze badges

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

Comments

Bharat · Accepted Answer · 2017-07-31 09:30:00Z

1

Finally, After 3 days of R&D, I found solution.

BTW, we can't use razor is template as @chris said, but there is alternative And it's very very simpler.

Answer is Html tag inside template, see below example.

{{html Value}}

and my full code now looks like,

<script type="text/template" id="Blog_Post_Template">   

    {{if DescType == "FULL"}}
          {{html FDesc}} // which will now give me pure html
    {{/if}}

    {{if DescType == "SORT"}}
          {{html SDesc}}
    {{/if}}

</script>

answered Jul 31, 2017 at 9:30

Bharat

6,1054 gold badges44 silver badges66 bronze badges

Comments

Tassadaque · Accepted Answer · 2019-09-08 21:49:52Z

1

Wrap your template in some html element such as div

<script type="text/template" id="Blog_Post_Template">   
<div>
    {{if DescType == "FULL"}}
            ${FDesc}
    {{/if}}

    {{if DescType == "SORT"}}
            ${SDesc}
    {{/if}}
</div>
</script>

answered Sep 8, 2019 at 21:49

Tassadaque

8,19715 gold badges59 silver badges92 bronze badges

Comments

Tom John · Accepted Answer · 2017-07-27 14:46:44Z

0

Not entirely sure what's server and client side but it maybe I'm not familiar with the templating you are using, but server side evaluation of a variable and then rendering client side with no elements avaiable can be achieved using the <text></text> elements:

<script type="text/template" id="Blog_Post_Template">   
    @if(DescType == "FULL")
    {
        <text>${FDesc}</text>
    }
    ...
</script>

Maybe this will help?

answered Jul 27, 2017 at 14:46

Tom John

7945 silver badges15 bronze badges

Collectives™ on Stack Overflow

Use MVC razor function inside <script type="text/template"></script>

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related