Looked many things up, but never posted before. Here's my situation. Any help would be most appreciated.
I've got a wizard with numerous screens with an associated navigation bar made using CSS. As users click from screen to screen, the navigation reflects the current wizard page the user is on. Each screen has different inputs to be collected. Database reads and writes are required during the render and submission of each page.
Here's the catch. Not every page is required. Only required pages are displayed in the navigation and the required information is stored in the database.
My goal is to reduce the number of database queries by dividing the navigation and remaining input into two separate partials. This way I don't have to render the navigation between each screen eliminating the single query every time between screens.
How would I submit the form of the current screen, render the partial view of the next screen, and yet update the query string to reflect the current partial view as well? This way if the user refreshes the page, they get the current screen.
Sounds like pre-optimization. How do you know you're going to have a problem with your navigation because of the database?
Why not separate out your navigation and output cache it?
If you bound determined to change the url without changing the content you need to use History API and if you need a fall back for browsers that don't support that you can use history.js.
Related
Building a react app (non-native, with Rails), where there's a side navigation with links to 6 pages.
Each page displays a set of records.
In the navigation I want to display the number of records (total, and new) for the page that link represents.
Should I try not to store the counts, but to run all the queries initially (pre-load) so I can get the counts?
Would you recommend having a parent component around the navigation and the main page that pre-loads and manages the data for the 6 pages so it can have the counts ready for the navigation to grab?
What about when the user removes an item from the page, would you just update the data in the parent component and skip any further db queries?
Or....?
There are of course a number of ways this can be resolved and the optimal way can be subjective based on your specific needs. One possible way to set this up would be to:
Use counter caches to store the count as suggested by max.
On initial page load, query to find the count for all tabs and keep in state in the navigation bar.
For the data on the individual tabs, when data is created or removed just update the count in navigation bar with a callback function.
This way you won't have to run a query to count the items initially and then no further queries or complicated logic is required to keep the count up to date.
I have self taught myself MVC and create little personal projects to learn, as my IT consultancy always puts me into roles where I don't get to use MVC.
One thing I am battling with is - When I display a view, I always display it in edit mode. So you can make changes and clicks Save, and the view is saved. However, I would prefer to enter the view in Read Only mode. So, instead of edit boxes, I want labels (read-only). When the user clicks an Edit button, without a post back (so, using the same screen), editable fields 'change' into edit boxes.
I'd prefer to have one view though. Not en edit view and a view view. To minimize coding effort.
This must be a pretty standard function. Can it be done using Bootstrap/MVC?
I have an mvc app where I pass a list to a view. In a most click, I want to be able to render the next item in the last but am having trouble figuring out how to do that efficiently. My approach originally was to use an index i but I realized that one the page is rendered, accessing my model last at i will always leaf to the same result since that item in the list is rendered on page load and can't just be accessed dynamically. Any insight to an approach for this problem?
The model can't be accessed as it's only used on the server side.
There are a few ways of solving the problem, you can use Knockout.js or similar client side view model components, once the user click on the button just render then next item from the knockout model.
Or use AJAX to retrieve the next value from the back end and then render it to the screen.
Or generate the whole screen and just hide all items from the user and then display them once the user clicks the button
I'd like to create a content box with two tabs. Each tab is associated with a table which contain server-side data. My thought right now is just to load the page with 10 rows worth of data for each table and hide/display each table respectively to begin.
I was then going to toggle display of the tabbed content based on either click events on the tabs OR GET parameters relating to which tabbed content is being acted on (through pagination, for example).
Should I just handle this with UI tabs or is toggling display reasonable in this case? Since the user can update their data, I assume that caching via the tab UI isn't helpful in this case.
Thanks,
Brendan
From what I understood, I don't think its going to be overkill. If you are worried about performance, ten rows for 2 tables is just 20, which is not much. Paginating will also get 10 more rows for each 'click' so it's still good there.
Do use tab activation through click events, but also use GET parameters to know in which page the user currently is, from which tab.
Regarding caching data that you know will change, it might be unnecessary (see my 1st paragraph). Caching can sometimes become unwieldy, so don't add an uneccesary layer of complexity.
As someone who suggests simplicity above all else, I'd discard the whole 'tab loading' thing but leaving the tabs per se (i.e. the interface elements that will be clicked) and when the user clicks each tab, it takes to another page with the tabs too, old-fashioned style.
I've got a big ViewModel for a ContactViewModel with several addresses (default, invoice, delivery). This ContactViewModel I would like to edit within a DefaultAddress tab, etc. and I would like to know how to handle this without JavaScript? Is this possible?
Tell me if I'm off base here;
The way i think i'd approach this is to create a partial view which takes a list. the partial view would itterate through the list and create another partial view which is the tab.
on click of the tab i'd do a postback and store the clicked tab. this id then becomes the active tab.
when i come back to rebuild my page, the partialview for the actual tab would need to check to see if it's active and then make itself visible. if not visible then simply render nothing maybe.
This can be done with CSS. Here is an example: http://www.alistapart.com/articles/slidingdoors/
The selected tab/view will need to be rendered on the server. I can see each tab being a link, when the link is clicked the correct view and selected tab is returned.
Some of the css tabs don't work correctly in IE6. I'm not sure if the above link is one of them.