Thiết kế website giá rẻ

Question

I’m encountering a tracking issue in Entity Framework Core while trying to create multiple Product entities in my ASP.NET Core application. The error message I’m getting is:

System.InvalidOperationException: The instance of entity type ‘Product’ cannot be tracked because another instance with the key value ‘{Brand: hteye, Style: wqefwef, ColorName: Red}’ is already being tracked. When attaching existing entities, ensure that only one entity instance with a given key value is attached.

Here’s what I’m trying to achieve:

Create multiple Product entities based on different combinations of Colors and Sizes.
Before adding a new Product, I check if a product with the same Brand, Style, ColorName, and Size already exists.
If a product already exists, I should skip creating it and return a BadRequest.

Below is the relevant code:

ProductCreateModel:

public class ProductCreateModel
{
    public string Brand { get; set; }
    public string Style { get; set; }
    public string ColorCode { get; set; }
    public List<string> Colors { get; set; } = new List<string>();
    public List<string> Sizes { get; set; } = new List<string>();
    public string Description { get; set; }
    public string Specs { get; set; }
    public string Vendor { get; set; }
    public string Keywords { get; set; }
    public string Features { get; set; }
    public string ImageName { get; set; }
    public string Image { get; set; }
    public string Thumbnail { get; set; }
    public string PmsValue { get; set; }
    public decimal? ListPrice { get; set; }
    public bool AutoOrder { get; set; }
    public List<string> Divisions { get; set; } = new List<string>();
    public Dictionary<string, List<string>> Categories { get; set; } = new Dictionary<string, List<string>>();
    public string PriceCategory { get; set; }
    public string GenderAge { get; set; }
    public string SleeveLength { get; set; }
    public string Fabric { get; set; }
    public string StyleType { get; set; }
    public string Weight { get; set; }
    public bool NewProduct { get; set; }
    public string IndigoCategory { get; set; }
    public bool Public { get; set; }
    public int? ColorCount { get; set; }
    public int? CollegiateRank { get; set; }
    public int? CorporateRank { get; set; }
    public int? IndigoRank { get; set; }
    public string RealCampusCategory { get; set; }
    public int? RealRank { get; set; }
}

Product Entity:

public class Product
{
    [Key]
    public int Id { get; set; }
    public string Brand { get; set; }
    public string Style { get; set; }  // This is the Name of the product
    public string ColorCode { get; set; }
    public string ColorName { get; set; }
    public string Size { get; set; }
    public string Description { get; set; }
    public string Specs { get; set; }
    public string Vendor { get; set; }
    public string Keywords { get; set; }
    public string Features { get; set; }
    public string ImageName { get; set; }
    public string Image { get; set; }
    public string Thumbnail { get; set; }
    public string PmsValue { get; set; }
    public decimal? ListPrice { get; set; }  // This is the Price of the product
    public string AutoOrder { get; set; }
    public string Divisions { get; set; }
    public string CollegiateCategory { get; set; }
    public string CorporateCategory { get; set; }
    public string PriceCategory { get; set; }
    public string GenderAge { get; set; }
    public string SleeveLength { get; set; }
    public string Fabric { get; set; }
    public string StyleType { get; set; }
    public string Weight { get; set; }
    public string NewProduct { get; set; }
    public string IndigoCategory { get; set; }
    public bool Public { get; set; }
    public int? ColorCount { get; set; }
    public int? CollegiateRank { get; set; }
    public int? CorporateRank { get; set; }
    public int? IndigoRank { get; set; }
    public string RealCampusCategory { get; set; }
    public int? RealRank { get; set; }
}

Create Product Method:

[HttpPost("Products/CreateProduct")]
public async Task<IActionResult> CreateProduct(ProductCreateModel productModel)
{
    try
    {
        foreach (var color in productModel.Colors)
        {
            foreach (var size in productModel.Sizes)
            {
                var existingProduct = await _context.Products
                    .FirstOrDefaultAsync(p => p.Brand == productModel.Brand
                        && p.Style == productModel.Style
                        && p.ColorName == color
                        && p.Size == size);

                if (existingProduct != null)
                {
                    return BadRequest($"Product with Brand '{productModel.Brand}', Style '{productModel.Style}', Color '{color}', and Size '{size}' already exists.");
                }

                var newProduct = new Product
                {
                    Brand = productModel.Brand,
                    Style = productModel.Style,
                    ColorCode = productModel.ColorCode,
                    ColorName = color,
                    Size = size,
                    Description = productModel.Description,
                    Specs = productModel.Specs,
                    Vendor = productModel.Vendor,
                    Keywords = productModel.Keywords,
                    Features = productModel.Features,
                    ImageName = productModel.ImageName,
                    Image = productModel.Image,
                    Thumbnail = productModel.Thumbnail,
                    PmsValue = productModel.PmsValue,
                    ListPrice = productModel.ListPrice,
                    AutoOrder = productModel.AutoOrder.ToString(),
                    Divisions = string.Join(",", productModel.Divisions),
                    CollegiateCategory = productModel.Categories.ContainsKey("Collegiate") ? string.Join(",", productModel.Categories["Collegiate"]) : null,
                    CorporateCategory = productModel.Categories.ContainsKey("Corporate") ? string.Join(",", productModel.Categories["Corporate"]) : null,
                    PriceCategory = productModel.PriceCategory,
                    GenderAge = productModel.GenderAge,
                    SleeveLength = productModel.SleeveLength,
                    Fabric = productModel.Fabric,
                    StyleType = productModel.StyleType,
                    Weight = productModel.Weight,
                    NewProduct = productModel.NewProduct.ToString(),
                    IndigoCategory = productModel.IndigoCategory,
                    Public = productModel.Public,
                    ColorCount = productModel.ColorCount,
                    CollegiateRank = productModel.CollegiateRank,
                    CorporateRank = productModel.CorporateRank,
                    IndigoRank = productModel.IndigoRank,
                    RealCampusCategory = productModel.RealCampusCategory,
                    RealRank = productModel.RealRank
                };

                _context.Products.Add(newProduct);
            }
        }

        await _context.SaveChangesAsync();
        return Ok("Products created successfully.");
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, $"Error creating products. Product model: {productModel}");
        return StatusCode(500, "Internal server error");
    }
}

I’ve tried to follow various solutions like detaching entities or using .AsNoTracking() but nothing seems to work. Any help or pointers to resolve this issue would be greatly appreciated.

Frontend Code (React Admin):

const dataProvider: DataProvider = {
    create: async (resource: string, params: CreateParams): Promise<CreateResult<any>> => {
        const url = resource === 'Products' ? `Resources/Products/CreateProduct` : `Resources/${resource}`;
        try {
            const response = await httpClient.post(url, params.data);
            return { data: { ...params.data, id: response.data.id } };
        } catch (error) {
            console.error("Error in create:", error); // Debug output
            throw error;
        }
    },
};

Create Component (React Admin):

import React, { useState, useEffect, useCallback } from 'react';
import {
  Create,
  SimpleForm,
  TextInput,
  SelectInput,
  ImageInput,
  ImageField,
  BooleanInput,
  useDataProvider,
  useNotify,
  useRedirect,
} from 'react-admin';
import { Box, TextField, FormLabel, FormGroup, FormControlLabel, Checkbox, Button, Typography, Paper, IconButton } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';
import SaveIcon from '@mui/icons-material/Save';
import CancelIcon from '@mui/icons-material/Cancel';
import { styled } from '@mui/material/styles';

const sizes = [
  { id: 'XS', name: 'XS' },
  { id: 'S', name: 'S' },
  { id: 'M', name: 'M' },
  { id: 'L', name: 'L' },
  { id: 'XL', name: 'XL' },
  { id: '2XL', name: '2XL' },
  { id: '3XL', name: '3XL' },
];

const divisions = [
  { id: 'Corporate', name: 'Corporate' },
  { id: 'Campus', name: 'Campus' },
  { id: 'Indigo', name: 'Indigo' },
];

interface Color {
  name: string;
  thumbnail?: File | null;
  thumbnailPreview?: string;
}

const StyledPaper = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(4),
  backgroundColor: theme.palette.background.paper,
  borderRadius: theme.shape.borderRadius,
  maxWidth: '900px',
  margin: 'auto',
  marginTop: theme.spacing(4),
  boxShadow: theme.shadows[3],
}));

const StyledHeading = styled(Typography)(({ theme }) => ({
  marginBottom: theme.spacing(3),
  color: theme.palette.primary.main,
  textAlign: 'center',
  fontWeight: 'bold',
  fontSize: '2rem',
}));

const FlexContainer = styled(Box)(({ theme }) => ({
  display: 'flex',
  alignItems: 'center',
  marginBottom: theme.spacing(3),
}));

const StyledButton = styled(Button)(({ theme }) => ({
  marginLeft: theme.spacing(2),
  height: '40px',
  fontWeight: 'bold',
  '&:hover': {
    backgroundColor: theme.palette.primary.dark,
    boxShadow: theme.shadows[2],
  },
}));

const FileInputLabel = styled('label')(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  color: 'white',
  padding: theme.spacing(1, 2),
  borderRadius: theme.shape.borderRadius,
  cursor: 'pointer',
  marginLeft: theme.spacing(2),
  '&:hover': {
    backgroundColor: theme.palette.primary.dark,
  },
}));

const ThumbnailPreview = styled('img')(({ theme }) => ({
  width: '60px',
  height: '60px',
  marginLeft: theme.spacing(2),
  border: '1px solid #ddd',
  borderRadius: theme.shape.borderRadius,
  objectFit: 'cover',
  '&:hover': {
    transform: 'scale(1.1)',
  },
}));

const SelectAllButton = styled(Button)(({ theme }) => ({
  marginLeft: 'auto',
  backgroundColor: theme.palette.primary.main,
  color: 'white',
  padding: theme.spacing(1, 2),
  borderRadius: theme.shape.borderRadius,
  cursor: 'pointer',
  '&:hover': {
    backgroundColor: theme.palette.primary.dark,
  },
}));

const FormControlStyled = styled(Box)(({ theme }) => ({
  flexGrow: 1,
  display: 'flex',
  flexWrap: 'wrap',
  gap: theme.spacing(2),
}));

const ProductCreate: React.FC<any> = (props) => {
  const dataProvider = useDataProvider();
  const notify = useNotify();
  const redirect = useRedirect();
  const [brands, setBrands] = useState<{ id: string; name: string }[]>([]);
  const [newBrand, setNewBrand] = useState<string>('');
  const [selectedSizes, setSelectedSizes] = useState<string[]>([]);
  const [newColor, setNewColor] = useState<string>('');
  const [colors, setColors] = useState<Color[]>([]);
  const [editColorIndex, setEditColorIndex] = useState<number | null>(null);
  const [editedColor, setEditedColor] = useState<string>('');
  const [selectedCategories, setSelectedCategories] = useState<{ [key: string]: string[] }>({});
  const [selectedDivisions, setSelectedDivisions] = useState<string[]>([]);
  const [categoriesByDivision, setCategoriesByDivision] = useState<{ [key: string]: { id: string; name: string }[] }>({});

  const fetchBrands = useCallback(async () => {
    try {
      const { data } = await dataProvider.getList('Products/Brands', {
        pagination: { page: 1, perPage: 100 },
        sort: { field: 'name', order: 'ASC' },
        filter: {},
      });
      setBrands(data);
    } catch (error) {
      notify('Error fetching brands', { type: 'error' });
    }
  }, [dataProvider, notify]);

  const fetchCategories = useCallback(async (division: string) => {
    try {
      const { data } = await dataProvider.getList('Products/Categories', {
        pagination: { page: 1, perPage: 100 },
        sort: { field: 'name', order: 'ASC' },
        filter: { divisions: division },
      });

      setCategoriesByDivision((prev) => ({
        ...prev,
        [division]: data,
      }));
    } catch (error) {
      notify(`Error fetching categories for ${division}`, { type: 'error' });
    }
  }, [dataProvider, notify]);

  useEffect(() => {
    fetchBrands();
  }, [fetchBrands]);

  useEffect(() => {
    selectedDivisions.forEach((division) => {
      if (division) {
        fetchCategories(division);
      }
    });
  }, [selectedDivisions, fetchCategories]);

  const toggleAllSizes = () => {
    if (selectedSizes.length === sizes.length) {
      setSelectedSizes([]);
    } else {
      setSelectedSizes(sizes.map((size) => size.id));
    }
  };

  const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    if (selectedSizes.includes(value)) {
      setSelectedSizes(selectedSizes.filter((size) => size !== value));
    } else {
      setSelectedSizes([...selectedSizes, value]);
    }
  };

  const handleNewBrandChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNewBrand(event.target.value);
  };

  const handleAddNewBrand = () => {
    if (newBrand && !brands.some((brand) => brand.id === newBrand)) {
      setBrands([...brands, { id: newBrand, name: newBrand }]);
      setNewBrand('');
    }
  };

  const handleNewColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNewColor(event.target.value);
  };

  const handleAddColor = () => {
    if (newColor.trim() === '') return;

    setColors([...colors, { name: newColor, thumbnail: null, thumbnailPreview: '' }]);
    setNewColor('');
  };

  const handleEditColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setEditedColor(event.target.value);
  };

  const handleSaveColor = (index: number) => {
    const updatedColors = [...colors];
    updatedColors[index].name = editedColor;
    setColors(updatedColors);
    setEditColorIndex(null);
    setEditedColor('');
  };

  const handleEditColor = (index: number) => {
    setEditedColor(colors[index].name);
    setEditColorIndex(index);
  };

  const handleCancelEdit = () => {
    setEditColorIndex(null);
    setEditedColor('');
  };

  const handleDeleteColor = (index: number) => {
    setColors(colors.filter((_, i) => i !== index));
  };

  const handleThumbnailChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const updatedColors = [...colors];
      updatedColors[index].thumbnail = file;
      updatedColors[index].thumbnailPreview = URL.createObjectURL(file);
      setColors(updatedColors);
    }
  };

  const handleCategoryChange = (division: string, event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    setSelectedCategories((prev) => {
      const divisionCategories = prev[division] || [];
      if (divisionCategories.includes(value)) {
        return {
          ...prev,
          [division]: divisionCategories.filter((category) => category !== value),
        };
      } else {
        return {
          ...prev,
          [division]: [...divisionCategories, value],
        };
      }
    });
  };

  const handleDivisionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    if (selectedDivisions.includes(value)) {
      setSelectedDivisions(selectedDivisions.filter((division) => division !== value));
    } else {
      setSelectedDivisions([...selectedDivisions, value]);
    }
  };

  const handleSubmit = async (data: any) => {
    const payload = {
      ...data,
      sizes: selectedSizes,
      colors: colors.map((color) => color.name),
      divisions: selectedDivisions,
      categories: selectedCategories,
    };

    await dataProvider.create('Products', { data: payload });
    notify('Product created successfully', { type: 'success' });
    redirect('list', 'Products');
  };

  return (
    <Create {...props}>
      <StyledPaper>
        <StyledHeading variant="h4">Create New Product</StyledHeading>
        <SimpleForm onSubmit={handleSubmit}>
          <FlexContainer>
            <SelectInput source="brand" choices={brands} fullWidth label="Brand" />
            <TextField value={newBrand} onChange={handleNewBrandChange} placeholder="New brand" />
            <StyledButton onClick={handleAddNewBrand} variant="contained" color="primary" startIcon={<AddIcon />}>Add Brand</StyledButton>
          </FlexContainer>
          <TextInput source="style" fullWidth label="Style" />
          <TextInput source="description" fullWidth label="Description" multiline />
          <TextInput source="price" fullWidth label="Price" />
          <FlexContainer>
            <FormControlStyled>
              <FormLabel component="legend">Sizes</FormLabel>
              <FormGroup>
                {sizes.map((size) => (
                  <FormControlLabel
                    control={<Checkbox checked={selectedSizes.includes(size.id)} onChange={handleSizeChange} value={size.id} />}
                    label={size.name}
                    key={size.id}
                  />
                ))}
              </FormGroup>
            </FormControlStyled>
            <SelectAllButton onClick={toggleAllSizes} variant="contained" startIcon={<CheckCircleOutlineIcon />}>
              {selectedSizes.length === sizes.length ? 'Deselect All' : 'Select All'}
            </SelectAllButton>
          </FlexContainer>
          <FlexContainer>
            <FormControlStyled>
              <FormLabel component="legend">Colors</FormLabel>
              <FlexContainer>
                <TextField
                  value={newColor}
                  onChange={handleNewColorChange}
                  placeholder="Enter color"
                />
                <StyledButton
                  onClick={handleAddColor}
                  variant="contained"
                  color="primary"
                  startIcon={<AddIcon />}
                >
                  Add Color
                </StyledButton>
              </FlexContainer>
              <FormGroup>
                {colors.map((color, index) => (
                  <FlexContainer key={index}>
                    <TextField
                      value={editColorIndex === index ? editedColor : color.name}
                      onChange={(e) => handleEditColorChange(e as React.ChangeEvent<HTMLInputElement>)}
                      fullWidth
                      disabled={editColorIndex !== index}
                    />
                    <FileInputLabel htmlFor={`fileInput-${index}`}>
                      {color.thumbnail ? 'Change Image' : 'Upload Image'}
                    </FileInputLabel>
                    <input
                      type="file"
                      accept="image/*"
                      id={`fileInput-${index}`}
                      onChange={(e) => handleThumbnailChange(index, e)}
                      style={{ display: 'none' }}
                    />
                    {color.thumbnailPreview && (
                      <ThumbnailPreview src={color.thumbnailPreview} alt="Color Thumbnail" />
                    )}
                    {editColorIndex === index ? (
                      <>
                        <IconButton onClick={() => handleSaveColor(index)}>
                          <SaveIcon />
                        </IconButton>
                        <IconButton onClick={handleCancelEdit}>
                          <CancelIcon />
                        </IconButton>
                      </>
                    ) : (
                      <>
                        <IconButton onClick={() => handleEditColor(index)}>
                          <EditIcon />
                        </IconButton>
                        <IconButton onClick={() => handleDeleteColor(index)}>
                          <DeleteIcon />
                        </IconButton>
                      </>
                    )}
                  </FlexContainer>
                ))}
              </FormGroup>
            </FormControlStyled>
          </FlexContainer>
          <FlexContainer>
            <FormControlStyled>
              <FormLabel component="legend">Divisions</FormLabel>
              <FormGroup>
                {divisions.map((division) => (
                  <FormControlLabel
                    control={<Checkbox checked={selectedDivisions.includes(division.id)} onChange={handleDivisionChange} value={division.id} />}
                    label={division.name}
                    key={division.id}
                  />
                ))}
              </FormGroup>
            </FormControlStyled>
          </FlexContainer>
          <FlexContainer>
            {selectedDivisions.map((division) => (
              <FormControlStyled key={division}>
                <FormLabel component="legend">{division} Categories</FormLabel>
                <FormGroup>
                  {categoriesByDivision[division]?.map((category) => (
                    <FormControlLabel
                      control={<Checkbox checked={selectedCategories[division]?.includes(category.id) || false} onChange={(e) => handleCategoryChange(division, e)} value={category.id} />}
                      label={category.name}
                      key={category.id}
                    />
                  ))}
                </FormGroup>
              </FormControlStyled>
            ))}
          </FlexContainer>
          <FlexContainer>
            <ImageInput source="image" label="Product image" accept="image/*">
              <ImageField source="src" title="title" />
            </ImageInput>
          </FlexContainer>
          <FlexContainer>
            <BooleanInput source="public" label="Public" />
          </FlexContainer>
        </SimpleForm>
      </StyledPaper>
    </Create>
  );
};

export default ProductCreate;

Issue Resolution Attempt

What did I try and what was I expecting?

Steps Taken

Checking for Existing Products:
Before adding a new Product, I used a FirstOrDefaultAsync query to check if a product with the same Brand, Style, ColorName, and Size already exists in the database. This is to ensure that duplicates are not created.

var existingProduct = await _context.Products
    .FirstOrDefaultAsync(p => p.Brand == productModel.Brand && p.Style == productModel.Style && p.ColorName == color && p.Size == size);

if (existingProduct != null) {
    return BadRequest($"Product with Brand '{productModel.Brand}', Style '{productModel.Style}', Color '{color}', and Size '{size}' already exists.");
}

Adding New Products:
If the product does not exist, I create a new Product entity and add it to the context.
```
var newProduct = new Product {
    // initialization
};
_context.Products.Add(newProduct);
```
Saving Changes:
Finally, I call SaveChangesAsync to persist the new products to the database.
```
await _context.SaveChangesAsync();
```

What was I expecting?

I expected the above approach to prevent duplicate Product entities from being added to the database and to avoid tracking issues in Entity Framework Core. Specifically, I expected that:

The FirstOrDefaultAsync query would correctly identify existing products.
Only new, unique products would be added to the context and saved.

How do I know the products don’t currently exist in the database?

I verified that the products I’m trying to create do not currently exist in the database by running the following SQL query directly against the database:

SELECT TOP (1000) 
    [Id], 
    [Brand], 
    [Style], 
    [ColorCode], 
    [ColorName], 
    [Size], 
    [Description], 
    [Specs], 
    [Vendor], 
    [Keywords], 
    [Features], 
    [ImageName], 
    [Image], 
    [Thumbnail], 
    [Pms...
FROM [dbo].[Products] 
WHERE Brand = 'hteye'

The result returned zero rows, confirming that no products with the specified Brand exist in the database.

Also tried adding something like this:

                var existingProduct = await _context.Products
                    .AsNoTracking()
                    .FirstOrDefaultAsync(p => p.Brand == productModel.Brand 
                                              && p.Style == productModel.Style 
                                              && p.ColorName == color 
                                              && p.Size == size);

Despite these steps, I am still encountering the tracking issue in Entity Framework Core. Any help or pointers to resolve this issue would be greatly appreciated.