How to Use Design Patterns in Asp.net Mvc
Use CSS isolation in ASP.NET Core MVC, Razor Pages, and Blazor
ASP.NET Core developers often store styling information for MVC views, Razor Pages, and Razor Components into a style sheet file. The style sheet is then applied to various pages using <link> HTML element. Although this works great in many cases, at times you might want to isolate view / page / component specific styling information into its own CSS file. Luckily, MVC views, Razor Pages, and Razor Components support such CSS isolation. This article explains how.
CSS isolation in MVC applications
To begin, let's use this feature in ASP.NET Core MVC application. So, create a new MVC application using Visual Studio.
Notice that I have picked ASP.NET Core 6 for this example.
Once the MVC project gets created go to the Views > Home folder. At this stage, your Home folder will resemble this:
Right click on the Home folder and select Add > New Item to open the Add New Item dialog.
Look for Style Sheet entry and specify the style sheet name to be Index.cshtml.css. Following this naming pattern in important. Once the style sheet gets added, Visual Studio will show it nested as shown below:
Open Index.cshtml.css and add the following CSS class:
.helloWorld{ font-family:Arial; font-size:60px; font-weight:bold; color:blue; } Now open Index.cshtml view file and modify it as shown below:
<div> <h1 class="helloWorld">Hello World!</h1> </div>
As you can see, we have applied helloWorld CSS class to the <h1> element.
Next, open _Layout.cshtml file from under Views > Shared folder and add the following markup in its <head> section.
<link rel="stylesheet" href="~/CssIsolationMvc.styles.css" />
All the individual view specific CSS files are bundled together into a CSS file. The name of this CSS bundle follows this pattern:
<project_name>.styles.css
Therefore the href attribute points to this file.
If you run the project you should see this output:
CSS isolation in Razor Pages
CSS isolation in Razor Pages follows a similar line. To confirm this, create a new Razor Pages application using Visual Studio.
Then expand its Pages folder to reveal Index razor page.
Now add a CSS file named Index.cshtml.css in the Pages folder and write this CSS class in it:
.helloGalaxy{ font-family:Arial; font-size:60px; font-weight:bold; color:red; } Your CSS will be shown nested like this:
Next, open the Index.cshtml file and apply the CSS helloGalaxy class as shown below:
<div> <h1 class="helloGalaxy">Hello Galaxy!</h1> </div>
Finally, open the _Layout.cshtml page and place the <link> element as before.
<link rel="stylesheet" href="~/CssIsolationRazorPages.styles.css" />
You should get an output similar to this:
CSS isolation in Blazor apps
Now let's confirm the working of CSS isolation in a Blazor application. Create a new Blazor Server App using Visual Studio.
Then expand the Pages folder to reveal Index.razor component. This time add Index.razor.css file to the Pages folder.
Add the following class in the CSS file.
.helloUniverse{ font-family:Arial; font-size:60px; font-weight:bold; color:green; } Then open Index.razor component and modify it to use the helloUniverse CSS class.
@page "/" <h1 class="helloUniverse">Hello Universe!</h1>
In Blazor apps you don't need to explicitly add any <link> element in the _Host file because it is already added for you:
<link href="CssIsolationBlazor.styles.css" rel="stylesheet" />
Running the app will give this output:
Now check the HTML source of the page in the browser. You will see something like this:
<h1 class="helloUniverse" b-drhhgu0uqa>Hello Universe!</h1>
As you can see the <h1> element has a unique b-drhhgu0uqa attribute added to it. Click on the application's CSS link at the top and the CSS class will be revealed to you:
.helloUniverse[b-drhhgu0uqa]{ font-family:Arial; font-size:60px; font-weight:bold; color:green; } So, helloUniverse CSS class is applied to an element only when it has b-drhhgu0uqa attribute.
With this arrangement, multiple individual CSS files can safely have CSS classes with the same name.
That's it for now! Keep coding!!
How to Use Design Patterns in Asp.net Mvc
Source: http://www.binaryintellect.net/articles/d94c00f5-e8fe-44ef-8a6e-1a4d66510c9f.aspx
0 Response to "How to Use Design Patterns in Asp.net Mvc"
Mag-post ng isang Komento