locked
mvc unlimited category table list RRS feed

  • Question

  • User960683330 posted

    Hello

    I'm preparing the Admin panel but I'm stuck here

    Problem Listing Unlimited Category

    computer

    Computer > laptop computer>

    Computer > laptop computer> Lenovo

    I'm trying to make such a listing like the category list in OpenCart but could not help

    Thank you for your help

    Friday, October 19, 2018 3:47 PM

All replies

  • User1520731567 posted

    Hi burakkucukekiciler,

    Problem Listing Unlimited Category

    computer

    Computer > laptop computer>

    Computer > laptop computer> Lenovo

    I suggest you could use bootstrap Navbar.

    Powerful, responsive navigation header, the navbar.

    Includes support for branding, navigation, and more, including support for our collapse plugin.

    Like the picture:

    There are many examples with different style,you could refer to:

    https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

    https://bootsnipp.com/tags/menu

    Best Regards.

    Yuki Tao

    Monday, October 22, 2018 2:24 AM
  • User-271186128 posted

    Hi burakkucukekiciler,

    Problem Listing Unlimited Category

    computer

    Computer > laptop computer>

    Computer > laptop computer> Lenovo

    I'm trying to make such a listing like the category list in OpenCart but could not help

    If you want to store the category into database, you could create a data table as below:

    CREATE TABLE [dbo].[Categories](  
        [CategoryId] [int] primary key identity(1,1),  
        [CategoryName] [varchar](40),  
        [ParentCategoryId] [int],   --ParentCategoryID: used to find sub category.
        [Remarks] [nvarchar](max),  
    ) 

    Then, you could use JQuery Ajax method to call the action method and get data from the above table.

    Finally, refer to the following code to use a recursive method to create the category tree.

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
    //you could use jquery ajax to call action method and get data from database. var datalist = [{ "ID": "1", "ParentID": "0", "Name": "Parent1" }, { "ID": "2", "ParentID": "0", "Name": "Parent2" }, { "ID": "3", "ParentID": "1", "Name": "Child 1.1" }, { "ID": "4", "ParentID": "1", "Name": "Child 1.2" }, { "ID": "5", "ParentID": "3", "Name": "SubChild 1.1.1" }, { "ID": "6", "ParentID": "2", "Name": "Child 2.1" }]; var tree = ""; $(document).ready(function () { PopulateTreeNode(datalist, "0"); $(tree).appendTo("#div_content"); }); function PopulateTreeNode(data, parentid) { var newdata = data.filter(function (value) { return (value.ParentID == parentid); }); tree += "<ul>"; newdata.forEach(function (e) { var parentItem = "<li >" + e.Name + "</li>"; tree = tree + parentItem; PopulateTreeNode(data, e.ID); }) tree += "</ul>"; }; </script> <div id="div_content"> </div>

    The output as below: Note: I didn't add any CSS style, you could refer to this article to add bootstrap navbar CSS style.

    More details about how to Create Dynamic Tree View, please check the following articles:

    Create Dynamic Tree View From Database In ASP.NET MVC 5 C#

    Implement TreeView in ASP.Net MVC

    Best regards,
    Dillion

    Wednesday, October 31, 2018 9:08 AM
  • User1429838465 posted

    You want to create a recursive table in your design for unlimited categories.

    I wrote something similar with a menu system here: https://www.danylkoweb.com/Blog/building-a-menu-system-in-aspnet-mvc-CX

    For recursive queries, SQL Server uses CTE (Common Table Expressions) to accomplish this. Discussed here: https://www.danylkoweb.com/Blog/recursion-in-sql-server-using-common-table-expressions-cte-NJ

    Hope this helps,
    JD

    Thursday, November 1, 2018 1:16 PM
  • User960683330 posted

    I can't turn this on the <table>, it doesn't come out like this.

    Thursday, November 1, 2018 1:57 PM
  • User1520731567 posted

    Hi burakkucukekiciler,

    I can't turn this on the <table>, it doesn't come out like this

    I suggest your could add some breakpoints on your code to check.

    If you have any questions,please post more related code,such as:model,controller and view.

    Best Regards.

    Yuki Tao

    Friday, November 2, 2018 7:59 AM
  • User960683330 posted

    Conntoller

    private void GetSubTree(IList<SayfaKategori> allCats, SayfaKategori parent, List<SayfaKategori> items)
    {
    var subCats = allCats.Where(c => c.UstKatid == parent.id);
    foreach (var cat in subCats)
    {
    //add this category
    items.Add(new SayfaKategori { id = cat.id, SayfaKatAdi = parent.SayfaKatAdi + " >> " + cat.SayfaKatAdi });
    //recursive call in case your have a hierarchy more than 1 level deep
    GetSubTree(allCats, cat, items);
    }
    }

    public ActionResult Index()
    {
    var query = GetSubTree();
    return PartialView(query);
    }

    Cshtml

    @helper PrintCategories(IEnumerable<test.Models.SayfaKategori> categories)
    {
    foreach (var item in categories)
    {
    @item.CategoryName
    <br />
    var subCategories = item.;
    if (subCategories != null && subCategories.Count > 0)
    {
    PrintCategories(subCategories);
    }
    }
    }


    @PrintCategories(Model.categories)

    I'm getting a mistake

    Friday, November 2, 2018 3:04 PM
  • User960683330 posted

    ım c# and cshtml code need

    Friday, November 2, 2018 3:13 PM
  • User960683330 posted

    how can I show you a table?

    Monday, November 12, 2018 3:11 PM