如何将Angular 4种子项目主题的指定视图添加至ASP.NET Core项目

Got it, let's walk through how to add only the relevant files for a specific view from the "Seed" theme to your ASP.NET Core project—since you already know how to add the full theme, we'll trim this down to just what you need:

1. Map Out the View's Required Resources #

First, dig into the Seed theme project to pinpoint exactly what your target view needs:

• View template: Find the original HTML file for the specific view you want to add (e.g., a product listing, login form, or dashboard component)
• CSS: Identify only the stylesheets that this view relies on (not the entire theme's CSS folder—look for files named like seed-[view-name].css or component-specific styles)
• JS: Grab any JavaScript files that power the view's interactivity (e.g., form validation, dynamic content)
• Assets: Collect images, icons, or fonts that are unique to this view
• Partial components: If the view uses reusable snippets from the theme (like a custom header or card), note those too

2. Copy Only the Necessary Files to wwwroot #

Skip the full theme folder dump—only copy the resources you mapped in step 1:

• Drop CSS files into a dedicated subfolder like wwwroot/css/seed/ to keep things organized
• Place JS files in wwwroot/js/seed/
• Move images/fonts to wwwroot/images/seed/ or matching subdirectories

Pro tip: Double-check you're not copying unused files—this keeps your project lean and avoids conflicts with existing resources.

3. Set Up the View in Your Project #

3.1 Convert the Theme View to Razor Syntax #

Take the original HTML view from the Seed theme, rename it to .cshtml, and drop it into the corresponding Views/[Controller]/ folder in your project (e.g., Views/Products/ProductListing.cshtml for a product list view).

Adjust the content to fit ASP.NET Core conventions:

• Replace static resource links with Razor helpers like @Url.Content("~/images/seed/product-icon.png") or use tag helpers like asp-src
• Update any hardcoded paths to align with your project's structure

3.2 Link Dependencies to Your Layout or View #

Since you're using Views/Shared/_Layout.cshtml, you have two options to load the view's resources:

• Global load (if multiple views need these assets): Add the CSS/JS references directly to your _Layout.cshtml:

  <!-- In <head> section -->
  <link rel="stylesheet" href="~/css/seed/product-listing.css" />
  
  <!-- At the bottom of the page -->
  <script src="~/js/seed/product-listing.js"></script>
  

• Local load (only for this view): Use Razor sections to load resources only when the view is rendered. First, make sure your _Layout.cshtml has these sections defined:

  <!-- In <head> -->
  @RenderSection("Styles", required: false)
  
  <!-- At page bottom -->
  @RenderSection("Scripts", required: false)
  

  Then add the section calls to your target view:

  @{
      Layout = "_Layout";
  }
  
  @section Styles {
      <link rel="stylesheet" href="~/css/seed/product-listing.css" />
  }
  
  @section Scripts {
      <script src="~/js/seed/product-listing.js"></script>
  }
  
  <!-- Paste your converted view content here -->
  

4. Wire Up the Controller & Test #

Add an action to your controller (e.g., HomeController or a dedicated controller) to return the new view:

public IActionResult ProductListing()
{
    return View();
}

Run your project, navigate to the corresponding route (like /Home/ProductListing), and verify the view renders correctly with all styles and interactivity working as expected.

Quick Extra Tip #

If your target view uses reusable Seed theme components (like a custom form or card), extract those into partial views (e.g., _SeedCard.cshtml) in Views/Shared/ and reference them in your main view with @Html.Partial("_SeedCard").

内容的提问来源于stack exchange，提问作者SaJa