MVC list items into JavaScript Array

.NET
1

I have created a list in asp.net and the list below contains 6 parts that make up one module.

mod = new List<Modules>()
            {
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Brand.png", HeaderImage = "1", ModuleTitle = "BrandCheck", ModuleDescription = "1", ButtonText = "1", ModuleColour = "1" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Standards.png", HeaderImage = "2", ModuleTitle = "StandardsCheck", ModuleDescription = "2", ButtonText = "2", ModuleColour = "2" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Room.png", HeaderImage = "3", ModuleTitle = "RoomCheck", ModuleDescription = "3", ButtonText = "3", ModuleColour = "3" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Food.png", HeaderImage = "4", ModuleTitle = "FoodCheck", ModuleDescription = "4", ButtonText = "4", ModuleColour = "4" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Security.png", HeaderImage = "5", ModuleTitle = "SecurityCheck", ModuleDescription = "5", ButtonText = "5", ModuleColour = "5" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Lab.png", HeaderImage = "6", ModuleTitle = "LabCheck", ModuleDescription = "6", ButtonText = "6", ModuleColour = "6" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Aqua.png", HeaderImage = "7", ModuleTitle = "AquaCheck", ModuleDescription = "7", ButtonText = "7", ModuleColour = "7" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Pool.png", HeaderImage = "8", ModuleTitle = "PoolCheck", ModuleDescription = "8", ButtonText = "8", ModuleColour = "8" },
            new Modules()
            };

And at the moment and it works fine I am using just two parts of the list to create a row of icons on the page

<div class="centerDetail">
    <div>
        @foreach (var m in Model)
            {
            <div>
            <img src="@m.ModuleImage" title="@m.ModuleTitle" id="@m.ModuleTitle" />
            </div>
<!--@m.HeaderImage
@m.ModuleTitle
@m.ModuleDescription
@m.ButtonText
@m.ModuleColour-->
            }
          <div class="seperator"></div>
       </div>
</div>

So what I need now is for those 6 elements to be stored in jscript for each of the modules, so that when someone clicks one of the images I can use the value of ‘id’ which is the module title, to poulate the header with the right image and text etc.

There 17 modules in total, each with 6 parts.

It will be easier to see it on a page where its already been done, but Im re-building this site in asp.net.

Modules page

When you click the icons the header image changes which when broken down contains all the parts in my list.

It’s wrong but this is sort of what I’m thinking could work, so then when I click the module image with the module titles as its id, it relates to the var moduleTitle and oh I don’t know what I’m saying now

<script>
    @foreach (var m in Model)
    {
        var @m.ModuleTitle = { title: @m.ModuleTitle, moduleImage: @m.ModuleImage, moduleDescription: @m.ModuleDescription, buttonText: @m.ModuleTitle, moduleColour: @m.ModuleTitle };
    }
</script>
2

I have the way I stored the javascript before below, but not sure how to get the list data into functions like this

<script>
$( document ).ready(function() {
	
var fns = {
  brandcheck: BRAND,	
  standardscheck: STANDARDS,
  roomcheck: ROOM,
  foodcheck: FOOD,
  securitycheck: SECURITY,
  labcheck: LAB,
  aquacheck: AQUA,
  poolcheck: POOL,
  spacheck: SPA,
  firecheck: FIRE,
  safetycheck: SAFETY,
  crisischeck: CRISIS,
  supplycheck: SUPPLY,
  ecocheck: ECO,
  accesscheck: ACCESS,
  dinecheck: DINE,
  tourcheck: TOUR,
}
	
var hash = window.location.hash.slice(1);
  var fn = fns[hash];
if (fn){
  fn();
} else {
  $('header').css({'background':'url(../img/modules/Brand.png)'});
  $('header').css({'padding-top':'31.25%'});
  $('header h1 span').text("BrandCheck");
  $('header .intro-text p').text("provides the tools and support necessary to create, develop, maintain or protect the business brand standards.");
  $('header .intro-text .modules_header_black .link').text("Download BrandCheck PDF");
  $('header .intro-text .modules_header_black').css({'background-color':'#f68834'});
  
  var a = document.getElementById('module_link');
  a.href = "/PDF/Cristal_BrandCheck_Datasheet.pdf"
}});

function BRAND(){
  $('header').css({'background':'url(../img/modules/Brand.png)'});
  $('header').css({'padding-top':'31.25%'});
  $('header h1 span').text("BrandCheck");
  $('header .intro-text p').text("provides the tools and support necessary to create, develop, maintain or protect the business brand standards.");
  $('header .intro-text .modules_header_black .link').text("Download BrandCheck PDF");
  $('header .intro-text .modules_header_black').css({'background-color':'#f68834'});
  
  var a = document.getElementById('module_link');
  a.href = "/PDF/Cristal_BrandCheck_Datasheet.pdf"
};

function STANDARDS(){
  $('header').css({'background':'url(../img/modules/Standards.png)'});
  $('header').css({'padding-top':'31.25%'});
  $('header h1 span').text("StandardsCheck");
  $('header .intro-text p').text("allows you to effectively track all the components that will ensure your international certification or standard is up to date and relevant at all times.");
  $('header .intro-text .modules_header_black .link').text("Download StandardsCheck PDF");
  $('header .intro-text .modules_header_black').css({'background-color':'#107FC5'});
  
  var a = document.getElementById('module_link');
  a.href = "/PDF/Cristal_StandardsCheck_Datasheet.pdf"
};

function ROOM(){
  $('header').css({'background':'url(../img/modules/Room.png)'});
  $('header').css({'padding-top':'31.25%'});
  $('header h1 span').text("RoomCheck");
  $('header .intro-text p').text("monitors room cleaning operations against an international benchmark for housekeeping performance and hygiene.");
  $('header .intro-text .modules_header_black .link').text("Download RoomCheck PDF");
  $('header .intro-text .modules_header_black').css({'background-color':'#678F8E'});
  
  var a = document.getElementById('module_link');
  a.href = "/PDF/Cristal_RoomCheck_Datasheet.pdf"
};

function FOOD(){
  $('header').css({'background':'url(../img/modules/Food.png)'});
  $('header').css({'padding-top':'31.25%'});
  $('header h1 span').text("FoodCheck");
  $('header .intro-text p').text("is based on the processes recommended by the WHO and governments worldwide to ensure safe food hygiene catering.");
  $('header .intro-text .modules_header_black .link').text("Download FoodCheck PDF");
  $('header .intro-text .modules_header_black').css({'background-color':'#F27312'});
  
  var a = document.getElementById('module_link');
  a.href = "/PDF/Cristal_FoodCheck_Datasheet.pdf"
};

function SECURITY(){
  $('header').css({'background':'url(../img/modules/Security.png)'});
  $('header').css({'padding-top':'31.25%'});
  $('header h1 span').text("SecurityCheck");
  $('header .intro-text p').text("helps hoteliers identify weak points in their security arrangements, whether physical or procedural.");
  $('header .intro-text .modules_header_black .link').text("Download SecurityCheck PDF");
  $('header .intro-text .modules_header_black').css({'background-color':'#C6202C'});
  
  var a = document.getElementById('module_link');
  a.href = "/PDF/Cristal_SecurityCheck_Datasheet.pdf"
};
</script>

From this list

namespace CristalStandards.Controllers
{
    public class HomeController : Controller
    {
        private List<Modules> mod;
        public HomeController()
        {
            mod = new List<Modules>()
            {
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Brand.png", HeaderImage = "1", ModuleTitle = "BrandCheck", ModuleDescription = "1", ButtonText = "1", ModuleColour = "1" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Standards.png", HeaderImage = "2", ModuleTitle = "StandardsCheck", ModuleDescription = "2", ButtonText = "2", ModuleColour = "2" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Room.png", HeaderImage = "3", ModuleTitle = "RoomCheck", ModuleDescription = "3", ButtonText = "3", ModuleColour = "3" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Food.png", HeaderImage = "4", ModuleTitle = "FoodCheck", ModuleDescription = "4", ButtonText = "4", ModuleColour = "4" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Security.png", HeaderImage = "5", ModuleTitle = "SecurityCheck", ModuleDescription = "5", ButtonText = "5", ModuleColour = "5" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Lab.png", HeaderImage = "6", ModuleTitle = "LabCheck", ModuleDescription = "6", ButtonText = "6", ModuleColour = "6" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Aqua.png", HeaderImage = "7", ModuleTitle = "AquaCheck", ModuleDescription = "7", ButtonText = "7", ModuleColour = "7" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Pool.png", HeaderImage = "8", ModuleTitle = "PoolCheck", ModuleDescription = "8", ButtonText = "8", ModuleColour = "8" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Spa.png", HeaderImage = "9", ModuleTitle = "SpaCheck", ModuleDescription = "9", ButtonText = "9", ModuleColour = "9" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Fire.png", HeaderImage = "10", ModuleTitle = "FireCheck", ModuleDescription = "10", ButtonText = "10", ModuleColour = "10" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Safety.png", HeaderImage = "11", ModuleTitle = "SafetyCheck", ModuleDescription = "11", ButtonText = "11", ModuleColour = "11" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Crisis.png", HeaderImage = "12", ModuleTitle = "CrisisCheck", ModuleDescription = "12", ButtonText = "12", ModuleColour = "12" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Supply.png", HeaderImage = "13", ModuleTitle = "SupplyCheck", ModuleDescription = "13", ButtonText = "13", ModuleColour = "13" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Eco.png", HeaderImage = "14", ModuleTitle = "EcoCheck", ModuleDescription = "14", ButtonText = "14", ModuleColour = "14" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Access.png", HeaderImage = "15", ModuleTitle = "AccessCheck", ModuleDescription = "15", ButtonText = "15", ModuleColour = "15" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Dine.png", HeaderImage = "16", ModuleTitle = "DineCheck", ModuleDescription = "16", ButtonText = "16", ModuleColour = "16" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Tour.png", HeaderImage = "17", ModuleTitle = "TourCheck", ModuleDescription = "17", ButtonText = "17", ModuleColour = "17" },
            };
        }

        public ActionResult Modules()
        {
            return View(mod);
        }

    }
}
3

I’m wondering if this is viable -

new Modules()
            { ModuleImage = "/Images/ModuleIcons/Brand.png", HeaderImage = "1", ModuleTitle = "BrandCheck", ModuleDescription = "1", ButtonText = "1", ModuleColour = "1", MFunction = "BRAND()" },
            new Modules()
            { ModuleImage = "/Images/ModuleIcons/Standards.png", HeaderImage = "2", ModuleTitle = "StandardsCheck", ModuleDescription = "2", ButtonText = "2", ModuleColour = "2", MFunction = "STANDARDS()" },

I added MFunction to the list with the function name, so it could be used like below, but really not sure if it will work and the functions will loop out and keep so I can call them.

<script>
    $(document).ready(function () {

        var fns = {
            brandcheck: BRAND,
            standardscheck: STANDARDS,
            roomcheck: ROOM,
            foodcheck: FOOD,
            securitycheck: SECURITY,
            labcheck: LAB,
            aquacheck: AQUA,
            poolcheck: POOL,
            spacheck: SPA,
            firecheck: FIRE,
            safetycheck: SAFETY,
            crisischeck: CRISIS,
            supplycheck: SUPPLY,
            ecocheck: ECO,
            accesscheck: ACCESS,
            dinecheck: DINE,
            tourcheck: TOUR,
        }

        var hash = window.location.hash.slice(1);
        var fn = fns[hash];
        if (fn) {
            fn();
        } else {
            $('header').css({ 'background': 'url(../img/modules/Brand.png)' });
            $('header').css({ 'padding-top': '31.25%' });
            $('header h1 span').text("BrandCheck");
            $('header .intro-text p').text("provides the tools and support necessary to create, develop, maintain or protect the business brand standards.");
            $('header .intro-text .modules_header_black .link').text("Download BrandCheck PDF");
            $('header .intro-text .modules_header_black').css({ 'background-color': '#f68834' });

            var a = document.getElementById('module_link');
            a.href = "/PDF/Cristal_BrandCheck_Datasheet.pdf"
        }
    });

    foreach(var d in Model)
    {
        function d.MFunction() {
            $('header').css({ 'background': d.HeaderImage });
            alert(d.HeaderImage);
            $('header').css({ 'padding-top': '31.25%' });
            $('header h1 span').text(d.ModuleTitle);
            $('header .intro-text p').text(d.ModuleDescription);
            $('header .intro-text .modules_header_black .link').text(d.ButtonText);
            $('header .intro-text .modules_header_black').css({ 'background-color': d.ModuleColour });

            var a = document.getElementById('module_link');
            a.href = "/PDF/Cristal_BrandCheck_Datasheet.pdf"
        }
    }
</script>

Not sure if this will work, but am sort of bouncing off a previous foreach loop which works well

<div class="centerDetail">
    <div>
    @foreach (var m in Model)
    {
    <div>
    <a href="#" onclick="@m.MFunction"><img src="@m.ModuleImage" title="@m.ModuleTitle" id="@m.ModuleTitle" /></a>
    </div>
   }
</div>
</div>

Although it sort of reads ok, its not quite right, or even not right at all, I’m not sure

6

I’m going to try and loop through a MVC model with jquery, so have below

@model IEnumerable<CristalStandards.Models.Modules>

var moduleList = @Html.Raw(Json.Encode(@Model))
        alert(moduleList);

and then i don’t understand if its worked or not but then I get below when I check the page source

var moduleList = [{"ModuleImage":"/Images/ModuleIcons/Brand.png","HeaderImage":"1","ModuleTitle":"BrandCheck","ModuleDescription":"1","ButtonText":"1","ModuleColour":"1","MFunction":"BRAND()"},{"ModuleImage":"/Images/ModuleIcons/Standards.png","HeaderImage":"2","ModuleTitle":"StandardsCheck","ModuleDescription":"2","ButtonText":"2","ModuleColour":"2","MFunction":"STANDARDS()"},{"ModuleImage":"/Images/ModuleIcons/Room.png","HeaderImage":"3","ModuleTitle":"RoomCheck","ModuleDescription":"3","ButtonText":"3","ModuleColour":"3","MFunction":"ROOM()"},{"ModuleImage":"/Images/ModuleIcons/Food.png","HeaderImage":"4","ModuleTitle":"FoodCheck","ModuleDescription":"4","ButtonText":"4","ModuleColour":"4","MFunction":"FOOD()"},{"ModuleImage":"/Images/ModuleIcons/Security.png","HeaderImage":"5","ModuleTitle":"SecurityCheck","ModuleDescription":"5","ButtonText":"5","ModuleColour":"5","MFunction":"SECURITY()"},{"ModuleImage":"/Images/ModuleIcons/Lab.png","HeaderImage":"6","ModuleTitle":"LabCheck","ModuleDescription":"6","ButtonText":"6","ModuleColour":"6","MFunction":"LAB()"},{"ModuleImage":"/Images/ModuleIcons/Aqua.png","HeaderImage":"7","ModuleTitle":"AquaCheck","ModuleDescription":"7","ButtonText":"7","ModuleColour":"7","MFunction":"AQUA()"},{"ModuleImage":"/Images/ModuleIcons/Pool.png","HeaderImage":"8","ModuleTitle":"PoolCheck","ModuleDescription":"8","ButtonText":"8","ModuleColour":"8","MFunction":"POOL()"},{"ModuleImage":"/Images/ModuleIcons/Spa.png","HeaderImage":"9","ModuleTitle":"SpaCheck","ModuleDescription":"9","ButtonText":"9","ModuleColour":"9","MFunction":"SPA()"},{"ModuleImage":"/Images/ModuleIcons/Fire.png","HeaderImage":"10","ModuleTitle":"FireCheck","ModuleDescription":"10","ButtonText":"10","ModuleColour":"10","MFunction":"FIRE()"},{"ModuleImage":"/Images/ModuleIcons/Safety.png","HeaderImage":"11","ModuleTitle":"SafetyCheck","ModuleDescription":"11","ButtonText":"11","ModuleColour":"11","MFunction":"SAFETY()"},{"ModuleImage":"/Images/ModuleIcons/Crisis.png","HeaderImage":"12","ModuleTitle":"CrisisCheck","ModuleDescription":"12","ButtonText":"12","ModuleColour":"12","MFunction":"CRISIS()"},{"ModuleImage":"/Images/ModuleIcons/Supply.png","HeaderImage":"13","ModuleTitle":"SupplyCheck","ModuleDescription":"13","ButtonText":"13","ModuleColour":"13","MFunction":"SUPPLY()"},{"ModuleImage":"/Images/ModuleIcons/Eco.png","HeaderImage":"14","ModuleTitle":"EcoCheck","ModuleDescription":"14","ButtonText":"14","ModuleColour":"14","MFunction":"ECO()"},{"ModuleImage":"/Images/ModuleIcons/Access.png","HeaderImage":"15","ModuleTitle":"AccessCheck","ModuleDescription":"15","ButtonText":"15","ModuleColour":"15","MFunction":"ACCESS()"},{"ModuleImage":"/Images/ModuleIcons/Dine.png","HeaderImage":"16","ModuleTitle":"DineCheck","ModuleDescription":"16","ButtonText":"16","ModuleColour":"16","MFunction":"DINE()"},{"ModuleImage":"/Images/ModuleIcons/Tour.png","HeaderImage":"17","ModuleTitle":"TourCheck","ModuleDescription":"17","ButtonText":"17","ModuleColour":"17","MFunction":"TOUR()"}]
        alert(moduleList);

Looks like it has done the job of collecting the list

But how do I use that above to loop out something like below

/*foreach (var d in Model)
    {
        function MFunction {
            $('#Modules').css({ 'background-image': d.HeaderImage });
            alert(d.HeaderImage);
            //$('#Modules').css({ 'padding-top': '31.25%' });
            $('#Modules h1').text(d.ModuleTitle);
            $('#Modules .intro-text p').text(d.ModuleDescription);
            $('#Modules .intro-text .modules_header_black .link').text(d.ButtonText);
            $('#Modules .intro-text .modules_header_black').css({ 'background-color': d.ModuleColour });

            var a = document.getElementById('module_link');
            a.href = "/PDF/Cristal_BrandCheck_Datasheet.pdf"
        }
    }*/
7

I have resolved this and want to display my workings and changes for the benefit of others.

namespace CristalStandards.Models
{
    public class Modules
    {
        public string ModuleID { get; set; }
        public string ModuleTitle { get; set; }
        public string ModuleImage { get; set; }
        public string HeaderImage { get; set; }
        public string ModuleDescription { get; set; }
        public string ButtonText { get; set; }
        public string ModuleColour { get; set; }
        public string PDF { get; set; }
    }
}

Change above is that I have added an ID value, and deleted the function module value

Then added all the values including the ID starting with 0

namespace x.Controllers
{
    public class HomeController : Controller
    {
        private List<Modules> mod;
        public HomeController()
        {
            mod = new List<Modules>()
            {
            new Modules()
            { ModuleID = "0", ModuleTitle = "BrandCheck", ModuleImage = "/Images/ModuleIcons/Brand.png", HeaderImage = "/Images/Headers/Modules/Brand.png", ModuleDescription = "provides the tools and support necessary to create, develop, maintain or protect the business brand standards.", ButtonText = "Download BrandCheck PDF", ModuleColour = "#f68834", PDF = "/PDF/Cristal_BrandCheck_Datasheet.pdf" },
            new Modules()
            { ModuleID = "1", ModuleTitle = "StandardsCheck", ModuleImage = "/Images/ModuleIcons/Standards.png", HeaderImage = "/Images/Headers/Modules/Standards.png", ModuleDescription = "allows you to effectively track all the components that will ensure your international certification or standard is up to date and relevant at all times.", ButtonText = "Download StandardsCheck PDF", ModuleColour = "#107FC5", PDF = "/PDF/Cristal_StandardsCheck_Datasheet.pdf" },
            new Modules()
            { ModuleID = "2", ModuleTitle = "RoomCheck", ModuleImage = "/Images/ModuleIcons/Room.png", HeaderImage = "/Images/Headers/Modules/Room.png", ModuleDescription = "monitors room cleaning operations against an international benchmark for housekeeping performance and hygiene.", ButtonText = "Download RoomCheck PDF", ModuleColour = "#678F8E", PDF = "/PDF/Cristal_RoomCheck_Datasheet.pdf" },
            new Modules()
            { ModuleID = "3", ModuleTitle = "FoodCheck", ModuleImage = "/Images/ModuleIcons/Food.png", HeaderImage = "/Images/Headers/Modules/Food.png", ModuleDescription = "is based on the processes recommended by the WHO and governments worldwide to ensure safe food hygiene catering.", ButtonText = "Download FoodCheck PDF", ModuleColour = "#F27312", PDF = "/PDF/Cristal_FoodCheck_Datasheet.pdf" },
            new Modules()
...
        }

In the view the icons are outputted onto the page via the loop with an onclick using the ID

<div id="moduleAreaWrapper">
@foreach (var m in Model)
    {
    <div class="moduleIndividual">
    <a href="#" onclick="modifyTitle(@m.ModuleID)">
    <img src="@m.ModuleImage" title="@m.ModuleTitle" id="@m.ModuleTitle" />
     </a>
    </div>
 }
</div>

Then the big changes are how on click of the module icons the header receives

the data it needs to display the right module

<script>
$(document).ready(function () {

    // If there no hash in url then display id '0' which is BrandCheck, until a module button is clicked
    if (window.location.hash == '') {
         modifyTitle(0);
    }

});

    var data = @Html.Raw(JsonConvert.SerializeObject(this.Model));

    // On click of a module the id is collected and the corresponding module is displayed in the header
    function modifyTitle(id) {
        $('#Modules').css({ 'background': 'url(' + data[id].HeaderImage + ')' });
        $('#Modules h1').text(data[id].ModuleTitle);
        $('#Modules .intro-text p').text(data[id].ModuleDescription);
        $('#Modules .intro-text .modules_header_black .link').text(data[id].ButtonText);
        $('#Modules .intro-text .modules_header_black').css({ 'background-color': data[id].ModuleColour });

        var a = document.getElementById('module_link');
        a.href = data[id].PDF
    }

</script>
2 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.