This is a migrated thread and some comments may be shown as answers.

Alternate to using Script tags for Templates because Razor removes them

5 Answers 202 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 2
Jacques asked on 20 Oct 2015, 09:29 AM

What are the alternative approaches to using script tags to house templates?

If you have a <script id="bla" type="text/x-kendo-template"> tag in a partial and try to render it in your main view with either Html.Partial or Html.RenderPartial, it seems that Razor messes around with those script tags somehow.

It's that, or the browser doesn't like the fact that I'm embedding one script tag within another. The reason I'm doing this is because the outer script tag is used for a Kendo View template/content. The inner script tags are templates for a Grid.

 

?

5 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 22 Oct 2015, 07:45 AM

Hello Jacques,

 

nesting script tags is not necessary or recommended, although there are various workarounds discovered. I can't be certain on the specifics of your case - you may inspect the server response to verify if the server returns a malformed response or the browser does not handle them as expected.

 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jacques
Top achievements
Rank 2
answered on 23 Oct 2015, 07:46 AM

So what would you recommend in the a case where you're building a SPA app that does the following:

<body>
 
<div id="spa"></div>
 
<script id="viewForMaster" type="x-kendo-template">
    @Html.Partial("MasterView");
</script>
 
<script>
    //add code here to load the SPA layout from the
    //viewForMaster view
</script>
</body>

If that Razor view renders a Table that uses templates for the rows it's automatically going to be doing so in script tags which means you're going to get nested tags.

Here's a simple example of what might be in that additional razor view:

<script id="tableRow" type="x-kendo-template">
    <tr><td>#=data#</td></tr>
</script>
 
<table>
    <tbody data-template="tableRow" data-bind="source: Items"></tbody>
</table>
 
 
0
Accepted
Petyo
Telerik team
answered on 27 Oct 2015, 09:38 AM

Hello Jacques,

 

the easiest thing you can do is to move the script template tag in the partial and wrap only the view contents.

 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jacques
Top achievements
Rank 2
answered on 03 Nov 2015, 08:25 AM
Thanks that should do the trick. It's just slightly annoying because you would then have to go and look in the partial view to find the ID of the template, but a fix none-the-less.
0
Bhavika
Top achievements
Rank 2
Iron
Iron
Iron
answered on 08 Nov 2024, 12:46 PM

Experiencing issues with Razor removing <script> tags when you’re using them as templates, there are a few alternative methods you can try to store and use HTML templates without Razor interference:

1.  Use <script type="text/x-template"> or a Custom Type
Set a non-executable MIME type on your <script> tag, such as text/x-template. Since this type is not recognized as JavaScript, Razor won’t try to parse it or execute it, allowing it to remain as an HTML template. Here’s an example:

<script type="text/x-template" id="my-template">
    <div>
        <!-- Your template HTML here -->
    </div>
</script>

2.  Store the Template in a JavaScript Variable
Another option is to define your HTML template directly within a JavaScript variable. This can be useful if you only need the template in JavaScript and don’t want to use an extra HTML element.

const myTemplate = `
    <div>
        <!-- Template HTML content here -->
    </div>
`;

3. External HTML File
If you have a more extensive or complex template, you can store it in a separate HTML file and fetch it with AJAX. Here’s a basic example using fetch:

fetch('template.html')
    .then(response => response.text())
    .then(templateContent => {
        // Use the templateContent here
    });

These methods allow you to keep your HTML templates intact without Razor automatically removing or modifying the <script> tags.

Tags
Templates
Asked by
Jacques
Top achievements
Rank 2
Answers by
Petyo
Telerik team
Jacques
Top achievements
Rank 2
Bhavika
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or