Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make MVC 4 Razor Html.Raw work for assignment in HTML within script tags

For a project I'm using jqote for templating in JavaScript and HTML generated by MVC 4 with Razor.

Please have a look at the following code in HTML and Razor:

<script id="testTemplate" type="text/html">
    <p>Some html</p>
    @{string id = "<%=this.Id%>";}

    <!-- 1 -->
    @if(true) 
    {   
        @Html.Raw(@"<select id="""+id+@"""></select>")
    }
    <!-- 2 -->
    @if(true)
    {
        <select id="@Html.Raw(id)"></select>
    }
    <!-- 3 -->
    @Html.Raw(@"<select id="""+id+@"""></select>")
    <!-- 4 -->
    <select id="@Html.Raw(id)"></select>
    <!-- 5 -->
    <select id="<%=this.Id%>"></select>
</script>

The output is this:

<script id="testTemplate" type="text/html">
    <!-- 1 -->
    <select id="<%=this.Id%>"></select> <!--Good!-->
    <!-- 2 -->
    <select id="&lt;%=this.Id%&gt;"></select> <!--BAD!-->
    <!-- 3 -->
    <select id="<%=this.Id%>"></select> <!--Good!-->
    <!-- 4 -->
    <select id="<%=this.Id%>"></select> <!--Good!-->
    <!-- 5 -->
    <select id="<%=this.Id%>"></select> <!--Good!-->
</script>

Now, the problem is with the second select under <!-- 2 -->. One would expect the Html.Raw to kick in here but somehow it doesn't. Or Razor wants to HtmlEncode what's in there.

The question is: Does anyone have an idea why? Is this a bug or by design?

Without the script tags it works. But we need the script tags cause we need to template in JavaScript.

Hardcoded it works, but we need to use a variable because this will not always be a template.

Without the @if it works, but it's there, we need it.

Workarounds

These lines give similar good outputs:

@if(true)
{
    <select id= "@Html.Raw(id)"></select>
}
@if(true)
{
    <select id ="@Html.Raw(id)"></select>
}
@if(true)
{
    <select id @Html.Raw("=")"@Html.Raw(id)"></select>
}

We're planning to do this:

<script id="testTemplate" type="text/html">
    @{string id = @"id=""<%=this.Id%>""";}
    @if(true)
    {   
        <select @Html.Raw(id)></select>
    }
</script>

...to keep as to markup intact as much as possible.

like image 859
Yarune Avatar asked Nov 03 '22 10:11

Yarune


1 Answers

EDIT After reading the code provided properly:

This looks like a bug. It is somehow connected to the id-attribute. Change the attribute to something else and it works.

@if(true) 
{   
    <select data-id="@Html.Raw(id)"></select>
}

Obviously this is not a solution, only a verification. Your example 4 more or less implies that it's not by design, otherwise that one should fail aswell.

like image 191
Tor-Erik Avatar answered Nov 08 '22 08:11

Tor-Erik