Accessing Tag Helper output in Javascript

Question

beginner question with Razor and tag helpers I'm afraid! Using tag helpers in my razor html, I can e.g. write:

<div><date-picker id="datepicker" value="@DateTime.Now"></date-picker></div>

This will then generate the output

<input id="datepicker" class="datepicker" aria-atomic="true" aria-live="assertive" aria-expanded="false" role="combobox" name="datepicker" placeholder="Select date">

and so on. What I'd like to do is to append the output to other objects like dialog screens, which accept an html string to append.

e.g.

var customDesign = "<div id="something"><date-picker id="datepicker" value="@DateTime.Now"></date-picker></div>";
$(".myDialogfield").after(customDesign);

This doesn't work in Razor - I've tried various things like creating this as a HTML.Raw string first and injecting it as a variable etc - is there a way I can use the output from my tag helper within a script section?

Thanks for any hints!

Answer 1

You can't do it that way. TagHelpers are interpreted. In other words, Razor must see them as actual tags in order to replace them. Here, it's just a JS string, and Razor will not mess with that.

Your best bet would likely to be some sort of JavaScript templating system, but generally speaking you could still get what you want manually via a different path. Instead of hardcoding a string of HTML, include the TagHelper in a script block of type text/html:

<script type="text/html" id="MyTemplate">
    <date-picker id="datepicker" value="@DateTime.Now"></date-picker>
</script>

Then, in your JavaScript, you can select this script tag and get its content:

var customDesign = $('#MyTemplate').html();
$(".myDialogfield").after(customDesign);