Avoid re-display of menu using MVC - ajax

My team is creating an MVC4 application which has an upper menu structure that contains menu items specific for the currently logged-in user, and displays the content for the selected menu item below. The menus are displayed in a partial view "_MainMenu" and the MainMenuController Index action is responsible for getting the menu data from the database and returning the menu partial view. The main layout "_Layout" renders the menu by calling #Html.Action("Index", "MainMenu").
We want to avoid hitting the database to get the menu structure data every time the page is refreshed, and we also ideally want to avoid any visible reload of the menu structure when a different menu item is selected.
I've been looking into AJAX, and I've implemented something where selecting a new menu item will load the content for that item below the menu by replacing a div with ID="mainContent" with the content as a partial view (this div lives on the loaded view "MainContent"). In this way, the menu is never re-loaded and the page never refreshes completely (only the different partial content views are swapped in and out as different menu items are selected).
This solution works, but I'm not sure if it's really best practice, or if there's a better solution involving caching. One of the problems with the AJAX solution is the URL never changes from "http://MySite/MainContent". This means that clicking the Back button on the browser doesn't work as expected, and also hitting F5 to refresh the browser page loses the currently displayed page. The refresh issue can probably be resolved by remembering the selected menu item, but I'm still not convinced this isthe way AJAX was intended to be used.
Can someone please tell me if they think caching would be a better solution for this scenario based on their experience.

If the user's menu items are not likely to change, then you could use a simple static Dictionary (the long is the user id) to cache the data in the backend, and refresh it periodically.
Generally, if you do any caching you have to make sure the cached data gets refreshed when underlying data is updated. Therefore it's only simple and safe if you have only one app accessing your DB. If there are multiple apps, then you'll have to add a mechanism to keep the cache in sync.
In project I'm working on we've stored User-Role-Module entities and relationships in DB, and bound module permissions to roles rather than users. Since role permissions aren't likely to change, they're safe to cache.

Related

Binding updates to shell component pages delayed

So I have a Shell that has a home page and a settings page.
The settings page makes changes to a singleton service that the home's ViewModel is binded to (MVVM).
I have set up break points on the PropertyChangedEvents of elements on the Home page and they hit as soon as changes are made to the service's properties and their PropertyChanged is executed.
However, upon going back to the home page via the Shell, the page's UI only updates when the page is active and visible. This causes fields to flash when they change. But the breakpoints suggest that they should have updated before.
Is there a way to force refresh the UI before or are there any other alternatives?
For now I have made my view perform a Fade In animation so that changes to the ViewModel don't cause flashing.
Even I have a Xamarin Forms Shell app, and I also had the same issue, So what you can do is, Make the common properties Global as in make those properties in App.xaml.cs and mark them as static.
So when the User changes the property on settings change the App.PropertyName.
Then on the OnApearing method of homepage call a method on the ViewModel say LoadDataValues() and read the App.PropertyName and modify the UI as needed.
What this will do is just before the HomePage appears it will keep the UI of HomePage ready.
Let me know if you have further issues.

Spring MVC jsp view

To design views that each jsp views have common navigation menu ( a treetable, when clicking on a tree node it navigates to another page) what is a good approach for this?
Adding a new node to navigation menu will effect all pages.
Navigation menu tree nodes will be populated from db (a menu table on db)
Is it possible to cache menu view on client so navigation menu will not be populated each time user navigates another page?
Thank you
There are two separate questions asked in the post, I will answer them accordingly:
1) I would recommend using a Template Engine which integrates with JSPs.
Apache Tiles fits in this category. Using this framework, you can define template which contains common sections for header, footer, body and menu layouts. Furthermore, it supports derived templates via inheritance.
2) Caching solution : Since you want to load values from database to make the menu dynamic, caching and pre-populating the menu will minimize page load times. This should be done on server side.
A separate thread/process should be made responsible for pre-populating and refreshing cache periodically.
From clean code perspective, JSP or Tiles template should not invoke database calls. Instead the page should interact with a DAO/component to separate concerns and ensure MVC pattern is not broken.
Helpful links:
Tiles Example
Thymeleaf - an alternative to Tiles

MVC 3. Load menu and content separately

I have an app with 3 sections:
Main menu;
Context Menu - Related to selected item in main menu;
and Page body - Related to selected item in context menu;
"Main menu" and "Context menu" are based on membership. I don't want to load them everytime my page loads, because that would consume resources database. So, I'm using ajax to load main menu only one time, and when an item is selected, I load the context menu for that item.
My problem is: Every form's post will erase my menu.
Question: Will I have to build my entire application using ajax? I don't wanna do that, because it is too much simpler do a post in the form then send all data to controller with ajax.
Until now, I have 2 options:
Load my menus with ajax and the page body with IFRAME, so the post's will not render again my menus.
Do everything using ajax;
Is there any alternative to load my menus with ajax and be able to use form's post?
Sorry if I wasn't clear enough.
The sentence that gave me a pause is this "I don't want to load them everytime my page loads, because that would consume resources database."
You see, I've build quite a lot of apps, that display menus and sub-menus based on user roles (what you called membership). This has never been an issue from the resources or database perspective.
You can access all the membership information that you need once, when your used is being logged in. In the simplest case user's identity will be stored in the context along with the roles they have (HttpContext.User), so you do not to need a database lookup at all to get this information on every request. Note that with this scenario no ajax is required either.
If for whatever reason you can't store your membership information in the context like this, you still can store in in session (if in-memory) or in encrypted Cookies.
Now, I understand, that I don't all the details of your scenario, and that may be in your scenario what you are trying to do is warranted, however I suggest you think it through again, as under normal circumstances what you indicate is a problem (database resource) should not be a problem at all.
The bottom line is: if you alter your application that it stores the membership information when user logs on you won't have your problem to start with.
You don’t have to build all of your application using Ajax. But in this scenario Ajax may be the best way forward.
Following is my suggestion
Create your data entry for inside a dev
Have each input controller marked with a class (say ‘dataEntry’)
Create a javascript function to iterate the dev and build a list of all elements that has class dataEntry
Build a json object using the list. Use the name of each element as property name and value as the property value
Use jquery ajax to post this to the controller action
[optional] you can use .done and .fail methods to take action on success or failures of the call
I know this may look intimidating, but if you have many data entry forms, you can re-use this code.

New Instance of the page on Navigation

I have a few pages in an Application that require A-Synchronous calls to be made for about 2-3 minutes to get Synchronized, the user may navigate away from that page during Synchronization and can come back again after visiting multiple pages and the sync continues all the time he is on other pages as well, when I go to a page from sync-page and press the Back button everything works fine.. but when i go to a page and navigate back to sync-page from Application Bar a new Instance of the Page is created and the Sync is just like Re-started.
Now i know every thing is working fine since new instance of a page is created when i call NavigationService.Navigate() , but what should i do in this scenario ? How to get the old instance of a page if it is there ?
Thanks...
You can't get an "old" instance of a page and it's not guaranteed that a backwards navigation will reload the previous instance of the page, it may be a new instance of the same page, but restored to the same state (assuming you saved any).
If you are trying to provide backwards navigation from the application bar then a) you probably shouldn't because that's what the back button is for, and b) you should make sure you use NavigationService.GoBack() instead of NavigationService.Navigate() because Navigate will always launch a new instance of your page.
If the page you want to get to is not the previous page, then it sounds like you are trying to implement non-linear navigation for which there is a recipe on the App Hub.
By the sounds of your scenario, you should handle this long running process separately (away from the view) and then display it's progress or results in a view when the user navigates to the relevant page.

How to best handle user state when multiple browser windows share same session?

I have a web application (Java, Websphere, JSP) which allows co-workers to register visitors to various company exhibitions. A user object is stored in the session which records the currently selected exhibition and this is used when entering the details of new visitors.
One user has decided to open a second browser window which seems to share the same session. The user browses to an other exhibition in the second window. This changes the state of the currently selected exhibition. Back in the first window a menu item is clicked: 'List visitors'. The resulting list is a list of visitors to the exhibition selected in the second window.
I know that I could add the exhibition id to every form on every page but my actual scenario is more complicated that the one I have described.
What is your stategy for dealing with this kind of problem?
My first guess would be you can avoid the problem by keeping (or perhaps only identifying) view state in the URL and not the session.

Resources