84

I am trying out Blazor and i do not understand why when changing a component after refreshing the browser page it does not update ? Shouldn't the client update itself similar to how angular does?

It only refreshes when i restart the blazor server.

Index.cshtml

@page "/"

<h1>Hello, world!</h1>

If i change lets say the text inside the <h1> to Hello people , i save the project and i refresh the page ( as i am advised in the Blazor tutorial) shouldn't i see Hello people ?

Bercovici Adrian
  • 8,794
  • 17
  • 73
  • 152

6 Answers6

163

After Asp.net Core 3.0, Runtime compilation is enabled using the Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation package. To enable runtime compilation, apps must:

Install the Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation NuGet package.

Update the project's Startup.ConfigureServices method to include a call to AddRazorRuntimeCompilation:

services
    .AddControllersWithViews()
    .AddRazorRuntimeCompilation();

or

services.AddMvc().AddRazorRuntimeCompilation();
Eureka
  • 1,746
  • 1
  • 6
  • 2
  • It solves the problem. It is not a browser cache problem. – Duefectu Sep 27 '19 at 09:07
  • 1
    This works for the web application (while not in debugging). It doesn't work for changes made in files inside a referenced razor library. – Cesar Oct 18 '19 at 04:02
  • 12
    You can also add `.AddRazorRuntimeCompilation();` onto `services.AddRazorPages()` instead of `services.AddControllersWithViews()` or `services.AddMvc()`. – jhhwilliams Nov 11 '19 at 11:23
  • 3
    Does it affect performance having this on/off? Would it make any difference at all have this turned off in production but on in Development? – grimdog_john Dec 18 '19 at 13:22
  • This was the answer for me with asp.net 3.1. I was not seeing changes to my razor views unless and until I stopped and rebuilt. This allowed for changes to views so I could simply save and refresh the browser. – tnk479 Jan 06 '20 at 03:25
  • 3
    Razor runtime compilation is an MVC feature, not a supported Blazor feature. https://github.com/dotnet/aspnetcore/issues/16915 – Flores Jan 29 '20 at 13:29
  • 1
    This works...but the fact that I have to load a component to do something so "standard" is COMPLETELY lame. – Prisoner ZERO Dec 09 '20 at 19:36
  • 1
    `AddRazorRuntimeCompilation` isnt compatible with net core 3.1 – djack109 Jan 23 '21 at 14:41
  • I understand this might be better for code that needs to be compiled, but I used to be able to see changes in MVC cshtml files immediately when I made changes. Now with the new way it has to recompile and it takes soooo much longer to refresh the page when so many times I just want to see a little style change. It's pretty ridiculous. For me, this is much worse having to wait so much longer to refresh every time I make a tiny non-code related change than the effort of having to manually recompile when I do make a real code change. – BVernon Jan 28 '21 at 03:04
  • We are in 2022 and this still happens :( Any solution for .razor files to be able to be updated without recompiling the hole thing? – Hugo A. Apr 09 '22 at 16:07
26

I guess you are running the app with the debugger connected? this prevents the recompilation. You need to:

Press Ctrl-F5 to run the app without the debugger. Running with the debugger (F5) isn't supported at this time.

https://github.com/dotnet/aspnetcore/issues/5456

Flores
  • 8,226
  • 5
  • 49
  • 81
  • Yes indeed i was running it with the debugger. – Bercovici Adrian Jan 09 '19 at 12:48
  • Just a moment, @Flores, do you mean that I can run an application by pressing Ctrl-F5, updating my code (without of course closing my app), saving the changes, and then refreshing the page, and lo and behold, our Blazor app displays the changes. No way. This is something new to me, saving the project, recompile it (I'm not being sarcastic. I really mean it). – enet Jan 09 '19 at 13:06
  • 1
    @Bercovici Adrian, if I'm not wrong about my claim in the comment above, then you can either Press Ctrl-F5, after each update (which compile and run your app anew), or you can built or rebuilt your app and then press F5. – enet Jan 09 '19 at 13:15
  • Doesn't matter if the debugger is running or not - Eureka anwer is correct. – Pawel Feb 01 '20 at 00:18
  • In VS2019 this is still not working. In MVC this worked fine, so are we having to take a step-back with the developer experience here? – user183872 Feb 04 '20 at 16:26
  • https://code2night.com/Blog/MyBlog/Stopping-Browser-Reload-On-saving-file-in-Visual-Studio-AspNet – Shubham Aug 22 '20 at 10:40
9

You should add or enable runtime compilation in razor pages,

Install-Package Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation -Version 3.1.6

After installing set the startup file as ,

 services.AddMvc().AddRazorRuntimeCompilation();
Mahesan Rv
  • 318
  • 4
  • 4
3

do the following:

  1. Install the Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation from NuGet.

  2. Update the ConfigureServices method in the Startup class to look like below:

services.AddControllersWithViews().AddRazorRuntimeCompilation();

  1. You good to go.
snnpro
  • 193
  • 2
2

If you go into Tools > Options > Keyboard and search in the "Show commands containing" search box search for "BrowserLink". Find the option that says "OtherContextMenus.BrowserLink.RefreshLinkedBrowsers" by default this is set to CTRL+Alt+Enter. Click "Remove" and then select the "Press Shortcut Keys" input and press Ctrl+S. Next (just to the left of the input) change Use new shortcut in "Global" to be "Text Editor". Click "Ok" until the window has closed. Now Visual Studio shares CTRL+S with both Saving files and Refreshing linked browsers.

(This will only work if your text editor .cshtml, .css, .js, etc. files in the edit window are the active selections) WARNING: if you don't set it to something other than global then it will override the shortcut for Save and you won't be able to save your files.

Pinpaho
  • 187
  • 2
  • 5
  • 15
0

Adding "services.AddMvc().AddRazorRuntimeCompilation();" and installing the Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation package 6.0.5 will fix the problem but it will ruin the "css isolation". The first thing you will notice is that the footer will lose its position

Samuel Kazan
  • 31
  • 7