[CLOSED] Issue with navigating through the menu

  1. #1

    [CLOSED] Issue with navigating through the menu

    Hi Support,

    I'm using Asp.net MVC and I've Issue with navigating through the menu. If I try to load page using typing URL into browser then it works fine but when navigating though the menu it hits the method on controller but doesn't render the new requested page.

    I guess I'm missing something minor.

    Sample code:

    Layout
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <title>@ViewBag.Title</title>
    
    </head>
    <body>
    @{
        var X = Html.X();
    }
    
    
    @(Html.X().ResourceManager())
    
    @(X.Viewport()
          .Layout(LayoutType.Anchor)
          .Items(
              X.Container()
                  .Border(true)
                  .ID("TopPanel")
                  .Items(
                      X.Toolbar()
                          .ID("ToolBarContent")
                          .Items(
                              X.ComboBox()
                                  .ID("cmbTest1")
                                  .Editable(false)
                                  .Width(300)
                                  .LabelWidth(50)
                                  .MarginSpec("0 5 0 5")
                                  .FieldLabel("Combo1:")
                                  .Items(
                                      new Ext.Net.ListItem("Item 1", "1"),
                                      new Ext.Net.ListItem("Item 2", "2")
                                  )
                          )
                      ,
                      X.Toolbar()
                          .ID("ToolBarMenu")
                          .Items(
                              X.Button()
                                  .ID("MenuGlobalSetupButton")
                                  .Text("Menu")
                                  .Icon(Icon.World)
                                  .Menu(
                                      X.Menu()
                                          .Icon(Icon.ArrowDown)
                                          .Header(false)
                                          .Items(X.MenuItem()
                                              .ID("MenuHomeItem")
                                              .Icon(Icon.BulletWrench)
                                              .Text("Home")
                                              .DirectClickUrl(@Url.Action("Index", "Home")),
                                              X.MenuItem()
                                                  .ID("MenuFooItem")
                                                  .Icon(Icon.BulletWrench)
                                                  .Text("Foo Setup")
                                                  .DirectClickUrl(@Url.Action("Index", "Foo"))
                                          )
                                  )
                          )
                  ),
              X.Hyperlink().Text("Foo").NavigateUrl(Url.Action("Index", "Foo")),
              X.Hyperlink().Text("Home").NavigateUrl(Url.Action("Index", "Home")),
              X.Container()
                  .Width(500)
                  .Content(
                      @<text>
                          @RenderBody()
                       </text>
                  )
          ))
    
    
    
    
    @RenderSection("scripts", required: false)
    </body>
    </html>
    Home Controller
      public class HomeController : Controller
        {
            public ActionResult Index()
            {
                return View();
            }
        }
    Home view - Index
    @{
        ViewBag.Title = "Home";
    }
    <div>
        <h1>Welcome </h1>
        <p>This is a home page.</p>
    </div>
    Foo Model

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Ext.Net;
    using Ext.Net.MVC;
    
    namespace MvcTest.Models
    {
        public class FooModel
        {
            [Field(FieldLabel = "TextField")]
            public string TextValue
            {
                get;
                set;
            }
    
            [Field(FieldLabel = "DateField")]
            public DateTime DateTimeValue
            {
                get;
                set;
            }
    
            [Field(FieldLabel = "ComboBox 1")]
            public ListItem ComboValue1
            {
                get;
                set;
            }
    
            [Field(FieldLabel = "ComboBox 2")]
            public IEnumerable<ListItem> ComboValue2
            {
                get;
                set;
            }
    
            [Field(FieldLabel = "ComboBox 3")]
            public string ComboValue3
            {
                get;
                set;
            }
    
            [Field(FieldLabel = "CheckBox")]
            public bool CheckboxValue
            {
                get;
                set;
            }
    
            [Field(FieldLabel = "NumberField")]
            public int NumberValue
            {
                get;
                set;
            }
    
            [Field(FieldLabel = "MultiSlider")]
            public int[] MultiSliderValue
            {
                get;
                set;
            }
    
            public IEnumerable<ListItem> Data
            {
                get;
                set;
            }
        }
    }
    Foo controller

    using System;
    using System.Web.Mvc;
    using Ext.Net;
    using Ext.Net.MVC;
    using MvcTest.Models;
    
    namespace MvcTest.Controllers
    {
        public class FooController : Controller
        {
    
            public ActionResult Index()
            {
                var model = new FooModel()
                {
                    TextValue = "TextValue",
                    DateTimeValue = DateTime.Now,
                    ComboValue1 = new ListItem("Item 1", "1"),
                    ComboValue2 = new ListItem[]
                    {
                        new ListItem("Item 1", "1"),
                        new ListItem("Item 5", "5")
                    },
                    ComboValue3 = "1",
                    CheckboxValue = true,
                    NumberValue = 1,
                    MultiSliderValue = new int[] { 10, 40, 70 },
    
                    Data = new ListItem[]
                    {
                        new ListItem("Item 1", "1"),
                        new ListItem("Item 2", "2"),
                        new ListItem("Item 3", "3"),
                        new ListItem("Item 4", "4"),
                        new ListItem("Item 5", "5")
                    }
                };
                return View("FooView", model);
    
            }
    
            [HttpPost]
            public ActionResult Index(FooModel model)
            {
                X.Msg.Notify("Saved", "Succesfully saved").Show();
                return this.Direct();
            }
        }
    }
    Foo view
    @model MvcTest.Models.FooModel
    @{
        ViewBag.Title = "Foo";
    }
    
    <h1>Foo</h1>
    
    @(
            Html.X().FormPanel()
                .Layout(LayoutType.Form)
                .Width(350)
                .FieldDefaults(d => { d.LabelWidth = 150; })
                .BodyPadding(10)
                .Frame(true)
                .Items(
                    Html.X().TextFieldFor(m => m.TextValue),
                    Html.X().DateFieldFor(m => m.DateTimeValue),
                    Html.X().ComboBoxFor(m => m.ComboValue1).Items(Model.Data),
                    Html.X().ComboBoxFor(m => m.ComboValue2).Items(Model.Data),
                    Html.X().ComboBoxFor(m => m.ComboValue3).Items(Model.Data),
                    Html.X().CheckboxFor(m => m.CheckboxValue),
                    Html.X().NumberFieldFor(m => m.NumberValue),
                    Html.X().SliderFor(m => m.MultiSliderValue)
                )
                .Buttons(
                    Html.X().Button()
                        .Text("Save")
                        .Icon(Icon.Disk)
                        .FormBind(true)
                        .DirectEvents(de =>
                        {
                            de.Click.Url = Url.Action("Index");
                            de.Click.Method = HttpMethod.POST;
                            de.Click.EventMask.ShowMask = true;
                            de.Click.EventMask.CustomTarget = "App.MainContent";
                        }))
          )

    Thanks
    Last edited by fabricio.murta; Dec 21, 2016 at 9:16 PM.
  2. #2
    Hello @fahd!

    From the example you sent I can be very wary about third-party stuff like the scripts you link to it. Are they required to reproduce the issue?

    If not, can you simplify your test case, is it required a layout file at all?

    At least these lines should not be required and may just avert us from focusing on the issue:

        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    (...)
    @Scripts.Render("~/bundles/jquery")
    Do we really need bootstrap, jquery and modernizr to reproduce the issue? If so, I can only put the guilt on the 3rd party tools/frameworks. But it would be good which exactly of those tools are making the sample fail and narrow the test case to a bare minimum, there are just too many aspects to look after...
    Fabrício Murta
    Developer & Support Expert
  3. #3

    Updated sample code

    Hi Fabricio,

    I've removed that third party JavaScript library and updated the sample code. And yes I want to have Layout page because that where I'll be placing all my navigational(e.g. Menu) controls.

    Thanks
  4. #4
    Hello @fahd!

    I believe there's a little confusion with partial views or just redirecting to other pages using the same layout. You should either make the menu a JavaScript code to redirect to the address you want (much like the direct links does) or set up a special controller making the redirect. Or alternatively use actual partial views -- what will prevent you from directly opening the views.

    For instance, you could create a redirect action like this:

    public ActionResult c61672_RedirectHere()
    {
        X.Redirect(Url.Action("c61672_Index"));
        return this.Direct();
    }
    Then call those actions from your code instead of just putting view urls on the actions.

    Just for simplicity, you could replace: .DirectClickUrl(@Url.Action("c61672_RedirectHere", "home"))

    with: .DirectClickAction("c61672_RedirectHere", "foo")

    Thus, each menu entry will have, respectively:

    .DirectClickAction("c61672_RedirectHere", "home")
    .DirectClickAction("c61672_RedirectHere", "foo")
    I add the c61672_ prefix to the actions so that I don't get conflicting samples in my test bench project. The 'c' is just a char as class names or variables can't begin with a number, and the number is the ID of this thread (61672).

    Hope this helps. If you are interested in partial views and is having issues using it, maybe we would better discuss it in a new thread, as those subjects tend to extend thru several pages of forum posts.

    About partial views, we have examples (just to mention one) and several threads with questions regarding their usage in MVC, so if you're wondering about this I'd suggest you take a look on the examples first, try to build something, and then several (if not all) questions you may have about it are potentially already replied to in forums.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thanks Fabricio,

    One of the most common and basic purpose of menu is Navigation. Then for this simple purpose why do I have to go through all this hacks ? If you look into sample code, I've added Hyperlink for testing that's what I want to achieve in menu items. Can Ext.Net menu can do that?

    Thanks
  6. #6

    Resolved

    Found out what I was missing,

    Instead of
    .DirectClickUrl(@Url.Action("Index", "Home"))
    Used
    .Href(@Url.Action("Index", "Home"))
    Now Browser directs happens as expected. Thanks
  7. #7
    Glad you could find the way you needed it to work! Using just a .Href is really the intended way if you just want it to work like an hyperlink. Guess I didn't get you needed just such a simple solution. :)
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Toolbar with Menu issue
    By Z in forum 4.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 13, 2016, 2:54 PM
  2. [CLOSED] Menu Issue in IE7
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 21, 2015, 2:12 PM
  3. [CLOSED] Not able to see the Navigating Buttons' Icons
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 13, 2014, 5:43 AM
  4. [CLOSED] Modified Grid Data not Retains when navigating through page
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Nov 16, 2011, 9:23 AM
  5. [CLOSED] Keyboard support in navigating Editor Grid Panel
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 15, 2009, 4:14 PM

Posting Permissions