Asp.Net store product attributes (Size,Quantity)

Question

I'm having the same problem as this question

I have a product table with columns

(PK)Product_Id, (FK)Category_Id, Name, Description, Size, Color, Quantity, Price, Condition

For now I'm storing these values through a Simple form with all fields.

Model Product.cs

public partial class Product
{
    [Key]
    public int ProductId { get; set; }

    [Required]
    [StringLength(50)]
    public string Name { get; set; }

    [AllowHtml]
    public string Description { get; set; }

    public decimal? Price { get; set; }

    public int? Quantity { get; set; }

    public string Condition { get; set; }

    [StringLength(50)]
    public string Size { get; set; }

    [StringLength(50)]
    public string Colors { get; set; }
}

View Sizes and Colors are stored by simple checkbox.

@using (Html.BeginForm("AddProduct", "Store", FormMethod.Post, new { enctype = "multipart/form-data",   @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<h4>Create a new product.</h4>
<hr />
@Html.ValidationSummary(true)
<div class="form-group">
    @Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label", data_val_required = "required" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
        @Html.ValidationMessageFor(m=>m.Name)
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.Description, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextAreaFor(m => m.Description, new { @class = "form-control" })
    </div>
</div>
<div class="form-group"> 
    @Html.LabelFor(m => m.Size, new { @class = "col-md-2 control-label sizecheckboxshow" })
    <div id="sizecheckboxes" class="col-md-10">
        <input type="checkbox" name="Size" value="XS" /><span class="sizecheckboxtext">XS</span>
        <input type="checkbox" name="Size" value="S" /><span class="sizecheckboxtext">S</span>
        <input type="checkbox" name="Size" value="M" /><span class="sizecheckboxtext">M</span>
        <input type="checkbox" name="Size" value="L" /><span class="sizecheckboxtext">L</span>
        <input type="checkbox" name="Size" value="XL" /><span class="sizecheckboxtext">XL</span>
        <input type="checkbox" name="Size" value="XXL" /><span class="sizecheckboxtext">XXL</span>
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(m => m.Colors, new { @class = "col-md-2 control-label colorcheckboxshow" })
    <div id="colorcheckboxes" class="col-md-10">
        <input type="checkbox" name="Color" value="Red" /><span class="colorcheckboxtext">Red</span>
        <input type="checkbox" name="Color" value="Green" /><span class="colorcheckboxtext">Green</span>
        <input type="checkbox" name="Color" value="Blue" /><span class="colorcheckboxtext">Blue</span>
        <input type="checkbox" name="Color" value="Black" /><span class="colorcheckboxtext">Black</span>
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.Condition, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.RadioButtonFor(x => x.Condition, "New") <text>New</text>
        @Html.RadioButtonFor(x => x.Condition, "Used") <text>Used</text>
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(m => m.Price, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(x => x.Price, new { @class = "form-control" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(m => m.Quantity, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(x => x.Quantity, new { @class = "form-control" })
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" class="btn btn-default" value="Create Product" />
    </div>
</div>
}

Controller

storing the products using this code

[HttpPost]
public ActionResult AddProduct(Product newRecord)
    {
                    newRecord.Name = Request.Form["Name"];
                    newRecord.CategoryId = Convert.ToInt32(Request.Form["CategoryId"]);
                    newRecord.Size = Request.Form["Size"];
                    newRecord.Colors = Request.Form["Color"];
                    newRecord.Description = Request.Unvalidated.Form["Description"];
                    newRecord.Price = Convert.ToDecimal(Request.Form["Price"]);
                    newRecord.Quantity = Convert.ToInt32(Request.Form["Quantity"]);
                    db.Products.Add(newRecord);
                    db.SaveChanges();
                    return RedirectToAction("Index", "Home");
     }

and the value is stored in 1 row. How can I store Sizes with quantities ? As the referenced question.

Kindly check this link also for more understanding of this question, When you move the mouse on Sizes it shows the left items in stock. I want to achieve this .

Answer 1

Your database and model design is not correct for what your trying to achieve. You need one table for the product (say Product), containing common properties such as ID, Name, Description and Price (assuming the price do not vary with the size), and another table (say `ProductStock) for the Size and StockQuantity (with a FK to the Products table).

Your models would be something like

public class Product
{
  public int ID { get; set; }
  public string Name { get; set; }
  public string Description { get; set; }
  public decimal Price { get; set; }
  public List<ProductStock> Stock { get; set; }
}
public class ProductStock
{
  public int ID { get; set; }
  public string Size { get; set; } // and enum may be better if the possible values wont change
  public int Quantity { get; set; }
}

Then your view would be something like

@model Product
<h2>@Html.DisplayFor(m => m.Name</h2>
@Html.DisplayFor(m => m.Description)
@Html.DisplayFor(m => m.Description)
@foreach(var item in Stock)
{
  @Html.DisplayFor(m => item.Size)
  @Html.DisplayFor(m => item.Quantity)
}