PowderCoatingLogix/RAZOR_AT_SYMBOL_FIX.md

Razor @ Symbol Fix

🐛 Issue Found

Error: "The name 'media' does not exist in the current context"

Location: Views with CSS @media queries

🔍 Root Cause

In Razor views (.cshtml files), the @ symbol has special meaning - it's used to switch from HTML to C# code. When you write CSS directly in a Razor view, you need to escape @ symbols in CSS at-rules like @media.

✅ Fix Applied

Changed all @media to @@media in:

1. ✅ Views/Home/Index.cshtml (line 217)
2. ✅ Views/Shared/_Layout.cshtml (line 233)

📝 The Fix

Before (❌ Causes Error):

<style>
    @media (max-width: 768px) {
        /* styles */
    }
</style>

After (✅ Correct):

<style>
    @@media (max-width: 768px) {
        /* styles */
    }
</style>

💡 Why Double @@?

In Razor syntax:

• @ = Switch to C# code
• @@ = Escape sequence that outputs a single @ character

So @@media in Razor becomes @media in the final HTML.

🎯 Other CSS At-Rules That Need Escaping

If you add any of these CSS at-rules in Razor views, remember to escape them:

@@media (min-width: 1024px) { }      /* Media queries */
@@keyframes fadeIn { }               /* Animations */
@@import url('fonts.css');          /* Imports */
@@font-face { }                     /* Custom fonts */
@@supports (display: grid) { }      /* Feature queries */

✅ Best Practice: External CSS

To avoid this issue entirely, you can:

Option 1: Use External CSS File (Recommended)

Create wwwroot/css/site.css and link it in your layout:

<link rel="stylesheet" href="~/css/site.css" />

No need to escape @ symbols in .css files!

Option 2: Keep Inline (Current Approach)

Just remember to use @@ for all CSS at-rules.

🔧 If You See This Error Again

1. Look for CSS at-rules in your .cshtml file
2. Find any @ symbols in <style> tags
3. Double them → Change @ to @@
4. Rebuild and the error will be gone

🎯 Quick Test

The error is now fixed! When you run the app:

cd src/PowderCoating.Web
dotnet run

Navigate to https://localhost:7001 and you should see the beautiful login page without errors!

📋 Files Fixed

1. ✅ Views/Home/Index.cshtml - Login page
2. ✅ Views/Shared/_Layout.cshtml - Main layout

Both now properly escape the @ symbol in CSS media queries.

---

The Razor parsing error is now fixed! The login page should render perfectly. ✅