C# MVC - Convert String to Variable

Question

How can I convert a string to be used as a variable? I have a List of strings that I want to be able to loop through and call data from my Model.

My code:

Controller:

List<string> reportContentsCharts = new List<string>();
//Pseudo Code
//If chart is selected added it to reportContents. So in the view instead of calling @Model.getChart1 from the view I can reference this reportContents. 
//For Example:If chart1 and chart2 are selected

reportContentsCharts.Add("getChart1");
reportContentsCharts.Add("getChart2");

IndexViewModel viewModel = new IndexViewModel()
{
      chart1 = makeChart1(DictionaryofData), //Returns an image and sends to IndexViewModel
      chart2 = makeChart2(DictionaryofData),
      chart3 = makeChart2(DictionaryofData),
      chart4 = makeChart2(DictionaryofData),
      chart5 = makeChart2(DictionaryofData),
      chart6 = makeChart2(DictionaryofData),
      reportContentsCharts = reportContentsCharts
}

 private byte[] makeChart1(Dictionary<string, Double> DictionaryofData)
 {
      //code to construct chart and return as an image. 
 }

IndexViewModel:

public Byte[] chart1 { get; set; }
public Byte[] chart2 { get; set; }
public Byte[] chart3 { get; set; }
public Byte[] chart4 { get; set; }
public Byte[] chart5 { get; set; }
public Byte[] chart6 { get; set; }

//This code is repeated for all 6 charts
public string getChart1
{
     get
     {
         string mimeType = "image/png";
         string base64 = Convert.ToBase64String(chart1);

         return string.Format("data: {0}; base64, {1}", mimeType, base64);
     }
}

View:

   <table>
        for(int z = 0; z< Model.reportContentsCharts.Count / 2 ;z++) //At most 2 charts can be selected
        {                     
            <tr> 
                <td ="center">                             
                    <img src=@Model.reportContentsCharts[z]/>
                </td>

                <td ="center">
                    <img src=@Model.reportContentsCharts[z+1] />
                </td>                         
            </tr>                       
        }
   </table>

Under lying issue: Currently when I run this code it returns me a broken image. I am thinking this might be a syntax issue? I have a handful of graphs that can be displayed on my webpage. Based on input from the user only a select few of the graphs will be displayed. The first thing I did was hard coded a position in the html for each graph and then use if() statements to determine whether to display the graph. The problem with this is that, based on the user input, the selected graphs can appear on separate lines. This creates bad alignment and spacing issues.

I understand that this might not be the best way to do this, but I felt like that it was the simplest solution.

Thanks for any suggestions or help.

Answer 1

It looks to me like the root of the problem is your poorly designed ViewModel. You need to normalize it:

private Dictionary<string, byte[]> Charts = new Dictionary<string, byte[]>();

public string GetChart(string name)
{
     get
     {
         string mimeType = "image/png";
         string base64 = Convert.ToBase64String(Charts[name]);

         return string.Format("data: {0}; base64, {1}", mimeType, base64);
     }
}

public string AddChart(string name, byte[] data)
{
    Charts[name] = data;
}

Then you can write your controller something like this:

IndexViewModel viewModel = new IndexViewModel()
{
      reportContentsCharts = reportContentsCharts
}
for (int i = 0; i < 6; i++)
{
    viewModel.AddChart("chart" + i, makeChart("chart" + i, DictionaryOfData));
}

And finally, you can write your view like this:

<table>
        for (int z = 0; z < Model.reportContentsCharts.Count; z += 2)
        {                     
            <tr>
                for (int c = z; c < z + 2; c++)
                {
                    <td align="center">                             
                        if (c < Model.reportContentsCharts.Count)
                        {
                            <img src="@Model.GetChart(Model.reportContentsCharts[c])"/>
                        }
                    </td>
                }
            </tr>                       
        }
</table>