syntax and colorize for javascript codes in cshtml file not working

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

Hi,

syntax and colorize for javascript codes in cshtml file not working so,

I have to use this syntax

@{
    <text>
        <script type="text/javascript" data-origin="carousel-home-slider">
            $(function () {

});
        </script>
    </text>
}

---

Original Comments

Feedback Bot on 12/4/2023, 06:07 PM:

We have directed your feedback to the appropriate engineering team for further evaluation. The team will review the feedback and notify you about the next steps.

Anonymized GDPR on 12/6/2023, 06:35 PM:

Thank you for taking the time to log this issue!
I can’t repro this issue in VS2022 Community (17.8.3) with below steps:

1. Create a blazor server app.
2. Create test.cshtml and add below code.
   Syntax and colorize for javascript codes in cshtml file are working.

Did you see this issue only once or is it happening all the time?
Are you installed any extensions and third-party plugins? (Such as Resharper? Could you try to uninstall other extensions and third-party plugins and then check whether this issue also reproduces or not?)
Could you try to delete .vs/.bin/.obj folder and update your VS to latest build?
Could you provide a repro video using https://www.screentogif.com/ or a similar tool and a demo project which can repro this problem?

We look forward to hearing from you!

SUAT SUPHI on 12/6/2023, 07:27 PM:

the relevant cshtml page is as follows. what is wrong here?

@model IEnumerable<CarouselViewModel>
@{
    if (Model == null || ! Model.Any())
        return;
int counter = 0;

foreach (var main in Model.ToList())

foreach (var item in main. CarouselItemViewModel.ToList())

counter++;
if (counter == 0)

return;
var carouselId = "carousel-" + Model.FirstOrDefault(). Id;

int delay = 0;

int c = 0;

var mediaUrl = Model.FirstOrDefault(). MediaUrl;

}

@foreach(var item in Model.Where(i=>!string. IsNullOrEmpty(i.Style)). ToList())

{

<style id=[Redacted]@[Redacted]>

@Html.Raw(item. Style)

</style>

}

<div id="@carouselId" class="carousel" data-ride="carousel">

@if (counter > 1)

{

<ol class="carousel-indicators">

@for (int i = 0; i < counter; i++)

{

<li data-target="#@carouselId" data-slide-to="@i.ToString()" class="@Html.Raw(c==0 ? "active" : "")"></li>

}

</ol>

}

<div class="carousel-inner" style="background-image: url('@mediaUrl'); height: 500px; background-position: top center; background-size: auto;  background-repeat: no-repeat;">

@foreach (var main in Model.ToList())

{

delay = main. Delay;
foreach (var slide in main. CarouselItemViewModel.ToList())

{

<div class="carousel-item @Html.Raw(main. DarkText?" dark":"light") h-100 @Html.Raw(c==0 ? "active" : "")" data-delay="@main. Delay" data-mediaurl="@main. MediaUrl">

<div class="carousel-content h-100">

<partial name="_CarouselHomeSliderItems" model="@slide" />

</div>

</div>

mediaUrl = main. MediaUrl;

c++;

}

}

</div>

@if (counter > 1)

{

<a class="carousel-control-prev" href="#@carouselId" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#@carouselId" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

}

</div>
<script type="text/javascript" data-origin="carousel-home-slider">

$(function () {

//var mainCarousel = $('#carousel-1');

var mainCarousel = $('#@carouselId');

// Initialize carousel

mainCarousel.on('slid.bs.carousel', function (e) {

var timeout = $(e.currentTarget).find('.carousel-item.active').attr('data-delay');

const options = $(e.currentTarget).data()['bs.carousel']["_config"];

options.interval = parseInt(timeout);
var mediaUrl = $(e.currentTarget).find('.carousel-item.active').attr('data-mediaurl');

var carouselInner = $(e.currentTarget).find('.carousel-inner')[0];

carouselInner.style.backgroundImage = "url('" + mediaUrl + "')";
$(e.currentTarget).find('.carousel-item').each(function (index, element) {

$(this).find('.aos-animate').each(function (i, e) {

e.classList.remove('aos-animate');

});

});
$(e.currentTarget).find('.carousel-item').each(function (index, element) {

$(this).find('.aos-animate').each(function (i, e) {

e.classList.remove('aos-animate');

});

});
AOS.init();

});
mainCarousel.carousel({

//interval: 10000

});

});

</script>

Anonymized GDPR on 12/6/2023, 06:35 PM:

Anonymized GDPR on 12/6/2023, 10:07 PM:

Thanks for your sharing the detail steps, I can reproduce this issue through your shared steps and this issue has been escalated for further investigation, if there is any process, I will inform you immediately.