mvc unlimited category table list

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

User960683330 posted

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

Answer 5

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

Answer 6

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

Answer 7

User960683330 posted

ım c# and cshtml code need

Answer 8

User960683330 posted

how can I show you a table?