I am working on a dashboard application that has multiple independent widgets based on the common query string parameters passed. In MVC, each widget has separate controller --> view --> JS file (that makes AJAX calls to get JSON from WCF). Now, I need to create a master page that will "host" all of these independent widgets. How can I make sure that these widgets are truely "independent"? IE has concurrent connection cap that could be made to a single server. Will iframe serve the purpose? Should I host each widget in a separate iframe on this master page? What are more suitable and acceptible alternatives? Use partial views?
Related
I know that the webpage that is opened by the user is part of the view. This one is easy, but what about js code calling the server to retrieve data via ajax? Is this part of the controller or still the view?
Can the view request data like this?
Thank you very much for any help.
Javascript, including Ajax, is a client-side technology. Therefore, in the context of MVC, any js script must be part of a template file.
Note that a template file is not the view (the V in MVC), but a part of it. The view should incorporate both server-side components (classes, interfaces, etc) and client-side components (html, js, css, images, etc). For example, an instance of a view class could read some data from the domain model and then load and render a certain template file, injecting the fetched data into it (formatted), in order to be printed on the screen.
So, an ajax object should be defined in a template file. Its request to the server is handled either by the controller, or by the server-side components of the view, depending on the MVC approach that you are choosing to implement. Though, the server response should always be created by the server-side components of the 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
I have a site that I want to load links in the centre column, so why would I use AJAX over an iframe?
AJAX is a system which allows you to get data - any data - from a server. This is in contrast to iframes which simply load in a HTML document or fragment based on a given URL.
THe strength of AJAX's flexibility over iframes is their ability to give you back raw data with which you then use to build or update your view. Consider this example: you have a dataset that needs to be displayed in tabular form, so you could set up a page that contains the table with your data in it and load that in via iframe.
A better option however, is to get the raw data from the server with AJAX and send it to your application uncluttered by markup and extra tags. Your page then builds the table in whatever part of the page it needs, according to how your application needs it to appear right at that point.
Where iframes can load HTML content that must be presented as it is built, AJAX allows the developer to separate the data from the way it is presented, giving them the freedom to manipulate it as much as they like and use it in as many ways, pages and applications as they need.
More Information
AJAX allows the client or web page to send data back to the server to do things with (such as changing passwords, updating settings, or transaction processing, etc.) so if your page or application needs two-way communication without refreshing the page, AJAX is probably the technology you'd use.
Also, using iframes restricts your ability to work with the data inside. An iframe creates a new context which you can think of as a container of sorts - the data inside is safe from the outside and vice versa. This often means your CSS won't flow down into your iframe giving you unexpected results. On some browsers, clicking a link in an iframe can actually cause the link's destination to load inside the iframe instead of changing the whole page - usually not what you want.
I have 100 different url's each pointing to plain html pages, I have to convert these plain html pages to extjs pages. Footer and Header is same for all the pages but center section is different for different plain html pages.
In order to leverage maximum code I thought to create an EXTJS4.1.0 application which will have model, view, store and controller but separate index.html, app.js and viewport.js. The reason for separate index.html, app.js and viewport.js is that if I don't keep single index.html, app.js and viewport.js then I will not be able to bookmark the pages (Since users and using 100 different urls for 100 different pages) so basically I will have 100 different app.js and corresponding viewport.js (viewport.js will have common components for footer/header etc and specific components for screen) but at one point of time only one index.html, app.js and viewport.js will be active/run.
My first question is, is the solution I just mentioned a correct solution.
Is it true that in Extjs MVC pattern you can only have one Viewport.js file per application if you use autoCreateViewport: true.
Secondly if you use autoCreateViewport: false in Ext.Application (in app.js ) and create instance of different Viweport in launch method as follows:
Ext.application({
name: 'Panda',
autoCreateViewport: false,
launch: function() {
Ext.create('Panda.viewport.ViewportOne')
}
});
Notice that I have created instance of ViewportOne which is one of 100 viewports. With this solution also I ran into glitches while running the application (some navigation will not work etc). Is it because extjs does not allow viewport with name such as Panda.viewport.ViewportOne, Panda.viewport.ViewportTwo etc.
How in Extjs I can create fully MVC style application with bookmarkable pages such that each page is part of same extjs application (ie it leverages same model view, store, controller and dynamic loading).
The company I work for has lots of customers who are using an application which was build on plain html and javascript. Each uses works on only one page of that application which he has bookmarked on his browser.
The task I am given is to upgrade those plain html/javascript pages to Extjs one such that uses dont have to update their bookmarks.
At my end I am thinking to create single application in Extjs 4.1.0 which will have 100 pages (index.html, indexOne.html etc which user will bookmark) each if which can use common Model/view/store and controller.
So basically my entry point to application will be different but all pages will be using same model/view/store/controller.
Its more of an architectural question.
Hope this help.
I am working on a mobile website in ASP.NET MVC3. I have a page where i have search bar in my header. this header is coming from my Layout page which is common to all other Views. And inside my specific page, I have page specific content(forms).
For my Customer/Add action, I return the Add View of Customer which is strongly typed to my CustomerViewModel. I will have form tag in my Add View which will be posted to HttpPost Add Action method when form gets submitted. That is fine. My question is how will i handle the search box content ? I believe only one form is allowed in the page.So if i have a SearchViewModel which is binded to my Search View(Partial), It is going to be 2 forms in my page. So i can not do that.
I can handle the search part by reading the content in java script and calling another action to get Search results.Is that the only way to do that ? I am worried about those devices where java script is disabled. What should i do ? Please advice
No. You can have more than 1 form on the page. In fact, here you should. Your Add Customer page should submit to 1 action method, but your search form should submit to a different action method.
If you are familiar with webforms, that framework only allows you to have 1 form on the page, but not because HTML requires it. Webforms requires it because it is the only way the framework can carry all of the data from various server controls across POST requests (using ViewState). Webforms has historically not been very HTML or HTTP friendly.
You just can't have forms nested within other forms in HTML, but it is completely legal (and recommended in MVC) to have more than 1 form on a page.
As for AJAX, I would not worry about devices that do not have javascript enabled. There are only like 6 or 7 people on the planet that don't have javascript on their web devices, and if someone disables javascript, they won't be able to experience 99% of the rest of the web anyhow.