如何基于MVC与Bootstrap实现行业及对应项目的筛选画廊？

Hey there! Let's build that filtered sector-project gallery using MVC and Bootstrap. I'll break this down into actionable steps so you can get it up and running without hassle.

First, let's define your data structure to keep things organized in MVC:

• Model Classes: Create two simple models to represent your sectors and their associated projects:

  public class Sector
  {
      public string Name { get; set; }
      public string FilterKey { get; set; } // Matches the data-filter attribute on buttons
      public List<Project> Projects { get; set; }
  }
  
  public class Project
  {
      public string Title { get; set; }
      public string Description { get; set; }
      public string ImageUrl { get; set; } // For gallery thumbnails
  }
  

• Controller: Populate your sector data and pass it to the view:

  public ActionResult Gallery()
  {
      var sectors = new List<Sector>
      {
          new Sector
          {
              Name = "玻璃",
              FilterKey = "hdpe",
              Projects = new List<Project>
              {
                  new Project { Title = "玻璃幕墙项目", Description = "高端商业建筑玻璃幕墙施工", ImageUrl = "/images/glass-project.jpg" }
              }
          },
          new Sector
          {
              Name = "维护",
              FilterKey = "sprinkle",
              Projects = new List<Project>
              {
                  new Project { Title = "设施定期维护", Description = "工业设备年度巡检维护服务", ImageUrl = "/images/maintain-project.jpg" }
              }
          }
          // Add more sectors and their projects here
      };
  
      return View(sectors);
  }
  

In your Razor view, render the filter buttons dynamically using the sector data from the controller. Here's how to integrate your example code with MVC's looping logic:

<div align="center" class="mb-4">
    <!-- "All" button to show all projects by default -->
    <button class="btn btn-default filter-button active" data-filter="all">全部</button>
    @foreach (var sector in Model)
    {
        <button class="btn btn-default filter-button" data-filter="@sector.FilterKey">@sector.Name</button>
    }
</div>

Note: The active class on the "All" button ensures all projects are visible when the page loads.

Next, render each project as a responsive Bootstrap card. Assign a class matching the sector's FilterKey so we can target it with our filtering logic:

<div class="row gallery-container">
    @foreach (var sector in Model)
    {
        foreach (var project in sector.Projects)
        {
            <div class="col-md-4 gallery-item @sector.FilterKey mb-3">
                <div class="card h-100">
                    <img src="@project.ImageUrl" class="card-img-top" alt="@project.Title">
                    <div class="card-body">
                        <h5 class="card-title">@project.Title</h5>
                        <p class="card-text">@project.Description</p>
                    </div>
                </div>
            </div>
        }
    }
</div>

We're using Bootstrap's grid system (col-md-4) to make the gallery adapt to different screen sizes.

Add this script to handle the filter button clicks. We'll use jQuery (since Bootstrap relies on it) to show/hide items with smooth transitions:

$(document).ready(function(){
    $('.filter-button').click(function(){
        var selectedFilter = $(this).attr('data-filter');
        
        // Update active button state
        $('.filter-button').removeClass('active');
        $(this).addClass('active');
        
        if(selectedFilter === 'all'){
            $('.gallery-item').show('1000');
        } else {
            $('.gallery-item').not('.'+selectedFilter).hide('300');
            $('.gallery-item').filter('.'+selectedFilter).show('300');
        }
    });
});

To polish the gallery's look, add some custom CSS:

.gallery-item {
    opacity: 1;
    transition: all 0.5s ease;
}

.filter-button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

That's all! This setup gives you a fully functional filtered gallery that follows MVC patterns and uses Bootstrap for a responsive, clean UI.

内容的提问来源于stack exchange，提问作者Ms.Fatima