1. Open the .CSPROJ file of the project that has the “.Browser” suffix (to do so, you can just double-click on the project name from the Solution Explorer in Visual Studio), and make the following changes:
- Find:
<OpenSilverType>6</OpenSilverType>and replace it with:
<OpenSilverType>7</OpenSilverType> - Still in the same file, find:
<PackageReference Include=”OpenSilver”
(…)
and replace that line with:
<PackageReference Include=”OpenSilver.WebAssembly” Version=”3.1.0” />
(Note: the number 3.1.0 might be adjusted to match the exact version of OpenSilver that you have upgraded to; for example, if you have upgraded to version 3.1.2, you should put 3.1.2 there)
(To clarify, the project with the “.Browser” suffix should no longer reference the “OpenSilver” package but rather the “OpenSilver.WebAssembly” package)
2. Delete the file “UnmarshalledJavaScriptExecutionHandler.cs” located under the “Interop” folder of the project that has the “.Browser” suffix.
3. Make sure that all the packages referenced by your projects have the same version, as shown in the screenshot below:
4. In the project which has the “.Browser” suffix, open the file Pages/Index.cs, and replace the whole content with the one below:
(Note: remember to replace “MY_NAMESPACE” with the actual namespace of your application – there are two instances to replace)
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
using OpenSilver.WebAssembly;
using System.Threading.Tasks;
namespace MY_NAMESPACE.Browser.Pages
{
[Route("/")]
public class Index : ComponentBase
{
protected override void BuildRenderTree(RenderTreeBuilder __builder)
{
}
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
await Runner.RunApplicationAsync<MY_NAMESPACE.App>();
}
}
}
5. In the project which has the “.Browser” suffix, open the file “Program.cs”, and replace the whole content with the one below:
(Note: remember to replace “MY_NAMESPACE” with the actual namespace of your application)
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using System.Threading.Tasks;
namespace MY_NAMESPACE.Browser
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
var host = builder.Build();
await host.RunAsync();
}
}
}
6. In the project which has the “.Browser” suffix, open the file wwwroot/index.html, and replace the whole content with the one below (note: remember to change <title>):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>----REMEMBER TO CHANGE THIS TITLE----</title>
<base href="/" />
<script>
(function () {
const style = document.createElement('link');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('type', 'text/css');
style.setAttribute('href', 'loading-indicator.css?date=' + new Date().toISOString());
document.head.appendChild(style);
})();
</script>
</head>
<body>
<div id="app">
<div class="loading-indicator-wrapper">
<div class="loading-indicator">
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-ball"></div>
<div class="loading-indicator-text"></div>
</div>
</div>
</div>
<div id="opensilver-root" style="position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: hidden"></div>
<script>
(function () {
const script = document.createElement('script');
script.setAttribute('type', 'application/javascript');
script.setAttribute('src', 'libs/opensilver.js?date=' + new Date().toISOString());
script.addEventListener('load', function () {
const scriptWebAssembly = document.createElement('script');
scriptWebAssembly.setAttribute('type', 'application/javascript');
scriptWebAssembly.setAttribute('src', '_framework/blazor.webassembly.js?date=' + new Date().toISOString());
document.body.appendChild(scriptWebAssembly);
});
document.body.appendChild(script);
})();
</script>
</body>
</html>
Note: .NET 5 and .NET 6 are no longer supported in OpenSilver 3.1 or newer.
As far as .NET 7 is concerned, it is still supported by OpenSilver, but it is officially out of support by Microsoft.
To change the version of .NET in your solution, open the .CSPROJ file of your projects and replace the following line:
<TargetFramework>net6.0</TargetFramework>
with either:
<TargetFramework>net8.0</TargetFramework>
or
<TargetFramework>net9.0</TargetFramework>
If you change the version of .NET, remember to also change the version of the packages “Microsoft.AspNetCore.Components.WebAssembly” and “Microsoft.AspNetCore.Components.WebAssembly.DevServer”, as shown in the following screenshot:
In some cases, you may need to upgrade your version of Visual Studio:
- .NET 8 requires Visual Studio 2022 v17.8 or newer
- .NET 9 requires Visual Studio 2022 v17.12 or newer
New VSIX (optional):
We encourage you to download the updated Visual Studio Extension (.VSIX), which includes many enhancements, such as:
- Improved XAML Designer
- Improved project templates
Need help?
If you have any questions, please contact us :