What is preferred way to share data (Object) between controllers with different routes and prevent data lost after reloading?
I need this object to prefill form values in my destination page which depends on choices in my source page.
Solutions I got so far are:
1- to send serialized Objects as query string parameter.
2- or using local storage and give special parameter to url so it knows when to fetch from local storage and when to open empty form.
Solutions which I can't use:
1- Shared service as my data would be lost after reload in this case.
Is there any other way, if not which way is more preferred?
note: there has to be no lost data after reloading page.
IMHO , there could be only 2 ways to handle this:
Using localStorage or sessionStorage
You use session management from server side keep the session consistent.
If it's just about retaining the data after page reload for a route, just go for sessionStorage. But it depends on the use case of your project.
Related
I have an AngularJS app like this one:
http://next.plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview&preview
and the $scope data that I have, is from an API,
When the page first loaded I call to this API and I save the data that returned in the session,
Now I can't understand why when I refresh the page I Losing information and all the data,
How can I use the data dynamic that when I refresh the page I don't loos data?
First of all, are you using routing in your app? Here is simple example :
http://next.plnkr.co/edit/Svg4Po13hMq7WxzNwKDc?p=preview&preview
With routing you do not need to refresh your page.
As to the problem itself (don't loss data after refresh):
if you want to keep your data even when you refresh your browser use localStorage. There're lots of handy localStorage angularJS modules to use - ex.
https://github.com/grevory/angular-local-storage
if you don't want to store data on the client side, you could request your API for the data you need to store each time your angular app is getting loaded. This data seems to be static, as you are storing it on client side and reuse then, so you could configure API endpoint to throw this data really fast.
We had a silverlight application that maintained state when clicked on links and come back to it.
I was wondering if there's a way to implement something like that using Asp.net MVC? Basically right now user goes to a search page using a link in the banner, in the search page we display some items.. user clicks on one of them and another page opens up taking him to the main page that list that items information. From there the user can again click on search but this time of course a new search window opens up.
Am wondering if there is a way to load existing content form the already opened window into the new search window?
If it makes any difference the search page is ajax enabled.
As Shyju has pointed out, Http is stateless. There are several ways to store and share data between multiple pages in web applications.
Just to name a few, you can use:
Cookies (do not save security sensitive data such as passwords in
cookies)
Sessions
Browser's local storage (http://www.w3schools.com/html/html5_webstorage.asp)
In MVC, you can use ViewBag, ViewData or TempData
You can pass data as query parameters in URL
You do not want to maintain the state in ASP.Net MVC. It is a bad practice.
If you want to pass state between action methods, you can use TempData.
It uses Session State under the hood, and clear it automatically right after you retrieve the data.
ASP.Net offers some addition methods in addition to TempData. You can read more here. In your scenario, TempData is a best choice.
As we all know, HTTP is a stateless protocol, each HTTP request does not know about the previous request.
ASP.NET also provides state management techniques that can help us to maintain data when redirecting from one page to another. There are several ways.
Hidden Fields (is used to hide your data on client side. It is not directly visible to the user on UI but we can see the value in the page source).
Cookies (are used for storing the data but that data should be small. It is like a small text file where we can store our data, This are stored on client side memory in the browser).
Query String (generally used to pass value from one page to the next).
View Data (helps us to maintain the data when sending the data from controller to view. It is the dictionary of objects derived form ViewDictionary).
View Bag (same as View data, except the only difference is that view bag is the object of dynamic property).
Temp Data (is also a dictionary object as ViewData and stores value in key/value pair. It is derived from TempDataDictionary. It is mainly used to transfer the data from one controller to another controller).
I have graph with data in welcome page like widget(/welcome). when the user clicks the graph the page change to /home/default and the same graph should be displayed along with some extra data which is populated by Ajax call. What I want is to persist the graph data from /welcome into /home/default page. I don't want the data to go controller and back to the /home/default page. Kindly suggest.
In a nutshell, you need to set some state for the user and then when the /home/default page is rendered, you need to check that state and make corresponding changes to the presentation of the page.
This can be done either server-side (in the rendering of the page) or client-side (via Javascript adding things to the page).
If you do this client-side, then the state can be stored in a cookie, in LocalStorage or in a query parameter in the URL when you redirect. Then, you place Javascript code into /home/default that checks that state and adds content to the page dynamically based on the state.
If you do this server-side, then the state can be stored in a cookie or in some server-side data store and then when the /hoome/default page is rendered, your server side page rendering process can check the state for this particular user and modify the rendering of the page to include the desired content.
You have a plethora of options. The best solution depends on how your application is currently implemented -- whether in a framework or not, with sessions or not, etc. The principle whatever method you choose is almost identical: store a value and then retrieve it later.
Single Page Application (SPA)
If you aren't already using a framework, I would urge you to consider migrating to one as tasks like these are made infinitely more elegant in their implementation.
Service / Data Store
If you are building an SPA then you may not have to consider any of the options below... so long as it doesn't matter if the data is lost if the user performs a 'real' navigation that cannot be intercepted by the framework (for example, refreshing the page).
In Angular you can maintain a temporary data store in the form of a service. Simply store the data and then pick it up later from another controller. Similar functionality can be achieved in all other popular SPA frameworks:
Angular
Ember
React
Local Storage
Local Storage is available in IE8 and above and has a really simple API.
Angular: angular-local-storage
React: react-local-storage
Ember: ember-local-storage-adapter
jQuery: jStorage
IndexedDB
If you're into the cutting edge and aren't tied down by browser support, consider using IndexedDB. I don't recommend using this unless you are wanting to persist large amounts of data remotely on the client's machine. (It really does have bad support at the moment.)
Angular: angular-indexed-db
React: ???
Ember: ember-indexeddb-adapter
jQuery: jquery-indexeddb
Cookies
If your application is inflexible then cookies will be the easiest and least time-consuming. However Local Storage may be a contender.
Angular: $cookie service
React: react-cookie
Ember: ???
jQuery: jquery-cookie
I currently have an angular app which contains 2 pages.
When the user finishes with page1, I create a variable with some data he entered on that page and put it in the main controller (a controller above the 2 pages). Then the state changes (he get redirected to page2) and page2 reads the data from the main controller.
Now I want to split the 2 pages into 2 diffirent web sites with diffirent addresses. How can I open page2 from page1 with parameters (GET is not an option, the data is more then what is allowed for url).
NOTE : Both pages are written in angular and page2 is currently not in MVC - its just simple HTML, css and js files. But if someone has a solution involving minimal MVC - its great.
You can do it trough a hidden form. It will submit your data as POST whatever the target url is
There are multiple ways you can do that
Completely client side solution
Using cookies / local storage - i have been using angular storage library to perform exactly what you are trying to do. This solution will not work if you are putting the pages on 2 different domains. As the cookies and localstorage can only be read by the domain they are created by.
Solutions requiring to save the state on server side and then accessing them on the second page.
Its easy to use sessions / temporary sessions to storage data server side.
Using a third party state storage is also possible ex. Firebase.
Solutions not requiring you to save the state at all but require you to handle POST data on the server side
Make a hidden form on page1. With action attribute pointing to the url of the page2. Keep the data inside form using ng-model etc. when you are ready to make the transition POST / Submit the form. Handle the POST data on the second website / url and inject it into the second page
How to store a list in the web sql or any type of storage in the browser,
I have found three ways to store data in the browser, i.e. localstorage,session storage and web sql with html5 so i need to store the java.util.List in the browser and need to modify it at in future so is there any way to do so?
I'm not sure - you need to store and manipulate the 'List' on the server or on the client?
In the first case you may use session. In second case you can't use session because you can not access session variables in javascript.
In such situation I'm usually creating hidden field (if it's something page related) or cookie (if it's something application related). Using base64 you may pass transformed to string List to the client, modify them and save. Of course later you may read the data on the server.
I got the answer, we need to first take the list in local var in the page and than through javascript iterate it and store in the local browser db.