Using Umbraco Razor to transfer an array to JavaScript

In my Razor code, I am using a foreach loop to display images from the Multiple Media Picker in Umbraco. The Response.Write is just there for debugging purposes and the images are displaying correctly. My actual question pertains to populating the image tag with the image URL using a JavaScript function, which is not currently working.

Below is the snippet of code from the Razor view/CSHTML:

var imagesList = portfolioItem.GetPropertyValue<string>("Images").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
var imagesCollection = Umbraco.TypedMedia(imagesList);

foreach (var imageItem in imagesCollection)
{   
    Response.Write("<img src='"+ @imageItem.Url +"' />");
}

And here is the relevant part of the JavaScript code:

openInfoWindow = function (name, imagesCollection, location, mw, url, marker) {
    var infoText = "<img src='" + imagesCollection + "' alt='" + imagesCollection + "'title='" + imagesCollection + "' />";
}

Answer №1

Consider incorporating jQuery into your code. Utilize Razor to encode the URL as a hidden input value. Then, utilize jQuery to extract that value and incorporate it directly into the image tag with the following script:

Retrieve the hidden input value as a variable using $("input").val(); then set this variable as the source attribute for the image with $("#my_image").attr("src", inputVal);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to conceal a Boostrap Navbar using jQuery?

Attempting to create a hidden side navbar using Jquery and Bootstrap 4. Struggling with the .on('click', ...) event handler for a button not hiding the sidebar as expected despite all files loading correctly according to the developer tools. Atte ...

The issues with caching seem to be affecting the JavaScript files whenever I try to load additional data using $.Ajax-Post

I've successfully implemented caching for JS files in my project, but I'm facing an issue... On a div click event, I trigger an $.AJAX method to fetch additional data from the database. However, upon retrieval of this data, I noticed that all m ...

jQuery AJAX call failing to update dynamic table row

Encountering a hairy problem while sending data through a jquery ajax call. The issue is that the form values of dynamically added form fields to a grid using jquery are not updating when a batch save command is executed. The grid displays all current row ...

Utilize JavaScript's Map function to employ generalized keys in an array of objects

I am dealing with an array of objects that looks like this: [ { "job_id": 1, "job_name": "Engineer" }, { "job_id": 2, "job_name": "Scientist" }, ...

What steps should I take to ensure that my table effectively displays grouped data?

Despite thinking I had resolved this issue earlier, it seems that I was mistaken. I have an array of objects that I successfully grouped using lodash. Subsequently, I attempted to create a summary table from it which should resemble the following: https:/ ...

"Creating varying lengths of time with useSpring: A Step-by-Step Guide

Is there a way for my component to have an animation that fully displays in 0.3s when my mouse enters, but disappears in 0.1s when my mouse leaves? Currently, with useSpring, I can only define one duration for both scenarios. How can I set different dura ...

Integrating component names into a tag in React

I've encountered a similar issue before, but unfortunately, the suggested solutions aren't working for me. I suspect it might have something to do with how I am conditionally rendering components. Essentially, I have a selection of choices for th ...

The form is sending static values that are having no impact

I have a straightforward form: <form id="change_id" action="update.php?update=profile" method="POST" enctype="multipart/form-data"> <input id="change_username" required name="user_new_name" type="text" placeholder="New Userna ...

selenium sendkeys not working properly

Hey there, I'm facing an issue in my Java code while trying to use the sendKeys command with Selenium libraries. The text field I'm working with is only visible if you scroll down to view it on the screen. var element = driver.FindElement(By.Xp ...

Converting Blob to File in Electron: A step-by-step guide

Is there a way to convert a Blob into a File object in ElectronJS? I attempted the following: return new File([blob], fileName, {lastModified: new Date().getTime(), type: blob.type}); However, it appears that ElectronJs handles the File object differently ...

I'm looking for some good .NET MVC frameworks that can help create dynamic AJAX applications

I am interested in developing applications with a dynamic user interface that utilizes ajax technology. Some key features I am looking for include: Automatic saving of user input in forms, even if the data is incomplete Realtime validation of form fields ...

Steps to trigger the "Confirm form resubmission" prompt when a user attempts to refresh their browser

I am encountering a situation where users are unable to refresh the page by clicking the browser's refresh button or pressing F5. I would like to simulate 'form resubmission' in order to display a prompt message. Could someone please provid ...

What could be the reason for reverse geocoding failure following the marker's movement when autocomplete event is triggered in Google Maps?

When I initiate the map and move the pin, the reverse geocoding correctly updates the input with the new address. However, if I manually type in an address using autocomplete and then drag the marker, the reverse geocoding stops functioning: var map; ...

Troubleshooting: React js Project console.logs are not being displayed in the browser's

When working on my current project, I noticed that any time I try to use console.log in the dev tools, it shows as cleared. Strangely, console.log works fine in my other projects. Does anyone have an idea how to resolve this issue? Here is a screenshot of ...

script to pause video using jQuery

I have a script that works perfectly, but currently it only stops an instance of a playing video if a new video is started. I want to modify the script so that ALL instances of playing videos are stopped when the function stopAllButMe(); is called. Can s ...

Struggles with the jquery function and condition block

Hey there, I need some help with a jQuery function. The issue I'm facing is that the flag variable ($act) I'm using in an if block always stays as zero(0) and doesn't change value. This leads to the if block not functioning as expected. Any ...

Arrange fixed-position elements so that they adhere to the boundaries of their adjacent siblings

Is there a way to keep two fixed elements aligned with their sibling element on window resize? <div class="left-img"> IMAGE HERE </div> <!-- fixed positioned --> <div class="container"> Lorem ipsum... </div> <div class=" ...

What is the process for generating an Angular JS Material Component using a JavaScript Function?

Issue: My webpage features an md-card with a button that, when clicked, should reveal another card. However, the button on the new card does not function correctly and is not properly formatted. Inquiry: What specific adjustments do I need to make in orde ...

Having trouble setting up jQuery UI Datepicker in my system

I am attempting to add a datepicker to my website, but it is not showing up in the browser. Could there be an issue with some of the other script files I have? Below is where my datepicker div is located: <body> <!-- Preloader --> <div id= ...

Substitute placeholders in the HTML code with Angular syntax

Lately, I have been encountering some issues with AngularJS. I have defined multiple scopes like this: app.controller('mainController', function($scope) { $scope.siteURL = "my website url"; }); When using the {{siteURL}} variable in ...