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
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
Rank 2
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>
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
Rank 2
Rank 2
Iron
Iron
Iron
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.