Possbile issues with the asp.net mobile helpers and ServerNavigation

[Nicklas]

Hi,

I'd like to report a few possible issues with the asp.net mobile framework. I'm saying possible, as I'm not sure if my application is setup completely correctly.

1.  Whenever my .ServerNavigation is set to true, the transitions between views (i.e. "fade") stops working. It just flicks between pages without any effect.
2. I'm trying to implement a drawer in one of my views, but this does not seem to work either when the .ServerNavigation is set to false. It seems to duplicate my url, so that the application does not quite understand where to navigate. I.e. when ServerNavigation is set to true, my links look like the following: "http://localhost/Stimline.Xplorer.Mobile/UnitDetails/Index/1#/". Both the drawer and "back" button seems to work correctly with this in place. Now, if i change my ServerNavigation to false, the link will look like the followng after presssing the "back" button once and navigate back to the view again with a link: "http://localhost/Stimline.Xplorer.Mobile/UnitDetails/Index/1#/Stimline.Xplorer.Mobile/UnitDetails/Index/1". As a result of this, both my drawer and "back" button stops working.

Here's my MobileApplication() as defined in my shared _Layout.cshtml:

@(Html.Kendo().MobileApplication()
.ServerNavigation(false)
          .Transition("fade")
          .HideAddressBar(true)
          .Skin("flat")
          )

And here's my "drawer" layout:

@(Html.Kendo().MobileLayout()
       .Name("drawer-layout")
       .Header(obj =>
            Html.Kendo().MobileNavBar()
                .Content(navbar =>
                    @<text>
                    @(Html.Kendo().MobileButton()
                            .Align(MobileButtonAlign.Left)
                            .Icon("drawer-button")
                            .Rel(MobileButtonRel.Drawer)
                            .Url("#my-drawer")
                    )

                    @navbar.ViewTitle("")

                         @(Html.Kendo().MobileButton()
                            .Align(MobileButtonAlign.Right)
                            .Text("Back")
                            .HtmlAttributes(new { @class = "nav-button" })
                            .Url(Url.RouteUrl(new { controller = "home" }))
                    )

                </text>)
        )
      )

[Alexander Valchev]

Hello Nicklas,

Up to your questions:

1. The behavior which you described is expected. Enabling server navigation will affect the user experience. This happens because the page completely reloads, as a result the application state is not being transferred to the next view.
   
   If you would like to improve the user experience and use transitions, please consider to work with Ajax navigation.
   
   
2. Drawer widget is designed to work with local or loaded via Ajax Views. Using server navigation for Drawer's Views does not make much sense. The drawer URL is not supposed to be appended to the window location. You can check this on our demos:

• http://demos.kendoui.com/mobile/m/index.html#index (find drawer section in the ListView)
  
  

Could you please provide a small sample that isolates the issue? In this way I will be able to examine your current implementation in details and advice you further.

Regards,
Alexander Valchev
Telerik

[Nicklas]

Hi Alexander!

Thanks for your suggestions! I've prepared a small sample application and removed all functionality besides the neccesary views and controllers. Could you please take a look at it, and get back to me with comments on what might be wrong / up for improvement?

Using the application attached results in this for me: (I'm testing this in a desktop browser and on mobile)

1. When navigating to the UnitDetails-view, my drawer does not work. If I want it to work, I have to remove the "/Index/" part of the url and refresh the page.
2. When getting the drawer to work, as mentioned above, and select an item in the menu, the drawer seems to close, reopen and close really quickly. Just as if it gets reloaded or something.
3. Third and lastly, if you try this on a mobile device, you'll notice that the listview in UnitDetails is unstable. It moves the entire view, as I mention in my post here.

Hopefully you can get back to me with a solution to this, as this has taken me days and a lot of hours to figure out :)

Also, I should mention that I do initialize a second application in another shared "AnonymousUserLayout" for a login screen. The layout changes whenever the user is authorized and logged in. Just thought I'd mention it, even though it most likely don't have anything to do with this. Please let me know if you have any questions :) I'm also available at Skype: nicklas.winger at 8 AM to 4 PM (GMT+2) monday - friday.

[Alexander Valchev]

Hi Nicklas,

Thank you for the sample project.

The issues you experienced are connected with the way mobile app components are initialized.
The drawer is not appearing, because it is not associated with the correct View ID. Do you really want to limit the Views where drawer can be revealed? If you want the drawer to be available on all Views you should omit the views configuration.

In the other case, you should use the relative path of the remote View, not its original ID.

.Views("unit-list", "drawer-starred") //old
.Views("/UnitDetails/Index", "drawer-starred") //please use the relative path

The visual glitch that you noticed when navigation is caused by the View transitions. If you plan to use the Drawer for navigation purposes please disable the View transitions in the application configuration.

@(Html.Kendo().MobileApplication()
  .ServerNavigation(false)
  .PushState(true)
  //.Transition("fade")
  .HideAddressBar(true)
  .Skin("flat")
)

Actually this information was missing from the documentation. I added it to the Drawer's overview topic:

• http://docs.kendoui.com/getting-started/mobile/drawer
  
  

Please accept my apology for the inconvenience caused.

Regards,
Alexander Valchev
Telerik

[Nicklas]

Hi Alexander,

Thank you for the suggestions! 

Well, we don't really need the drawer in more than one view. This is due to the fact that the "/Home/Index/" view is just a list of units one should be able to navigate to. Once navigated to a unit ("/UnitDetails/Index") one should be able to interact with the drawer. In this case, switch between different views that displays the information about a unit in different ways. 

So, if I understand you correctly, I'd have to implement an action for each view if I'm to use relative paths?
I.e.:
.Views("/UnitDetails/Index", "/UnitDetails/SpeedView", "/UnitDetails/DepthView") ?

I was under the impression that the drawer just navigated between "divs" with an id of "#speed-view", "#depth-view" etc. within the same page?
So, I guess what I'm saying is that there's no need to navigate between different controllers from the drawer, just within "UnitDetails" and it's different views. Question is how to make it work properly.  Is my suggestion above the way to go, or should I keep the different views in the "/UnitDetails/Index.cshtml" file and use the anchors (#) for navigation?

Oh, also while I'm at it, I should mention that the use of "NativeScrolling" interferes with the drawer functionality when scrolling horizontally :)

No need to apoligize! Always appreciate your help! :)

[Petyo]

Hello Nicklas,

I am sorry for the delayed answer. You can still keep the views in the current structure as is. However, the first view from the ones available in the response returned by /UnitDetails/Index.cshtml is treated a bit differently from the rest - it receives and id of /UnitDetails/Index", in order to be treated as the corresponding remote view for this URL. 

In a nutshell, your views list should look something like:

"/UnitDetails/Index", "#speed-view", "#depth-view"

The first one covering the initial remote view, while the rest pointing to the secondary views loaded (which are treated as local views). 

Please let us know in case these directions are not clear enough. 

Regards,
Petyo
Telerik