Asp.net Mvc Category List

  1. #1

    Asp.net Mvc Category List

    Hello
    How can I return the category list in the database in the image below

    I did it with foreach but it did not work

    i need help please


    Click image for larger version. 

Name:	Screenshot_1.png 
Views:	6 
Size:	24.9 KB 
ID:	24884
  2. #2
    Hello @cingozr! Welcome to Ext.NET forums!

    You are not properly binding the data to the store of your (likely) grid panel... or tree panel!...

    Here are a couple starting points to binding data properly to a store:

    - Grid Panel - Simple Array Grid
    - Tree Panel - Basic from code behind
    - Tree Panel - SiteMap

    I hope this helps! It is really hard to guess how you are trying to build your panel, if the examples above do not help at all, we will need you to provide us a sample test case on how you are trying to draw that. Please review our guidelines in the following thread so you can provide us information in a way we can actually understand your problem and help you:
    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you for your reply @fabricio.murta

    I can't explain my English is not very good i'm sorry



    I can bring the category table as a menu item in the event database.

    I want to list the categories in the west panel. Ext.net syntax, I want to show the categories in the database in the western panel

    I want to do
    Click image for larger version. 

Name:	Screenshot_4.jpg 
Views:	8 
Size:	54.9 KB 
ID:	24885



    Click image for larger version. 

Name:	Screenshot_2.png 
Views:	7 
Size:	11.0 KB 
ID:	24887 => Click image for larger version. 

Name:	Screenshot_3.png 
Views:	7 
Size:	14.7 KB 
ID:	24886 => Click image for larger version. 

Name:	Screenshot_1.png 
Views:	4 
Size:	24.9 KB 
ID:	24888

    index.cshtml

    @section Anaicerik
    {
        @(X.Viewport()
            .Layout(LayoutType.Border)
            .Items(
                X.Panel()
                    .ID("MENU")
                    .Region(Region.West)
                    .Title("MENÜ")
                    .Frame(true)
                    .Width(200)
                    .ContentFromPartial("~/Views/AnaEkSayfalar/KategoriMenu.cshtml")
                    .Collapsible(true),
    
                 X.TabPanel()
                        .Region(Region.Center)
                        .MarginSpec("5 0 5 5")
                        .Items(
                                        X.Panel()
                                            .Title("Tüm İlanlar")
                                            .Layout(LayoutType.Fit)
                                            .Items(
                                                    X.Panel()
                                                    .Region(Region.Center)
                                                    .BodyPadding(5)
                                                    //içerik linki gelecek
                                        ),
                                         X.Panel()
                                            .Title("Sahibinden")
                                            .Layout(LayoutType.Fit)
                                            .Items(
                                                    X.Panel()
                                                    .Region(Region.Center)
                                                    .BodyPadding(5)
                                                    //içerik linki gelecek
                                        ),
                                          X.Panel()
                                            .Title("Emlak Ofisinden")
                                            .Layout(LayoutType.Fit)
                                            .Items(
                                                    X.Panel()
                                                    .Region(Region.Center)
                                                    .BodyPadding(5)
                                                    //içerik linki gelecek
                                        ),
                                           X.Panel()
                                            .Title("İnşaat Firmasından")
                                            .Layout(LayoutType.Fit)
                                            .Items(
                                                    X.Panel()
                                                    .Region(Region.Center)
                                                    .BodyPadding(5)
                                                    //içerik linki gelecek
                                        ),
                                            X.Panel()
                                            .ID("Banka")
                                            .Title("Bankadan")
                                            
                                            .Layout(LayoutType.Fit)
                                            .Items(
                                                
                                                    X.Panel()
                                                    .Region(Region.Center)
                                                    .BodyPadding(5)
                                                    //içerik linki gelecek
                                        )
    
    
    
                               ),
                                        X.Panel()
                                                .ID("ALTMENU")
                                                .Region(Region.South)
                                                .Title("ALT MENÜ")
                                                .Frame(true)
                                                .Height(200)
                                                .Collapsible(true)
    
                )
    
        )
    kategorimenu.cshtml
    @( X.MenuPanel()
                    .ItemID("Menu")
                    .Width(215)
                    .Border(false)
                    .SelectedIndex(0)
                    .Menu(menu =>
                    {
                        //Menu İtems
    
                    }
    
                    )
    
    )
  4. #4
    Hello! Sorry, I seemed to ignore the MVC part of your question.

    I tried here but didn't see anything particular about using the menu panel with data from the server at all...

    Here's an example with simplified model+controller:

    View code:

    @* Point here to the model data type *@
    @model List<string>
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script>
            var menuItemClick = function (menu, item) {
                if (item) {
                    App.ContentPanel.setHtml(Ext.String.format("Clicked: {0}", item.text));
                }
            };
        </script>
    </head>
    <body>
        <div>
            @Html.X().ResourceManager()
    
            @(
                Html.X().Viewport()
                    .ID("Viewport1")
                    .Layout(LayoutType.Fit)
                    .Items(
                        Html.X().Panel()
                            .Layout(LayoutType.Border)
                            .Items(
                                Html.X().MenuPanel()
                                    .ID("MenuPanel1")
                                    .Region(Region.West)
                                    .Width(125)
                                    .SaveSelection(false)
                                    .Title("Categories")
                                    .Menu(menu => {
                                        // Use the model to populate the menu.
                                        foreach(var entry in Model)
                                        {
                                            menu.Add(Html.X().MenuItem().Text(entry));
                                        }
                                        menu.Listeners.Click.Fn = "menuItemClick";
                                    }),
                                Html.X().Panel()
                                    .ID("ContentPanel")
                                    .Region(Region.Center)
                                    .Title("Contents")
                            )
                    )
            )
        </div>
    </body>
    </html>
    Bundled controller+model (for simplicity)

    public ActionResult c61799_menuPanelFromController()
    {
        // do whatever it takes to populate the data object/model
        var data = new List<string> {
            "Beverages", "Condiments", "Confections", "Dairy Urunler"
        };
    
        return View(data);
    }
    Please take some time to browse our examples explorers, you would find very interesting things you can do with Ext.NET.
    You'll notice the MVC Examples Explorer has less examples than the Webforms Examples Explorer. Examples not on MVC version are straightforward to be written in Razor Syntax so there were not much point on porting all the samples over. Here's the links:
    - WebForms Examples Explorer
    - MVC Examples Explorer

    And here's another thread that might have good advice on how to use MenuPanel with RazorSyntax: Menu Panel, Menu, Menu item not working in ext.net 2.0.

    Please take your time to review our guidelines linked above so you can provide us runnable examples like the one provided above (with model, partial view and layout only when required to reproduce the issue). This way we can understand your problem much better and actually help you with your issue. Providing snippets of code most times just leave us wondering and both suppresses vital information to reproduce the issue and adds unnecessary artifacts to make it much harder to understand what the problem is. And even worse: it can expose proprietary aspects of your code -- what is not the point here on the public forums.

    A great source of simplified samples to base yours from is our examples explorers themselves (linked above). On each example you can click 'sources' button and check up the sources. You can also run the examples explorer on your side, just grab the sources from github and build it.
    - Github sources for Ext.NET Examples - WebForms
    - Github sources for Ext.NET Examples - MVC~

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    After reviewing the topic, maybe long story short, you could complete your kategorimenu.cshtml to:

    @(
        X.MenuPanel()
            .ItemID("Menu")
            .Width(215)
            .Border(false)
            .SelectedIndex(0)
            .Menu(menu =>
            {
                menu.Add(X.MenuItem().Text("Category One"));
                menu.Add(X.MenuItem().Text("Category Two"));
                menu.Add(X.MenuItem().Text("Category Three"));
                menu.Add(X.MenuItem().Text("Category Four"));
            }
        )
    )
    Hope you find this an useful addition to the last follow-up!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Thank you for the help. @fabricio.murta You solved my problem :)

    But

    There will be another responsibility in this regard. I'm happy to help again.

    @model List<Extnetuygulamasi.Models.Kategoriler>
    
    
    @{ 
        Layout = null;
        var X = Html.X();
    }
    
    @(
        X.MenuPanel()
            .ItemID("Menu")
            .Width(215)
            .Border(false)
            .SelectedIndex(0)
            .Menu(menu =>
            {
                foreach (var item in Model)
                {
                    menu.Add(X.MenuItem().Text(item.Kat_AD));
                }
    
            }
        )
    )
    foreach (var item in Model)
                {
                    menu.Add(X.MenuItem().Text(item.Kat_AD));
                }
    When the relevant category is clicked . How can I list the products belonging to that categoryClick image for larger version. 

Name:	Screenshot_8.png 
Views:	5 
Size:	29.4 KB 
ID:	24890
  7. #7
    Hello @Cingozr!

    In the example provided in our first reply, you have an example where you can pass the category to a client-side code. This would apply for calling direct methods, for example.

    You can also pass the category parameter directly to a DirectEvent. Here's an example passing a parameter in a direct event, please check the button with directevent in the code: Ext.NET Buttons - Overview

    More on direct events and methods, check out the examples surrounding this one: Direct Events - Overview (this is a starting point, to get more there are other direct event and method examples when you open this one).

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Jun 06, 2014, 6:09 AM
  2. Replies: 1
    Last Post: Apr 19, 2014, 6:28 PM
  3. Replies: 2
    Last Post: Apr 18, 2014, 4:21 AM
  4. New Category in Ext.NET Community Forums
    By csharpdev in forum Open Discussions
    Replies: 3
    Last Post: Nov 22, 2010, 7:07 AM
  5. Replies: 5
    Last Post: Dec 18, 2009, 9:50 AM

Tags for this Thread

Posting Permissions