In a Blazor WebAssembly .NET Core hosted application, after changing the {PROJECT NAME}.Client project name to "{PROJECT NAME}.Admin" (changing the client project name), scope identifies for CSS isolation in the {PROJECT NAME}.Admin.styles.css file and rendered objects in the DOM are different.
What I did
I created a .NET core hosted Blazor WebAssembly application with authentication. Ran the application. Worked fine.
Then I changed the project name of {PROJECT NAME}. Client project to "{PROJECT NAME}.Admin". And changed basically everywhere there was "Client" to "Admin".
Everywhere the namespace was mentioned
The Client Folder in the project folder
Then I added the project references.
When I ran the project...
This was the landing page.
The Issue
All the functionality works fine. All the components are rendered. But only Bootstrap styling is applied to the MainLayout and NavMenu components as they use CSS isolation. The isolated CSS files generated files scope identities aren't the same as what is rendered to the DOM.
Image of {PROJECT NAME}.Admin.styles.css file
Image of Rendered HTML
The page renders fine if I change the scope Identities manually. But it resets when I Run the application the next time.
I'm just playing around with Blazor. So I'm expecting a fix to this problem rather than some alternate method or workaround to do the styling. I'm new to online forums. Sorry for providing unnecessary information or providing less information. Please request any additional information needed.
Deleting the CSS isolated files and creating them again from the beginning made it work! How ever rebuilding the solution or cleaning the solution did not work. Still no clue of what was going on.
What worked for me was deleting the obj and bin folders, besides renaming the link to the css file to {AssemblyName}.styles.css.
Setting it to ProjectName does not work if it differs from AssemblyName.
This way it was not necessary for me to delete and recreate the specific css files.
Note: I'm using Blazor Server with ASP.NET 5
Another workaround (not a solution as it should already "just work") is mentioned under "Customize scope identifier format" in: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0 .
Basically add something like this to your csproj file:
<ItemGroup>
<None Update="Pages/Example.razor.css" CssScope="my-custom-scope-identifier" />
</ItemGroup>
If you provide a specific scope identifier like this and ensure you clear your browser cache, it seems to force the scope identifier that gets bundled in the {AssemblyName}.styles.css to match what gets rendered in the html
I had the same issue. Rebuilding the solution fixed it for me. Possibly rebuilding just the relevant application would have been enough too.
I spent many hours on the same issue. In my case it was sufficient to use "Clean" on the project (in Visual Studio: right click on the project, and select the "Clean" option).
It has the same effect as deleting the bin and obj folders as mentioned in another answer.
Related
I'm trying to set up a Github Pages site for my Blazor project. Even with a brand new blazor project I have had no success. I consistently hit 404 errors with an unmodified new project, following the instructions people have given on this question.
You can find my current attempt at https://billybillyjim.github.io and the repro is at https://github.com/billybillyjim/billybillyjim.github.io
My current process has been this:
Create a brand new Client-side Blazor page in Visual Studio 2019 Preview (3.0.100-preview6-012264).
Go to Github Pages and create a repo named billybillyjim.github.io
Clone the repo to a local folder using the Desktop Github app.
Using the Publish option in the Build menu of VS2019 I select a folder profile.
After a successful build I move the files created from the published folder to the repo folder.
I commit and push to github.
I add a .nojekyll file, and add the SPA javascript scripts to both a new 404.html and to the index.html.
Trying to load the page gives me a 404.
"Failed to load resource: the server responded with a status of 404 ()"
This error is for every dll file.
Things I have tried:
Putting everything in a folder, changing the base href in index.html, and setting the SPA script segmentCount to 1.
Removing underscores and updating the file references in index and the two blazor.js files.
Changing the href in index.html to to the repo name as described at the end of the instructions here.
I've compared my setup to the example page at https://github.com/blazor-demo/blazor-demo.github.io has a very similar setup to mine, but it's a year old and seems to use a very different set of dlls and a different blazor.js.
I am entirely new to web development, so I think it's very likely I am completely misunderstanding something simple.
The two key things that got it working for me were:
providing a base path in the blazor index page
removing leading underscores from folders (e.g. the _framework and _bin folders).
Fixing the base path
You need to do this because the files in the Blazor app are referenced to the root of the site, and a GitHub Pages site has the name of you project as the first part of the path.
In the index.html change:
<base href="/" />
to:
<base href="/YOURPROJECTNAME/" />
This makes the browser add in your project name to the start of the path of any files it fetches.
If you are storing your Blazor app nested in another subdirectory, you'll also need to include that in the base path.
You can tell if this isn't working by looking at the dev tools of your browser and examining the paths of any 404s it's hitting.
Fixing the leading underscores
I had to:
Remove the underscores from the folders
Rename the references to _framework and _bin in index.html and framework\blazor.webassembly.js
Automating it
I used some PowerShell post-publish of the app to combine both of these steps: (Note that you'll need to set the <base> tag to the correct value for your project)
(Get-Content .\public\blazor-sample\index.html) `
-replace '<base href="/" />', '<base href="/lifti/blazor-sample/" />' `
-replace '_framework', 'framework' |
Out-File .\public\blazor-sample\index.html
Rename-Item .\public\blazor-sample\_framework "framework"
Rename-Item .\public\blazor-sample\framework\_bin "bin"
(Get-Content .\public\blazor-sample\framework\blazor.webassembly.js) `
-replace '_framework', 'framework' `
-replace '_bin', 'bin' |
Out-File .\public\blazor-sample\framework\blazor.webassembly.js
I finally figured it out! I don't know how I didn't notice before, but my repo was not actually accepting my bin folder, which contains all the application's dlls. So it seems (Maybe by default?) Github pages ignores bin folders. First I tried to edit my repo's gitignore file, but it didn't seem to update to show files, so I had to manually add the files using git add -f framework/bin/ and then commit and push. Now the site is working!
For anyone finding this post and having issues trying to work with Blazor in Azure Static Web Apps, try creating a fallback route as this seems to fix the 404 errors you get when doing a refresh or by typing in a route manually.
In the root of your project folder (typically where App.razor and Program.cs are located), create a new JSON file named staticwebapp.config.json and put something like the following in it:
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
}
}
Assuming you are using GitHub, don't forget to push your changes, wait for the CI/CD action to finish, and then test. You should now be able to refresh a page and type in routes manually.
See Configure Azure Static Web Apps for details about the file and what else it can do. More specific detail about the example above (and a detailed explanation of why it's needed) can be found in the Fallback Routes section of the same page.
Worth noting, this method did NOT require modifying the base href or removing any _'s from bin or framework folders. I tested using the base "Blazor WebAssembly App" template in Visual Studio 2022.
Hosting a Blazor app on Git pages is a pain. I tried multiple ways and it results in error somehow. However, if you are looking for a free limited deployment option for a Blazor app then you can try Firebase.
You can refer to my article https://ankitsharmablogs.com/hosting-a-blazor-application-on-firebase/ for a step-by-step guide of hosting a Blazor app on Firebase.
What worked for me was:
1.Set your base href like this: <base href="home" />
2. Add a page directive to Index.razor so it looks like this:
#page "/"
#page "/home"
Use navigationManager.NavigateTo("home"); instead of navigationManager.NavigateTo("/");
You don't need to rewrite your base href in Github Pages.
Happy coding!
Indeed, anyone still looking for Answer in 2022
GitHub expects pages to be generated by Jekyll static site generator. So it will not read any folder starting with an underscore _.
You can now disable this behaviour by
adding a .nojekyll file to the wwwroot folder.
For GitHub Actions
If you are using GitHub Actions for deploying, add this step before copying the files
- name: Disable Jekyll
run: touch release/wwwroot/.nojekyll
Happy hosting. Don't forget to upvote if you find this helpful, so more people can benefit from the update :)
I have this ASP.NET application, and suddenly it doesn't show the changes, if I edit a css file for example, even if I rebuild it and run it like that. I tried with an older version of the app too but it does the same. Is it from some Visual Studio setting?
If you are working with VS2015/2017, consider deleting the ".vs" folder that could be found at the root of your application i.e. the same folder where your solution file is present. If the folder isn't there you may have to unhide it through folder options.
The folder will get created again next time you build/run your application.
Try to clear the browser's cache.
Make sure you have tried "ctrl + f5" which will hard refresh (Cache will restore) your crome and make sure everything has been saved inside vs, Also make sure you are passing through the .css file properly.
We are working on a website project which contains around 1130 pages. After compilation, all the .aspx.cs files are converted into AppCode DLLs that has random names.
Whenever there are any changes in single .aspx.cs file[like a hotfix], we have to recompile and deploy the entire project on the application host.
We want to update only those files that have been changed and not the entire package.
One of a solution we are aware is that, converting Website to Web application; but we cannot implement that change at this stage of the project.
Is there any other way to find an efficient solution for this?
Yup. Talking in Visual Studio 2010:
While publishing the website, Select the option: 'Use Fixed naming and single page assemblies', Also select 'Allow this precompiled site to be updateable'.
After website is published. Go to the published folder. Open any aspx page (not the dll or .cs).. Note the dll name in page attribute under inherits attribute. Than using ftp or any other way to upload, copy or upload tht dll under bin to your website.
Also, you can create a doc or txt file to list all Dll names with respective paths to your file to easily know which dll to upload next time if there is any change.
Hope it helps.
I am attempting to integrate a project into a pre-existing solution.
The start-up project in the solution is named "Foo." It is written to the virtual path "/csweb/." When this project starts up it loads /csweb/Default.aspx. This is the current, unmodified home page.
I am attempting to redirect to a different home page in a different project.
I added a second project to the solution named "Bar." Under its project properties I told it to write to the virtual path "/csweb/." It is not marked as the start-up project, nor are there multiple start-up projects -- just Foo. Bar's homepage is accessible when Bar is marked as the start-up project. It's homepage is represented by localhost:port/csweb/Default.aspx
I would like to redirect to Bar's Default.aspx while using Foo as the start-up project. I am fine with renaming Bar's Default.aspx to something non-ambiguous, if that would make the problem easier.
If I try HttpContext.Response.Redirect("~/Default.aspx") then it clearly takes me to Foo/Default.aspx and not Bar/Default.aspx, but the url in the browser is just localhost:port/csweb/Default.aspx. There is no indication of being inside of a project, completely understandable. If I rename Bar/Default.aspx to Bar/UniqueName.aspx and attempt HttpContext.Response.Redirect("~/UniqueName.aspx") then the page is not found.
What's the right call here? Do I need to setup Bar as a pre-existing virtual directory in IIS so that I can specify a more complete path name to avoid ambiguity? Or do I need to do something fancy with multiple start-up web projects in order for it to be accessible?
Thanks for any advice on this confusing issue.
EDIT: I ended up just adding another folder to Foo's project and moving the contents of Bar's project to this folder. I am then able to do HttpContext.Response.Redirect("~/Bar/Bar's Default.aspx") I'd still love to hear a better solution than this, though!
Try HttpContext.Response.Redirect("/csweb/Default.aspx"). The tilde "~" in your current redirect says to start in this application's home folder. By removing that you can redirect to some other location on your site.
You can also fully qualify the redirect to go to an entirely different site if you wish.
I am using a SharedAssemblyInfo file which seems to be a 'standard' technique:
http://blogs.msdn.com/jjameson/archive/2009/04/03/shared-assembly-info-in-visual-studio-projects.aspx
I put the SharedAssemblyInfo.cs file into my web application because with web site projects I cannnot 'add files as a link'.
But now I need to add a second web project to the solution and obviously the SharedAssemblyInfo file cannot be within both projects.
How do I get round this problem without having duplicate SharedAssemblyInfo files?
One way to solve this problem from within a web site as opposed to a web project is via your source control provider.
If you are using Visual Source Safe you can "share" the file to both projects (folders) and not branch. If you are using subversion 1.6 you can use a single file "externals" property. See this page for info.
In the case of Team Foundation Server, you can look at this codeplex article. I don't have any experience with TFS, but I think in the case of a SharedAssembly.cs the branch and merge solution would work fine.
This means you will have to check the file in in one location and check it out in the other location for the change to take effect. However, have the AssemblyInfo out of sync during the development process probably won't break anything.
Is it a web site or a a web project? With a web project the linked file should work fine... although personally I'd rather keep them separate and update them through my build script.