Best way to give element custom properties in C# W

Question

I have a generic html element like this

<span v-bind:class="{ available: days.timeOne }" data-time="10:00" data-date="{{ days.date }}" class="home__visit-featured-days-item-buttons-time">10:00</span>

Which when it is being rendered, is having the vuejs tags being stripped.

I have encountered this issue before when using basic html elements and even control tags like and my solution was to add them manually in the code behind. I don't like this method as not only is long and tedious, it ties back end logic to the view.

Is there a attribute similar to ClientIDMode that I can use to stop these tags being stripped?

Answer 1

I suppose you are using the CK Editor for entering the HTML code. I wouldn't recommend that since it's WYSIWYG and not a code editor and does such things as stripping some part of the source. If you can, please move your code to Static text web part or to the layout directly. If you need to have it inside the editable region area, you can specify protected source for the CK Editor to let it know what code not to touch:

https://www.google.com/search?q=ckeditor%20protectedsource&rct=j

Answer 2

ASP.NET webforms will strip out attributes for server controls (those with runat="server") when attributes contain colon (:) characters because these attributes cannot translate to class properties in the back end. However, non-server controls (i.e. raw markup) should just render as written into the ascx file.

Your example doesn't have a runat="server" attribute so I would expect it to render as written. If, however, it is a server control, could you just use raw markup instead?

If it must be a server control I think your only option is to add your attribute in the code behind as you mention e.g. myControl.Attributes.Add("v-bind:class", "{ available: days.timeOne }");