On ASP.NET a random but concise sequence of letters and numbers

Question

On ASP.NET a random but concise sequence of letters and numbers

Jackietkfrost opened this issue 2 years ago · 16 comments

Describe the bug
as described in issue #45,
Difficulty with creating an <img/> inside a toggle due to random, but concise sequence of letters and numbers also appearing when using an SVG image.

To Reproduce

Download Bootstrap Icons
Unzip into your ASP.NET Core 6 Web Application project
Use bootstrap toggle's link, and script
Use an SVG Image inside one of the toggles

<!-- HTML code-->
<input type="checkbox" checked data-toggle="toggle" data-style="android" data-onstyle="warning" data-on="<img src='assets/icons/sun-fill.svg'> Light">

Expected behavior
Image would be displayed correctly with no additional text.

Screenshots

Package:
(please complete the following information)

Bootstrap 5 Toggle version: 4.2.0
Bootstrap version: 5.1.0

Desktop:
(please complete the following information)

OS: Windows
Browser: Chrome
Version: Version 102.0.5005.115

Answer 1 · 2022-07-21T12:40:08.000Z

Hi! 👋
Thanks for your issue. You are helping to improve Bootstrap 5 toggle.

Answer 2 · 2022-07-22T06:08:26.000Z

Hi @Jackietkfrost,

I'm not able to reproduce the issue 😢.

In debug.zip you have the full html and sources used to reproduce your issue.

Do you have other idea about border effects that can be causing your issue?

Answer 3 · 2022-07-22T12:40:50.000Z

Hmm, I had removed all styling to it, and it still didn't work. Do you think maybe it's an issue with ASP.Net Core? I'll give it another once-over to see if I can figure out what's causing it.

Answer 4 · 2022-07-22T12:46:25.000Z

Can you try to replace the <img>with

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-sun-fill' viewBox='0 0 16 16'>
  <path d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/>
</svg>

Answer 5 · 2022-07-22T12:59:56.000Z

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-sun-fill' viewBox='0 0 16 16'>
  <path d='M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z'/>
</svg>

I used the svg path you mentioned, and it still gives that weird sequence. This is very intriguing. I went into the inspect menu and found out that the button has that sequence when it's created, so it might be something with ASP.NET Core 6.

Answer 6 · 2022-07-22T13:05:51.000Z

Okay so I've narrowed it down to it being something in the _Layout from ASP.Net Core, because I created the same button in my index, and I don't have the same problem.

Answer 7 · 2022-07-22T13:18:36.000Z

Okay, I keep the issue open in case a ASP.net developer could help with this issue.

Answer 8 · 2022-07-22T15:39:45.000Z

I'll keep looking into it to see if I can find some way of fixing it.

Answer 9 · 2022-07-22T18:28:16.000Z

@palcarazm when you tried to replicate it, did you try it on a basic html page, or did you try with ASP.Net Core 6's _Layout.cshtml page as well?

Answer 10 · 2022-07-22T18:52:52.000Z

Just in an html page. I'm not into ASP. NET.

Answer 11 · 2022-07-22T19:06:59.000Z

Could be that there is a not standard utf-8 char that your code editor don't render but ASP.net is replacing with this sequence?

Try to delete and type the toggle code.

Answer 12 · 2022-07-22T21:01:33.000Z

Well, I'm using purely english for the wording, I've also tried grave accents `, and apostrophes, and quotation marks, the latter of course causing issues with the way it displayed the image.

I've checked through my page, and nothing is accentuated in any other language, and I've typed out the code block a few times at this point. I even started a new project, purely only the basics offered when starting a new web app in ASP.NET core 6, and I'm still getting the same error, but this time a different sequence of letters:

You can see in the image that the one on the bottom (containing the same code, simply in an index.cshtml), and it's functioning properly.

I'll dive further into this during next week, and see if I can figure out what's causing this weird issue. From my understanding, ASP.Net is converting any of the HTML in the toggle into an actual html item, and using whatever system it uses to generate the HTML for the client side, making it 'obfuscate' the code, since ASP.NET is a server to client type of webpage, where the server doesn't display the full code, and that could be causing the issue. But what's weird it's only in the layout.

Answer 13 · 2022-07-27T06:59:08.000Z

Hi @Jackietkfrost,

Have you tried as workaround to initialize the toggle via the JS API. I let you a demo:

Set the HTML in the _Layout.cshtml

<input type="checkbox" checked id="theme-toggle">

On document loaded run the javascript code that fit your bootstrap5-toggle interface:

2.A) With jQuery interface

$('#theme-toggle').bootstrapToggle({
        on: '<img src="assets/icons/sun-fill.svg"> Light',
        off: 'Dark',
        onstyle: 'warning',
        offstyle: 'dark',
        style : 'android'
    });

2.B) With ECMAS (vanilla JS) interface

document.querySelector('#theme-toggle').bootstrapToggle({
        on: '<img src="assets/icons/sun-fill.svg"> Light',
        off: 'Dark',
        onstyle: 'warning',
        offstyle: 'dark',
        style : 'android'
    });

Answer 14 · 2022-07-27T12:56:29.000Z

Using JS works just fine, a bit of a workaround, but hey!
Still reading up and figuring out why ASP.NET Core 6 changes all the html to have a specific sequence of letters in every html tag that causes this issue, so maybe an implementation where ASP ignores the inner text as html that needs to be in some way serialized.

Answer 15 · 2022-08-29T12:17:15.000Z

Hi @Jackietkfrost,

Do you have some news related to this issue?

Answer 16 · 2022-08-29T12:49:35.000Z

Unfortunately not yet, no. I've been stuck with a backlog and haven't been able to research more on this.