How to enable code folding in ASP.NET Core Razor syntax in VS Code? - asp.net-core

I am trying to edit Razor pages (.cshtml) in VS Code for a .NET Core project. When I open the file it chooses the ASP.NET Razor (aspnetcorerazor) language mode. It does syntax highlighting perfectly, but there's one important feature missing.
When I hover near the page number I cannot see the folding controls for code folding. So, there is no way to fold the code.
When I change my language mode back to HTML, I get the code folding back, but then I lose all the syntax highlighting of Razor syntax.
Has anybody experienced the same issue? Currently, as a workaround I have to switch back and forth between the HTML and ASP.NET Core Razor language modes for code folding.

Related

Missing "Define debug and define trace constant" checkbox in visual studio 2022

I'm missing two checkboxes for defining constants in my properties screen. Am I missing something?
It should look like this
I'm using a Microsoft.NET.Sdk.Web project in net6.0
Somewhere along the way, Visual Studio streamlined these options to what you are seeing instead of what you are expecting to see. Actually, I don't think this is a Visual Studio-specific change, but rather it depends on what kind of project and what SDK you are using - those being:
.NET Framework
.NET (.NET Core)
I am guessing you are coming from one of my other answers, which sparked you to ask this question. In my post, that screenshot is from a .NET Framework project. I should have probably been slightly more specific in my reply to you. In your project, you are clearly using .NET 6 (as you mentioned above). Because of that, your properties menu looks way different. This is the streamlining I am talking about.
So where are your checkboxes for defining DEBUG and TRACE constants? They are gone! However, you are looking right at the control that replaced them - or rather, you are looking at how these controls work now. Essentially, the $(DefineConstants) replaces these checkboxes, and you can specify additional constants in the same textbox, separating each by a semicolon. If you hover over the "Conditional compilation symbols" controls and click the gear icon, you can toggle it to vary by configuration, which I think is more clear and useful to do:
Then, if you wish to add custom constants, simply add them to the configurations. In the below screenshot, I added an ONLY_DEBUG to the Debug configuration, and an ONLY_Release in the Release configuration:
In the code, you can use them as so:
Microsoft Documentation can be found here.

Make code foldable at custom locations using specific comments in Visual Studio Code?

I am working with Visual Studio Code to create react native apps. To get a better overview of my code, I would like to collapse specific code blocks. But I want to be able to decide where and what to collapse. For this, it would be really nice if a custom comment combination would trigger a folding button on the sidebar.
For example, if I write //- instead of only // at the beginning of a line it should add a collapse button on that line. Is this (or something similar) possible in Visual Studio Code?
Look at code folding by regions. See How do I collapse sections of code in Visual Studio Code for Windows?.
But I don't think you can alter the region syntax to whatever you want, it is defined by the language configuration.
Try // #region and // #endregion for javascript react. (or //#region and //#endregion)

Understanding how Cross-Platform App starts and uses xaml pages

(I have experience with MVC, WebForms, WinForms. I am getting started with Cross-Platform App projects.)
I created a Cross-Platform App project including Xamarin.Forms.
Visual Studio created 4 sub-projects:
"MyProject"
"MyProject".Android
"MyProject".iOS
"MyProject".UWP
I suppose that I actually have to develop most of my project in "MyProject" except for UI specifics things?
Then I have two questions:
Where is it written in "MyProject".UWP that it has to display "MyProject"\MainPage.xaml?
Why can't I view "MyProject"\MainPage.xaml in designer mode?
I think I found both aswers:
Where is it written in "MyProject".UWP that it has to display
"MyProject"\MainPage.xaml?
Somewhere in "MyProject".UWP\MainPage.xaml.cs is the line MainPage = new MyProject.App(); and in "MyProject".UWP\App.xaml.cs is MainPage = new MyProject.MainPage();
(For those not used to work XAML files: the .cs code can be viewder click on the arrow left to the XAML file.)
Why can't I view "MyProject"\MainPage.xaml in designer mode?
According to https://developer.xamarin.com/guides/xamarin-forms/troubleshooting/questions/forms-xaml-designer/
Possible answer: "There is not yet a visual designer for generating XAML in Xamarin.Forms applications, so all XAML must be hand-written."

cshtml Razor Error messages, Conditional Formatting

I'm having a strange issue with my CSHTML files this morning. One moment everything is working fine... then next moment, everything is still working, but all my code highlighting for anything with # infront of it has gone.
The project still compiles and runs fine, but I'm getting red highlights where ever there is a
Code block.
There are loads of posts for Conditional Formatting on this site, but they all suggest changing the code. I don't want to change any code, it's all working fine. I just want to get the yellow colouring behind the # back.
It's all working fine in the aspx files. I can't think of what I did to turn this off.
Edit
I've created a new project and copied every code file over manually.
This is how it looks in the new project.
And like this in the old
That's a bug in Visual Studio. You can't do anything about it. It's just that the dudes at Microsoft didn't get Syntax Highligthing and Intellisense right in Razor views. Hopefully they will in some future version of Visual Studio.
There's nothing wrong with the code you have shown. It works perfectly fine at runtime. Just the tools you are using aren't capable of realizing that.

Visual Studio 2013 Breakpoint Issue with Razor

For some reason, I can't set a breakpoint in #functions when using Visual Studio 2013. Here's an example:
However, the same kind of breakpoint works in Visual Studio 2012:
If you move the #functions block up to the top of the razor page in VS2013 you can set a breakpoint in #functions once again.
You cannot set a breakpoint in #functions if the block is somewhere in the HTML.
Anyone know why? Maybe a bug? This is a big inconvenience if you're migrating an web app from MVC4 or earlier where #function blocks appear in the HTML.
This seems like a known issue. See reported bug in MS Connect.
Description:
"After my upgrade to VS 2013, I am no longer able to debug javascript within MVC razor files. "
http://connect.microsoft.com/VisualStudio/feedback/details/807088/unable-to-debug-javascript-from-the-vs-2013-ide-unable-to-set-breakpoint
I had all of the same issues with "This not a valid location for a breakpoint", and I also had no code highlighting or intellisense on any of the Razor code. None of the solutions I could find resolved it. Primarily because my issue was due to a really dumb oversight on my part, but just in case anyone finds themselves here and have made the same mistake, I thought I'd share it.
If you did not physically create the view yourself in Visual Studio, like if it was created with a NuGet package (Umbraco in my case), or if you opened an existing solution that isn't yours...The view may not be included in the project. You may see something like this
Notice that the Homepage.cshtml file is in there and I can edit it, compile it, render it etc. But I could not insert a breakpoint anywhere. Right clicking on the file and Selecting "Include In Project" was the fix for me.
What worked for me was Excluding the file then Including it again. Picked up the Breakpoints straight away.
Hope it helps!
What helped me overcome this issue was enabling the "ASP.NET" option in the project-properties. See the screenshot: