MVC5中实现非表格元素的jQuery价格升降序排序问题求助

Got it, let's fix this price sorting issue for your MVC5 product list. Since we're working with non-table elements, we'll use data attributes to store raw price values (critical for accurate sorting) and jQuery to handle the reordering logic. Here's a step-by-step implementation:

Step 1: Update Your View Code #

First, adjust your view to:

• Add a unique container for all products (to target during sorting)
• Include a data-price attribute on each product element (stores the raw numeric price)
• Add sort control buttons
• Fix the loop variable name (avoid conflicting with the @model declaration)

@model IEnumerable<WebApplication.Models.Product>

<!-- Sort Controls -->
<div class="mb-4 sort-controls">
  <button id="sort-asc" class="btn btn-primary me-2">Price: Low to High</button>
  <button id="sort-desc" class="btn btn-secondary">Price: High to Low</button>
</div>

<!-- Product Container -->
<div class="product-container row">
  @foreach (var product in Model) { <!-- Renamed from "Model" to "product" to avoid conflict -->
    <div class="col-md-3 product-item mb-4" data-price="@product.Product_Price">
      <div class="product-men">
        <div class="men-pro-item simpleCart_shelfItem">
          <div class="men-thumb-item">
            <img src="~/Images/@product.Product_Image" alt="@product.Product_Name" class="pro-image-front">
            <img src="~/Images/@product.Product_Image" alt="@product.Product_Name" class="pro-image-back">
            <div class="men-cart-pro">
              <!-- Your existing cart content here -->
            </div>
          </div>
          <div class="item-info-product text-center">
            <h4><a href="#">@product.Product_Name</a></h4>
            <!-- Formatted price display (can keep currency symbols here) -->
            <div class="product-price">
              $@product.Product_Price.ToString("N2")
            </div>
          </div>
        </div>
      </div>
    </div>
  }
</div>

Step 2: Add jQuery Sorting Logic #

Include this script (either at the bottom of your view or in a separate JS file) to handle the sorting functionality:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  // Reusable sort function
  function sortProducts(sortOrder) {
    const productContainer = $('.product-container');
    // Get all product items and convert to array for sorting
    const productItems = productContainer.find('.product-item').sort(function(a, b) {
      // Parse raw price values from data attributes
      const priceA = parseFloat($(a).data('price'));
      const priceB = parseFloat($(b).data('price'));
      
      // Sort based on selected order
      if (sortOrder === 'asc') {
        return priceA - priceB;
      } else {
        return priceB - priceA;
      }
    });
    
    // Reappend sorted items to the container
    productContainer.append(productItems);
  }

  // Attach click handlers to sort buttons
  $('#sort-asc').click(function() {
    sortProducts('asc');
  });

  $('#sort-desc').click(function() {
    sortProducts('desc');
  });
});
</script>

Key Notes: #

• Raw Price Storage: The data-price attribute uses the unformatted numeric value from your model (no currency symbols or commas). This ensures accurate numeric sorting.
• Loop Variable: Renaming the loop variable from Model to product prevents a naming conflict with the top-level @model declaration.
• jQuery Dependency: Make sure jQuery is loaded (use the CDN link above or a local copy in your project).

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