Categories/Subcategories in asp.net mvc

Question

We are making a marketplace like https://www.etsy.com/. And we have a problem in categorising the listings. We want to categories the item in the Listing in 3 levels, f.ex it has to be categories in this order:

 Category 1 
    Sub Category 1.1
       Sub Category 1.1.1

One of the important thing is that when you choose a category, f.ex. Electronics, then in the subcategory you can only see stuff like pc, smartphone, tv etc.

This is what we have now

 public class Listing
{
    public int ListingId { get; set; }
    public String Name { get; set; }

    public int Subcategory2Id { get; set; }
    public virtual Subcategory2 Subcategory2 { get; set; }
}



public class Category
{
    public int CategoryId { get; set; }
    public String CategoryName { get; set; }

    public virtual ICollection<Subcategory1> Subcategory1s { get; set; }
}



public class Subcategory1
{
    public int Subcategory1Id { get; set; }
    public String Subcategory1Name { get; set; }

    public int CategoryId { get; set; }
    public virtual Category Categories { get; set; }

    public virtual ICollection<Subcategory2> Subcategory2s { get; set; }
}



public class Subcategory2
{
    public int Subcategory2Id { get; set; }
    public String Subcategory2Name { get; set; }

    public int Subcategory1Id { get; set; }
    public virtual Subcategory1 Subcategory1s { get; set; }

    public virtual ICollection<Listing> Listings { get; set; }
}

and in the IdentityModels-ApplicationDbContext we have

public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
    public DbSet<Listing> Listings { get; set; }
    public DbSet<Category> Categories { get; set; }
    public DbSet<Subcategory1> Subcategory1s { get; set; }
    public DbSet<Subcategory2> Subcategory2s { get; set; }

    public ApplicationDbContext()
        : base("DefaultConnection", throwIfV1Schema: false)
    {
    }

    public static ApplicationDbContext Create()
    {
        return new ApplicationDbContext();
    }
}

The thing is we are not sure this is he right way to do it, and we dont know how to proceed, the meaning is that when you create a listing you have to have 3 drop down list, where you choose the respective categorys. So first you choose your category, and then you are able to select the subcategory 1 etc...

Answer 1

You should absolutely not have multiple category/subcategory entities. A category can have a parent and it can have children, but they're all "categories".

public class Category
{
    public int Id { get; set; }

    public int? ParentId { get; set; }
    public virtual Category Parent { get; set; }

    public virtual ICollection<Category> Children { get; set; }
}

ParentId is nullable, because top-level categories have no parent.

Entity Framework tends to get confused by self-referencing relationships, so you might need a little fluent config to help it out:

public class Category
{
    // properties

    public class Mapping : EntityTypeConfiguration<Category>
    {
        public class Mapping()
        {
            HasOptional(m => m.Parent).WithMany(m => m.Children);
        }
    }
}

Then, in your context:

protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
    modelBuilder.Configurations.Add(new Category.Mapping());
}

With all that in place, when you're in your "Electronics" category, you'd show the subcategories simply by iterating over it's Children property.

UPDATE

If you need the full hierarchy rather than just one level at a time, you have a couple of options. First, you can just include multiple levels when querying:

db.Categories.Include("Children.Children");

That's not highly efficient, though, and I definitely would not recommend delving much deeper than tertiary children. However, that's all you're asking for, so this is still a workable method.

Second, you can create a stored procedure to walk the hierarchical structure for you. It's a little more complex, but with a combination of WITH and UNION ALL, you can create a flat representation of the hierarchy and then recursively use LINQ's GroupBy to work it back into a hierarchical structure.

There's a final potential third option in @Hackerman's recommendation of using HIERARCHYID, but unfortunately, to do that, you must completely remove Category from your EF context, which also means removing any direct relationships to it, as well. To relate a product to a category, you could only store the id (not as a foreign key), and then use that id to manually lookup the category in a second step. Unfortunately, while this solution makes dealing the the hierarchy easier, it makes doing everything else more difficult. Either way, it's up to you, though.

Answer 2

This seems to be a correct solution.

You can also use only one class (one DB table etc.) for all categories. Your "Category" class/table must then contain the reference of the parent category (nullable). That allows to make generic treatments for all categories.

For example, when the user create an item, you can display a dropdown list for the main category. If the user selects a category which contains other category, an other dropdownlist is displayed with the child categories, etc...

Answer 3

I giving here a example for category and subcategory with image upload.

 public class ProductController : Controller
{
    ApplicationDbContext db = new ApplicationDbContext();
    // GET: Product
    public ActionResult Index()
    {

        return View();
    }

    public ActionResult insert(int? id)
    {
        ViewBag.categoryList = db.Product.Where(x => x.CategoryId == 0).Select(x => new SelectListItem { Text = x.name, Value = x.Id.ToString() }).ToList();
        var product = db.Product.Where(x => x.Id == id).Select(x => x).FirstOrDefault();
        if (product == null) { product = new Product(); product.CategoryId = 0; }
        return View(product);
    }
    [HttpPost]
    public ActionResult insert(Product model)
    {

        if (Request.Files.Count > 0)
            if (Request.Files["fileupload"].ContentLength > 0)
            {
                var fileupload = Request.Files[0];
                var fileName = Path.GetFileName(fileupload.FileName);
                model.Imagename = fileName;
                model.ImageUrl = DateTime.Now.Ticks.ToString() + "." + fileName.Split('.')[1];

                string baseurl = Server.MapPath("/") + "Images/" + model.ImageUrl;
                fileupload.SaveAs(baseurl);
            }
        if (model.Id > 0)
        {
            var productEntity = db.Product.Where(x => x.Id == model.Id).Select(x => x).FirstOrDefault();
            if (model.Imagename != null)
                productEntity.Imagename = model.Imagename;
            if (model.ImageUrl != null)
                productEntity.ImageUrl = model.ImageUrl;
            productEntity.name = model.name;
            productEntity.CategoryId = model.CategoryId;
        }
        else
        {
            db.Product.Add(model);
        }
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    public ActionResult ProductList()
    {
        var product = db.Product.Where(x => x.Id > 0).Select(x => x).ToList();
        return View(product);
    }

    public ActionResult getsubcategory(int id)
    {
        var list = db.Product.Where(x => x.CategoryId == id)
                     .Select(x => new SelectListItem { Text = x.name, Value = x.Id.ToString() }).ToList();
        return Json(list, JsonRequestBehavior.AllowGet);
    }

}

This upper controller for insert update record.

Below html code :

                @model WebApplication1.Models.Product

            @{
                ViewBag.Title = "insert";
                Layout = "~/Views/Shared/_Layout.cshtml";
            }

            <h2>insert</h2>

            @using (Html.BeginForm("insert","product", FormMethod.Post,new { enctype = "multipart/form-data" }))
            {
                @Html.AntiForgeryToken()

                <div class="form-horizontal">
                    <h4>Product</h4>
                    <hr />
                    @Html.HiddenFor(x=>x.Id)
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        <label class="control-label col-md-2">SubCategory</label>
                        <div class="col-md-10">
                            @Html.DropDownList("SubCategory", new SelectList(ViewBag.categoryList, "Value", "Text", Model.CategoryId), "-Select-", new { @onchange = "categoryselect()", htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.CategoryId, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">

                            @Html.DropDownListFor(model => model.CategoryId, new SelectList(ViewBag.categoryList, "Value", "Text", Model.CategoryId),"-Select-", new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.CategoryId, "", new { @class = "text-danger" })
                        </div>
                    </div>


                    <div class="form-group">
                        @Html.LabelFor(model => model.name, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            @Html.TextBoxFor(model => model.name, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
                        </div>
                    </div>


                    <div class="form-group">
                        @Html.LabelFor(model => model.Imagename, htmlAttributes: new { @class = "control-label col-md-2" })
                        <div class="col-md-10">
                            <input id="Imagename" name="fileupload" type="file" class = "form-control"  />
                            @*@Html.(model => model.Imagename, new { htmlAttributes = new { @class = "form-control" } })*@
                            @Html.ValidationMessageFor(model => model.Imagename, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Create" class="btn btn-default" />
                        </div>
                    </div>
                </div>
            }

            <div>
                @Html.ActionLink("Back to List", "Index")
            </div>
            <script>

                function categoryselect () {

                    var d = $("#SubCategory option:selected").val();
                    $.ajax({
                        url: "/product/getsubcategory?id="+d
                    , type: "get"
                        , success: function (data) {

                            // alert(data)
                            $("#CategoryId").html('<option value="">-select- </option>');
                            for(var i=0;i<data.length;i++)
                                $("#CategoryId").append('<option value="' + data[i].Value + '">' + data[i].Text + '</option>')
                        }
                    })

                    } 
            </script>

model:

                namespace WebApplication1.Models
            {
                public class Product
                {
                    [Key]
                    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
                    public int Id { get; set; }
                    public int CategoryId { get; set; }
                    public string name { get; set; }
                    public string ImageUrl { get; set; }
                    public string Imagename { get; set; }
                }

                public class Category
                {
                    [Key]
                    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
                    public int Id { get; set; }
                    public int PrentId { get; set; }
                    public string name { get; set; }

                }
            }

Index Page:

                @{
                ViewBag.Title = "Index";
                Layout = "~/Views/Shared/_Layout.cshtml";
            }

            <h2>Index</h2>

            <div id="productList">

            </div>
            <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

            <script>
                $(document).ready(function () {
                    $.ajax({
                        url:"/product/productlist"
                        , type: "GET"
                        ,success:function(data)
                        {
                            $("#productList").html(data)
                        }
                    })

                })
            </script>

List Page:

                @model IEnumerable<WebApplication1.Models.Product>

            <p>
                @Html.ActionLink("Create New", "Insert")
            </p>
            <table class="table">
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.CategoryId)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.ImageUrl)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Imagename)
                    </th>
                    <th></th>
                </tr>

            @foreach (var item in Model) {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.CategoryId)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ImageUrl)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Imagename)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "insert", new { id=item.Id }) 

                    </td>
                </tr>
            }

            </table>