1

I have a list of data, say "Supported colors". Maybe these colors each have a name, a set of aliases, a few specific RGB values that represent this color. In my site I have one page where I want to list the colors in a dropdown. In another page, I want to just have a grid displaying each color. Maybe in another page, something completely different. So my question is: how can I share the data between pages, such that a change in one location where the data is defined will propagate throughout all pages in the site.

Environment: This is an MVC app, using Razor (sparingly), bootstrap for presentation, and JQuery for some of the interactive operations.

My thoughts on a solution:

1) Store this list in a model that is passed to all pages. Then whenever the data is needed, I could loop over the items in the model, and present them however I want

2) Store the list in javascript, and generate the HTML using javascript instead.

3) Use JQuery to get the list from the server, and iterate over the results to generate the appropriate HTML

Note I am very new to web development, so there may be some false assumptions above, and most definitely some poorly thought out ideas - any corrections are greatly appreciated!

Rollie
  • 4,391
  • 3
  • 33
  • 55
  • You are using MVC as you said. Your data, static or dynamic are your "model". Your pages are your "views". Don't worry about Razor, bootstrap, jQuery, etc. They can be replaced by alternatives but that won't change the MVC aspect of your application. Go to asp.net/mvc and there are plenty of tutorials. – Kevin Le - Khnle Aug 06 '14 at 04:52
  • why not use a JSON string of an array of the objects as colors with their properties stored in client's local storage? – user3459110 Aug 06 '14 at 05:00
  • are the colors different for different users? – user3459110 Aug 06 '14 at 05:13
  • Nope, the list will be the same regardless of who is connecting, when, etc - it really is a static list. – Rollie Aug 06 '14 at 05:14

3 Answers3

2

I recommend using HTML 5 local storage. It is very fast, and easy to use.

You can create an object constructor for your colors in JS like following:

function Color (name, alias, rgbCode) {
    this.name = name;
    this.alias = alias;
    this.rgbCode = rgbCode;
}

Whenever you want to add a color, do it like following:

var redColor = new Color ("red", "primary", "#FF0000");

To store them, create a key in local storage.

if (localStorage["colors"] === undefined) {
    localStorage["colors"] = [ ];
}

Now, you can push any color in that array.

var local = JSON.parse(localStorage["colors"]);
local.push(redColor);
localStorage["colors"]=JSON.stringify(local);

To access the colors, you can do

var local = JSON.parse(localStorage["colors"]);
for(i=0; i<local.length; i++){
    console.log("Color Name: " + local[i].name + " Alias: " + local[i].alias + " RGB Code: " + local[i].rgbCode);
}

Note: This is all done on the client side since the data is all static. There is no point in increasing server load when such modern solutions are available.

Hope that helps!

user3459110
  • 6,961
  • 3
  • 26
  • 34
  • I ended up going with the Model approach; this seems very useful for saving user input though between sessions, so I'll probably incorporate this. – Rollie Aug 07 '14 at 08:36
0

There are a number of ways to handle this. One option would be to use MemoryCache (System.Runtime.Caching namespace)

You could create a method that checks the cache, and if not present then get the values from the database and add them to the cache. This method could be in a separate repository class or in aBaseController class. For example

using System.Runtime.Caching;

public List<MyColor> FetchColors()
{
  // Check cache
  List<MyColor> colors= Cache.Get("Colours") as List<MyColor>;
  if (colors== null)
  {      
    List<MyColor> colors = // Fetch colors from database
    Cache.Set("Colours", colors); // Add to cache
  }
  return colors;
}

public static object Get(string key)
{
  return MemoryCache.Default[key];
}

public static void Set(string key, object data, int duration = 60)
{
  CacheItemPolicy policy = new CacheItemPolicy();
  policy.AbsoluteExpiration = DateTime.Now + TimeSpan.FromMinutes(duration);
  MemoryCache.Default.Add(new CacheItem(key, data), policy);
}

public static void Invalidate(string key)
{
  MemoryCache.Default.Remove(key);
}

Then in each controller where you need the property just call FetchColors() and in any method that modifies the colours, call the Invalidate("Colors"); to remove it from memory and force the data to be loaded from the database on the next call.

Note, all this assumes your not using a web farm.

-1

Try storing the data in your user's session. Then it'll always be available as the user changes pages.

How to use sessions in an ASP.NET MVC 4 application?

Community
  • 1
  • 1
sitesbyjoe
  • 1,861
  • 15
  • 21