[CLOSED] Panel in portal not updating content

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Panel in portal not updating content

    Hi

    I am trying to dynamically load content into the panel based on the "Portal Template" provided in the Ext.net exampled page. I am following the load method provided whereby a component loader is created srver side and a this.direct() is returned but the panel does not update with the desired content. If I load the page with a static component loader it does however work. Can you please advise.

    I have attached the View and necessary controller code in the attachments. The method I am having a problem with is the "LoadContent" method of the PortalController Class. You will see in the view code I dynamically give the content panels id's since they are constructed from a model.

    View below with the method generateTabPanel() which dynamically generates tabs and associated menus. The controller code is below the view.

    @using Ext.Net.Utilities
    @model GemsFraudManagementTool.Models.PortalModel
    @{
        Layout = null;
        var X = Html.X();
    }
    
    @* ReSharper disable once SuggestVarOrType_SimpleTypes *@
    @functions
    {
    
    
        private List<Panel> GenerateTabPanel()
        {
            var panels = new List<Panel>();
    
            foreach (var tab in Model.TabElements.OrderBy(x => x.Ordinal))
            {
                var panel = new Panel {Title = tab.DisplayName, Layout = LayoutType.HBox.ToString()};
                panel.LayoutConfig.Add(new HBoxLayoutConfig() {Align = HBoxAlign.Stretch});
    
        //now generate menu items for specific  tab
                var menuItems = new List<MenuItem>();
                string contentPanelId = string.Format("{0}_contentPanel", tab.Ordinal);
    
                foreach (var menuElement in tab.MenuElements.OrderBy(x => x.Ordinal))
                {
                    var menuItem = new MenuItem() {Text = menuElement.DisplayName};
                    menuItem.DirectEvents.Click.Url = Url.Action("LoadContent");
                    menuItem.DirectEvents.Click.ExtraParams.Add(new Parameter("url", menuElement.Url));
                    menuItem.DirectEvents.Click.ExtraParams.Add(new Parameter("mainComponentPanelId", contentPanelId));
                    menuItems.Add(menuItem);
                }
    
                var menuPanel = new MenuPanel {Width = 215, Border = false, SelectedIndex = 0};
                menuPanel.Menu.Add(menuItems);
                menuPanel.Collapsible = true;
                menuPanel.CollapseDirection = Direction.Left;
    
                var contentPanel = new Panel
                {
                    Flex = 1, Border = false, Header = false, ID = contentPanelId
                };
                //contentPanel.Loader = new ComponentLoader() {Url = Url.Action("Index", "Providers"), 
                //    DisableCaching = true, AutoLoad = true};
                //contentPanel.Html = String.Format("Content panel with id {1} added at: {0}",DateTime.Now,contentPanelId);
                
                //contentPanel.LoadContent("Providers",true);
    
                panel.Items.Add(menuPanel);
                panel.Items.Add(contentPanel);
    
    
                panels.Add(panel);
            }
    
            return panels;
        }
    
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width"/>
        <title></title>
        <script></script>
    </head>
    <body>
    @(X.ResourceManager())
    @(X.Viewport()
          .Layout(LayoutType.VBox)
          .LayoutConfig(new VBoxLayoutConfig {Align = VBoxAlign.Stretch})
          .Items(
              X.Panel()
                  .ItemID("north")
                  //.Height(150)
                  .Header(false)
                  .Border(false)
                  .TopBar(
                      X.Toolbar().Items(items =>
                      {
                          items.Add(new ToolbarTextItem {Text = "You are logged in as:"});
                          items.Add(new Hyperlink {Text = "Jack Smith"});
    
                          items.Add(new ToolbarSpacer());
                          items.Add(new ToolbarSeparator());
                          items.Add(new ToolbarSpacer());
    
                          items.Add(new Hyperlink {Text = "Logout"});
    
                          items.Add(new ToolbarSpacer());
                          items.Add(new ToolbarSeparator());
                          items.Add(new ToolbarSpacer());
    
                          items.Add(new Hyperlink {Text = "My Profile"});
    
                          items.Add(new ToolbarSpacer());
                          items.Add(new ToolbarSeparator());
                          items.Add(new ToolbarSpacer());
    
                          items.Add(new Hyperlink {Text = "Messages (3)"});
    
                          items.Add(new ToolbarSpacer());
                          items.Add(new ToolbarSeparator());
                          items.Add(new ToolbarSpacer());
    
                          items.Add(new Hyperlink {Text = "Help"});
    
                          items.Add(new ToolbarFill());
    
                          items.Add(new Button
                          {
                              Text = "My Account",
                              MarginSpec = "0 20 0 0",
                              Listeners =
                              {
                                  Click =
                                  {
                                      Handler = "Ext.Msg.alert(Ext.getBody().getSize().width.toString());"
                                  }
                              },
                              Menu =
                              {
                                  new Menu
                                  {
                                      Items =
                                      {
                                          new MenuItem {Text = "Settings", Icon = Icon.Cog},
                                          new MenuItem {Text = "About", Icon = Icon.Information}
                                      }
                                  }
                              }
                          });
                      }
                          )
                  )
                  .Layout(LayoutType.Card)
                  .Items(
                      X.Container()
                          .Layout(LayoutType.HBox)
                          .LayoutConfig(new HBoxLayoutConfig {Align = HBoxAlign.Middle})
                          .Items(items => { items.Add(new Image {ImageUrl = "~/Resources/Portal/GEMS-logo.jpg", Width = 142, Height = 100}); }
                          )
                  ),
              X.TabPanel()
                  .Flex(1)
                  .ActiveTabIndex(1)
                  .Items(GenerateTabPanel())
          ))
    </body >
    </
    html>
    Controller Code

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Ext.Net;
    using Ext.Net.MVC;
    using GemsFraudManagementTool.Models;
    
    namespace GemsFraudManagementTool.Controllers
    {
        public class PortalController : Controller
        {
            // GET: Portal
            public ActionResult Index()
            {
                return View(PortalModel.InitializePortalModel());
            }
    
            public ActionResult LoadContent(string url,string mainComponentPanelId)
            {
    
                var panel = X.GetCmp<Panel>(mainComponentPanelId);
                //panel.Html = DateTime.Now.ToLongTimeString();
    
                var componentLoader = new ComponentLoader();
                componentLoader.DisableCaching = true;
                componentLoader.Url = Url.Action("Index", "Providers");
                componentLoader.LoadMask.ShowMask = true;
                componentLoader.SuspendScripting();
    
                panel.Loader = componentLoader;
                panel.LoadContent();
               
                
                return this.Direct();
            }
        }
    }
    Last edited by fabricio.murta; Jul 14, 2017 at 4:11 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @fesuban!

    Your code sample is looking great! But we are missing the model and some mock data to it. Would you be as kind as to provide these missing bits?
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Sure apologies for this. Below the Portal model with some dummy initialization data.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Ext.Net;
    using GemsFraudManagementTool.Models._PortalModel;
    
    namespace GemsFraudManagementTool.Models
    {
        public class PortalModel
        {
            public List<TabElements> TabElements;
    
            public PortalModel()
            {
            }
    
            public PortalModel(List<TabElements> tabElements)
            {
                TabElements = tabElements;
            }
    
            /// <summary>
            /// This method should only be used for testing and initializes a test set of data for the view
            /// </summary>
            /// <returns>PortalModel</returns>
            public static PortalModel InitializePortalModel()
            {
                List<TabElements> tabElements = new List<TabElements>()
                {
                    new TabElements(displayName: "Manage users", menuElements: new List<MenuElements>()
                    {
                        new MenuElements(displayName: "Add user", url: "https://erazerbrecht.wordpress.com/2015/06/11/sqlite-entityframework-6-tutorial/", ordinal: 1),
                        new MenuElements(displayName: "Disable user", url: "~/Providers", ordinal: 2),
                        new MenuElements(displayName: "Edit user", url: "~/Providers", ordinal: 3),
                        new MenuElements(displayName: "Add company", url: "~/Providers", ordinal: 4)
                    }, ordinal: 1
                        ),
                    new TabElements(displayName: "Manage providers", menuElements: new List<MenuElements>()
                    {
                        new MenuElements(displayName: "View providers", url: "~/Providers", ordinal: 1),
                        new MenuElements(displayName: "Add provider", url: "~/Providers", ordinal: 2),
                        new MenuElements(displayName: "Edit provider", url: "~/Providers", ordinal: 3)
                    }, ordinal: 2
                        )
                };
    
                return new PortalModel(tabElements);
            }
        }
    }
  4. #4
    Hello @fesuban!

    Only by reading your last post's code I can see we still miss the TabElements and MenuElements definitions. Or did I miss something? I could try and guess what they need to have but, in turn I would be giving it chances for a wrong guess and not reproducing your case correctly here.

    I hope you understand!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Sure no problem. The main issue for me though is being able to load the content panel dynamically. Below is the class definitions for the tab and menu elements.

    using System.Collections.Generic;
    
    namespace GemsFraudManagementTool.Models._PortalModel
    {
        public class TabElements
        {
            public string DisplayName { get; set; }
    
            public List<MenuElements> MenuElements { get; set; }
    
            public int Ordinal { get; set; }
    
            public TabElements(string displayName, List<MenuElements> menuElements, int ordinal)
            {
                DisplayName = displayName;
                MenuElements = menuElements;
                Ordinal = ordinal;
            }
        }
    }
    And then menu elements

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    
    namespace GemsFraudManagementTool.Models._PortalModel
    {
        public class MenuElements
        {
            public string DisplayName { get; set; }
            
            public string Url { get; set; }
    
            public int Ordinal { get; set; }
    
            public MenuElements(string displayName, string url,int ordinal)
            {
                DisplayName = displayName;
                Url = url;
                Ordinal = ordinal;
            }
        }
    }
    Please let me know if you require anything further.

    Thanks
  6. #6
    Hello @fasuban!

    With the class definitions I could build it but I get warnings in the GenerateTabPanel() function.

    But reviewing your first post, I can see you mentioned a "portal template" example. Is that an example in our Examples Explorer? I'm missing Ext.Net.Portal and related components' references in your test case, so I'm even unsure what you mean with the "portal" concept (if that's the portal component or just the website portal concept).

    If I run the code, I get errors as 1_contentPanel is an invalid ID. You probably want to use something like contentPanel{0} on your code, view line 24?

    As per your issue, all you would need as a test case would be a panel with a loader, so all this tab panel and view is not related to the issue at all? If so, we shouldn't be spending time in figuring out how to run this, but maybe a simple fixed panel with a loader should do, right?

    In other words the only relevant part of code here would be this:

    var contentPanel = new Panel
    {
        Flex = 1, Border = false, Header = false, ID = contentPanelId
    };
    //contentPanel.Loader = new ComponentLoader() {Url = Url.Action("Index", "Providers"), 
    //    DisableCaching = true, AutoLoad = true};
    //contentPanel.Html = String.Format("Content panel with id {1} added at: {0}",DateTime.Now,contentPanelId);
    
    //contentPanel.LoadContent("Providers",true);
    Right?
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Yep the POrtal refers to the Ext 4.0 MVC portal examples page. the main portion of the code that I need help with is the LoadContent method which adds a ComponentLoader. What I basically want to do is when a user clicks a menu item it must load the relevant URL into the content Panel. The "AddUser" button for example does not load the external website "https://erazerbrecht.wordpress.com/2015/06/11/sqlite-entityframework-6-tutorial/" even i use frame loader mode. I am not sure why though
  8. #8
    Hi @fesuban! Thanks for the clarifications.

    Is not this exactly what you want to do? Panel - Basic - Loader.

    If that's true, I see that you are missing the step to make the panels with a Loader initially set up. When the code behind is called, it assumes the panel already has a loader set up. So you ought to uncomment the lines 44 and 45 on your view code and set up the loader at that point. Also specify its mode as LoadMode.Frame.

    Something like this should do:

    contentPanel.Loader = new ComponentLoader()
    {
        Url = "",
        Mode = LoadMode.Frame,
        AutoLoad = false
    };
    You may leave this with an initial URL to load and drop the AutoLoad = false line, so that the two tabs have an initial loaded content (for example a static page telling what each option to the menu does).

    I've created a simple view here named c61992_innerPage with

    @{
        Layout = null;
        var X = Html.X();
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <script></script>
    </head>
    <body>
        Inner Page [@(Request.Params["what"])]
    </body>
    </html>
    So I could just see what link I clicked if I had the model changed to this:

    new TabElements(displayName: "Manage users", menuElements: new List<MenuElements>()
    {
        new MenuElements(displayName: "Add user", url: "c61992_innerPage?what=addUser", ordinal: 1),
        new MenuElements(displayName: "Disable user", url: "c61992_innerPage?what=disableUser", ordinal: 2),
        new MenuElements(displayName: "Edit user", url: "c61992_innerPage?what=editUser", ordinal: 3),
        new MenuElements(displayName: "Add company", url: "c61992_innerPage?what=addCompany", ordinal: 4)
    }, ordinal: 1
        ),
    new TabElements(displayName: "Manage providers", menuElements: new List<MenuElements>()
    {
        new MenuElements(displayName: "View providers", url: "c61992_innerPage?what=viewProviders", ordinal: 1),
        new MenuElements(displayName: "Add provider", url: "c61992_innerPage?what=addProvider", ordinal: 2),
        new MenuElements(displayName: "Edit provider", url: "c61992_innerPage?what=editProvider", ordinal: 3)
    }, ordinal: 2
    (adapted from your InitializePortalModel() code)

    And it worked fine.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  9. #9
    For some reason my LoadContent in Controller method still does not change the content of the panel. Can I send you my VS solution somehow to speed up the process?
  10. #10
    Hello @fesuban!

    About sending a project with the code, I'm afraid we've scraped that away as it always slowed down the process instead. Usually projects contains lots of unrelated code, we end up getting troubles where there isn't and there's a lot of context to understand before we can get to the actual problem. That's why simplified test cases that can be shared here in [code][/code] blocks are the way to go.

    Notice the importance of the Mode=Frame during the components' instantiation. It won't load anything, at most trigger an error, unless you did that.

    I will share back the whole how my side of the solution looked like, in hopes that would help:

    Model: c61992_dynPortalMdl.cs
    using System.Collections.Generic;
    
    namespace ExtNetPlaygroundMVC4_NuGet.Models.c61992_dynPortalMdl
    {
        public class PortalModel
        {
            public List<TabElements> TabElements;
    
            public PortalModel()
            {
            }
    
            public PortalModel(List<TabElements> tabElements)
            {
                TabElements = tabElements;
            }
    
            /// <summary>
            /// This method should only be used for testing and initializes a test set of data for the view
            /// </summary>
            /// <returns>PortalModel</returns>
            public static PortalModel InitializePortalModel()
            {
                List<TabElements> tabElements = new List<TabElements>()
            {
                new TabElements(displayName: "Manage users", menuElements: new List<MenuElements>()
                {
                    new MenuElements(displayName: "Add user", url: "c61992_innerPage?what=addUser", ordinal: 1),
                    new MenuElements(displayName: "Disable user", url: "c61992_innerPage?what=disableUser", ordinal: 2),
                    new MenuElements(displayName: "Edit user", url: "c61992_innerPage?what=editUser", ordinal: 3),
                    new MenuElements(displayName: "Add company", url: "c61992_innerPage?what=addCompany", ordinal: 4)
                }, ordinal: 1
                    ),
                new TabElements(displayName: "Manage providers", menuElements: new List<MenuElements>()
                {
                    new MenuElements(displayName: "View providers", url: "c61992_innerPage?what=viewProviders", ordinal: 1),
                    new MenuElements(displayName: "Add provider", url: "c61992_innerPage?what=addProvider", ordinal: 2),
                    new MenuElements(displayName: "Edit provider", url: "c61992_innerPage?what=editProvider", ordinal: 3)
                }, ordinal: 2
                    )
            };
    
                return new PortalModel(tabElements);
            }
        }
    
        public class TabElements
        {
            public string DisplayName { get; set; }
    
            public List<MenuElements> MenuElements { get; set; }
    
            public int Ordinal { get; set; }
    
            public TabElements(string displayName, List<MenuElements> menuElements, int ordinal)
            {
                DisplayName = displayName;
                MenuElements = menuElements;
                Ordinal = ordinal;
            }
        }
    
        public class MenuElements
        {
            public string DisplayName { get; set; }
    
            public string Url { get; set; }
    
            public int Ordinal { get; set; }
    
            public MenuElements(string displayName, string url, int ordinal)
            {
                DisplayName = displayName;
                Url = url;
                Ordinal = ordinal;
            }
        }
    }
    Main view (open this one on web browser!): c61992_panelLoader.cshtml
    @model ExtNetPlaygroundMVC4_NuGet.Models.c61992_dynPortalMdl.PortalModel
    @{
        Layout = null;
        var X = Html.X();
    }
    @functions
    {
        private List<Panel> GenerateTabPanel()
        {
            var panels = new List<Ext.Net.Panel>();
    
            foreach (var tab in Model.TabElements.OrderBy(x => x.Ordinal))
            {
                var panel = new Panel { Title = tab.DisplayName, Layout = LayoutType.HBox.ToString() };
                panel.LayoutConfig.Add(new HBoxLayoutConfig() { Align = HBoxAlign.Stretch });
    
                //now generate menu items for specific  tab
                var menuItems = new List<MenuItem>();
                string contentPanelId = string.Format("contentPanel{0}", tab.Ordinal);
    
                foreach (var menuElement in tab.MenuElements.OrderBy(x => x.Ordinal))
                {
                    var menuItem = new MenuItem() { Text = menuElement.DisplayName };
                    menuItem.DirectEvents.Click.Url = Url.Action("c61992_LoadContent");
                    menuItem.DirectEvents.Click.ExtraParams.Add(new Parameter("url", menuElement.Url));
                    menuItem.DirectEvents.Click.ExtraParams.Add(new Parameter("mainComponentPanelId", contentPanelId));
                    menuItems.Add(menuItem);
                }
    
                var menuPanel = new MenuPanel { Width = 215, Border = false, SelectedIndex = 0 };
                menuPanel.Menu.Add(menuItems);
                menuPanel.Collapsible = true;
                menuPanel.CollapseDirection = Direction.Left;
    
                var contentPanel = new Panel
                {
                    Flex = 1,
                    Border = false,
                    Header = false,
                    ID = contentPanelId
                };
                contentPanel.Loader = new ComponentLoader()
                {
                    Url = "",
                    Mode = LoadMode.Frame,
                    AutoLoad = false
                };
    
                panel.Items.Add(menuPanel);
                panel.Items.Add(contentPanel);
    
    
                panels.Add(panel);
            };
    
            return panels;
        }
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <script></script>
    </head>
    <body>
        @(X.ResourceManager())
        @(X.Viewport()
            .LayoutConfig(new VBoxLayoutConfig { Align = VBoxAlign.Stretch })
            .Items(
                X.Panel()
                    .ItemID("north")
                    //.Height(150)
                    .Header(false)
                    .Border(false)
                    .TopBar(
                        X.Toolbar().Items(items =>
                        {
                            items.Add(new ToolbarTextItem { Text = "You are logged in as:" });
                            items.Add(new Hyperlink { Text = "Jack Smith" });
    
                            items.Add(new ToolbarSpacer());
                            items.Add(new ToolbarSeparator());
                            items.Add(new ToolbarSpacer());
    
                            items.Add(new Hyperlink { Text = "Logout" });
    
                            items.Add(new ToolbarSpacer());
                            items.Add(new ToolbarSeparator());
                            items.Add(new ToolbarSpacer());
    
                            items.Add(new Hyperlink { Text = "My Profile" });
    
                            items.Add(new ToolbarSpacer());
                            items.Add(new ToolbarSeparator());
                            items.Add(new ToolbarSpacer());
    
                            items.Add(new Hyperlink { Text = "Messages (3)" });
    
                            items.Add(new ToolbarSpacer());
                            items.Add(new ToolbarSeparator());
                            items.Add(new ToolbarSpacer());
    
                            items.Add(new Hyperlink { Text = "Help" });
    
                            items.Add(new ToolbarFill());
    
                            items.Add(new Button
                            {
                                Text = "My Account",
                                MarginSpec = "0 20 0 0",
                                Listeners =
                                {
                                    Click =
                                    {
                                        Handler = "Ext.Msg.alert(Ext.getBody().getSize().width.toString());"
                                    }
                                },
                                Menu =
                                {
                                    new Menu
                                    {
                                        Items =
                                        {
                                            new MenuItem {Text = "Settings", Icon = Icon.Cog},
                                            new MenuItem {Text = "About", Icon = Icon.Information}
                                        }
                                    }
                                }
                            });
                        }
                    )
                )
                .Layout(LayoutType.Card)
                .Items(
                    X.Container()
                        .Layout(LayoutType.HBox)
                        .LayoutConfig(new HBoxLayoutConfig { Align = HBoxAlign.Middle })
                        .Items(items => { items.Add(new Image { ImageUrl = "~/Resources/Portal/GEMS-logo.jpg", Width = 142, Height = 100 }); }
                        )
                ),
                X.TabPanel()
                    .Flex(1)
                    .ActiveTabIndex(1)
                    .Items(GenerateTabPanel())
            )
        )
    </body>
    </html>
    Internal panels' view (will be opened by loader): c61992_innerPage.cshtml
    @{
        Layout = null;
        var X = Html.X();
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <script></script>
    </head>
    <body>
        Inner Page [@(Request.Params["what"])]
    </body>
    </html>
    Controller (with code for both views and LoadContent action): c61992_panelLoader.cs
    using Ext.Net;
    using Ext.Net.MVC;
    using System.Web.Mvc;
    
    namespace ExtNetPlaygroundMVC4_NuGet.Controllers
    {
        public partial class issuesController : Controller
        {
            public ActionResult c61992_panelLoader() { return View(Models.c61992_dynPortalMdl.PortalModel.InitializePortalModel()); }
    
            public ActionResult c61992_LoadContent(string url, string mainComponentPanelId)
            {
                var panel = X.GetCmp<Panel>(mainComponentPanelId);
                //panel.Html = DateTime.Now.ToLongTimeString();
    
                var componentLoader = new ComponentLoader();
                componentLoader.DisableCaching = true;
                componentLoader.Url = url;
                componentLoader.LoadMask.ShowMask = true;
                componentLoader.SuspendScripting();
    
                panel.Loader = componentLoader;
                panel.LoadContent();
    
                return this.Direct();
            }
    
            public ActionResult c61992_innerPage() { return View(); }
        }
    }
    Notice the contoller is named after issues so I access it via the /issues/c61992_panelLoader URL.

    Maybe I changed something else I didn't notice while comparing back with your version of the test case. MVC test cases tend to be more problematic due to the required changes in namespacing and such while running them. But the code consistently works. Each menu enry you click you'll see the different content loaded to the respective tabs' panels.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Aug 30, 2013, 2:49 PM
  2. [CLOSED] How to change and save Portal control's content ??
    By wangyi in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 19, 2013, 1:19 AM
  3. [CLOSED] Updating window content
    By borja_cic in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 15, 2011, 6:04 PM
  4. Updating Portlet content in DirectMethod
    By kotrao in forum 1.x Help
    Replies: 2
    Last Post: Aug 23, 2011, 6:27 AM
  5. Replies: 1
    Last Post: Jul 23, 2009, 3:57 AM

Posting Permissions