SCRIPT1015: Unfinished string literal encountered while attempting to load string

Hi, I am facing an issue with the code in my ASP.NET Razor v2 cshtml file. I am trying to load a string into a paragraph from a C# list of strings. However, when the string being loaded contains certain characters, such as:

+ "<p>"+'Rejv&#237;zsk&#225; 113 79001 Jesen&#237;k'+"</p>"

I encounter a JavaScript critical error:

SCRIPT1015: Unterminated string constant

This error occurs when some characters escape the closing quotation mark '

The code snippet in question looks like this:

"<p>"+'@string.Format(serviceDescription[i])'+"</p>"

The variable serviceDescription is a list of strings that can contain values which may escape the ' character.

I'm seeking assistance in resolving this issue.

It's worth noting that this code snippet is utilized for adjusting the InfoWindow in the Google API.

I have already attempted several methods, none of which have worked:

  + "<p>"+' @string.Format("<p>{0}</p>", serviceDescription[i])'+"</p>"

  + "<p>"+'@string.Format(serviceDescription[i])'+"</p>"

  + "<p>"+'@string.Format("{0}", @Html.Raw(serviceDescription[i]))'+"</p>"

  + "<p>"+' @(new HtmlString(serviceDescription[i]))'+"</p>" 

  + "<p>"+' @Html.Raw(serviceDescription[i])'+"</p>"

  + ' @Html.Raw("<p>"+@serviceDescription[i]+"</p>")'

  "<p>" @Html.Raw(String.Format(serviceDescription[i]))+"</p>"

  + @(new HtmlString("<p>"+serviceDescription[i]+"</p>"))

Here is the full code snippet for the InfoWindow:

  var info = new google.maps.InfoWindow({
            map: map
        });
        /*   <img src="data:image/jpeg;base64{binary data}" />   */


        google.maps.event.addListener(marker, 'click', function () {

            var $infoWindowContent = $("<div style='line-height:1.35;overflow:hidden;white-space:nowrap;width: 200px'><h3>" + '@serviceTitle[i].ToString()'
                + '</h3><img <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="601312035d20131412090e074e260f120d0114">[email protected]</a>("data:{0};base64,{1}", serviceImgMIME[i], Convert.ToBase64String(serviceImgBinary[i])) style="width: 100%;max-height: 100%"/>'


                + "<p>"+ @Html.Raw(String.Format("{0}",serviceDescription[i]))+"</p>" // this is the line that causes me pain
                + "Web: " + "<a href="+'http://@string.Format("{0}", serviceLink[i])'+">"+'@serviceLink[i].ToString()'+"</a>"
                + "<br>"
                + "Kontakt: "+ "<a href="+'mailto:@serviceContact[i].ToString()'+">"+'@serviceContact[i].ToString()'+"</a>"
                + "<p>"+"Lze platit v: "+"<b>"+'@serviceIDCryptoCur[i].ToString()'+"</b>"+"</p>"
                + @switch (serviceIDCryptoCur[i])
                  {
                      case "BTC": 
                <text>
                '<img height="20" width"20" src="~/Content/ikonky/btcSmall.png">'
            </text>
                          break;
                      case "LTC": 
                <text>
            '<img height="20" width"20" src="~/Content/ikonky/ltcSmall.png">'
            </text>
                          break;
                      case "BTC,LTC":
        <text>
            '<img height="20" width"20"  src="~/Content/ikonky/ltcSmall.png"> <img height="20" width"20"  src="~/Content/ikonky/btcSmall.png">' 
        </text>
                          break;
                      default:
        <text>
                '<img height="20" width"20"  src="~/Content/ikonky/btcSmall.png">'
        </text>
                          break;
                  }

                + "</div>");
            info.setContent($infoWindowContent[0]);
            info.open(map, this);
        });

Answer №1

It is advised to encapsulate the string generating process into functions, as shown below:

@functions{
    string infowindow(string title, string imgMime, string imgBase64, string descr, string link, string kontakt, string crypt){
        var result = @"<div style='line-height:1.35;overflow:hidden;white-space:nowrap;width: 200px'>
                <h3>{0}</h3>
                <img src='data:{1};base64,{2}' style='width: 100%;max-height: 100%' />
                <p>{3}</p>
                Web: <a href='{4}'>{4}</a><br />
                Kontakt: <a href='mailto:{5}'>{5}</a>
                <p>Lze platit v: <b>{6}</b></p>";
                switch (crypt)
                {
                    case "LTC":
                        result += "<img height='20' width='20' src='~/Content/ikonky/ltcSmall.png'>";
                    break;
                    case "BTC":
                        result += "<img height='20' width='20' src='~/Content/ikonky/btcSmall.png'>";
                    break;
                    case "BTC,LTC":
                        result += "<img height='20' width='20' src='~/Content/ikonky/ltcSmall.png'> <img height='20' width='20' src='~/Content/ikonky/btcSmall.png'>";
                    break;
                    default:
                        result += "<img height='20' width='20' src='~/Content/ikonky/btcSmall.png'>";
                    break;
            }
        result += "</div>";
        return result.Replace(Environment.NewLine,"");
    }
}

Then, you can use it like this:

var $infoWindowContent = $("@Html.Raw(infowindow(serviceTitle[i],serviceImgMIME[i], Convert.ToBase64String(serviceImgBinary[i]),serviceDescription[i],serviceLink[i],serviceContact[i],serviceIDCryptoCur[i]))")

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

Translating JavaScript, HTML, and CSS into a Class diagram

I've been on the hunt for a tool that can assist me in creating a class diagram for my current web development project. Although I have a plugin for Eclipse that works for JavaScript, it lacks the ability to connect elements from HTML and CSS - . I ...

Creating a stylish gradient text color with Material-UI's <Typography /> component

Is there a way to apply a gradient font color to a <Typography /> component? I've attempted the following: const CustomColor = withStyles({ root: { fontColor: "-webkit-linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", }, })(T ...

The Controller is not being accessed by Ajax.BeginForm()

I've encountered an issue with the code below. There are 2 fields and a search button. When I input a value only for the Holiday field and click search, it does not trigger the controller. However, if I provide a value for the Year field, then it hits ...

Enlarging and cutting video footage

I have developed an app that features a code enabling users to capture photos using their computer-connected camera. How it Works: A webcam is utilized to display a video element with the camera as its source: function onSuccess (stream) { this.video.s ...

Exploring a Ring with Three.js OrbitControls Rotation

I am having an issue with my OrbitControls camera setup. Currently, the camera rotates around a fixed point at player.position.x, y, and z coordinates. While it works fine, I need the camera to rotate around a ring instead. In the examples provided, the fi ...

Function on NextJS site failing to adhere to the two-second timeout limit

I have implemented an 'image slide show' that switches between images every two seconds by toggling their display types from "none" to "block". Within my .js file, the showSlides function is declared at the top: var slideIndex = 0; function sho ...

Guide on setting the dropdown's selected index through JavaScript

Is there a way to use javascript to set the selected value of a dropdown? Here is the HTML code I am working with: <select id="strPlan" name="strPlan" class="formInput"> <option value="0">Select a Plan</option> </select> I am ...

Guide on Showcasing Countries on a Global Map with Various Colors Using react-svg-map

I'm currently working on a project that involves highlighting specific countries on a world map. The default color for the countries is light blue, but I need to change it to dark blue for the highlighted ones. Although the library I'm using has ...

React: The 'Redirect' function is not included in the export list of 'react-router-dom'

When I try to run npm run start in the terminal, an error message appears. 'Redirect' is not exported from 'react-router-dom', causing an import error. I have attempted various solutions like reinstalling node_modules, react-router-d ...

Declare webpage as manager for mailto links

One interesting feature I've observed in various web-based email providers is the ability to add the website as the default mailto links handler in browsers like Firefox and Chrome. This means that when clicking on a mailto: link, it will automaticall ...

What is the best way to choose all checkboxes identified by a two-dimensional array?

I need help with a question div setup that looks like this: <div class="Q"> <div id="Q1"><span>1. </span>Which of the following have the same meaning?</div> <div class="A"><input type="checkbox" id="Q1A1Correct" /& ...

Retrieve an image using screen resolution parameters [using only HTML]

During a recent interview, the interviewer posed an interesting question regarding 2 images: There is one large resolution image that needs to be displayed on laptops and desktops. There is also a small image that should only be shown on mobile devices. ...

The dropdown menu is erroneously showing buttons instead of the intended options

My dropdown function is causing a small issue. The desired behavior is that if the selected value is "", labeled "Please Select" in the dropdown menu (I've added a comment in the function to pinpoint the problem), then buttons A, B, and C should not b ...

Tips for adjusting the time interval on an automatic slideshow when manual controls are in play

I'm having trouble with my slideshow. I want it to run automatically and also have manual controls, but there are some issues. When I try to manually control the slides, it takes me to the wrong slide and messes up the timing for the next few slides. ...

Building a High-Performance Angular 2 Application: A Comprehensive Guide from Development to

Recently, I began developing an Angular2 project using the quickstart template. My main concern now is determining which files are essential for deployment on my live server. I am unsure about the specific requirements and unnecessary files within the qu ...

Issue with jQuery's JSON data not being properly transmitted to CodeIgniter (`

Based on my observation, the script provided below seems to be functioning properly: <script type="text/javascript" language="javascript"> $(document).ready(function() { $('#add').bind('keypress', function(e) { if(e.k ...

When using the hasMany/belongsTo relationship in VuexORM, the result may sometimes be

I have carefully followed the documentation and set up 2 models, Author and Book. The relationship between them is such that Author has many Books and Book belongs to an Author. However, despite having the author_id field in the books table, the associatio ...

What causes inline CSS and internal CSS to exhibit different behaviors?

It’s kind of strange that I have to click twice to see Foo’s content, but only once to see Bar’s content. The main difference seems to be that Foo’s content has internal style while Bar has inline style. <html> <head> <style> ...

Utilize the Power of React.js and Express.js to Send Emails

After building a web app using React.js in ES6, I found myself wanting to add a "Contact Us" page that allows users to send an email. However, as a newcomer to React, I discovered that React itself cannot directly send emails. Following tutorials with node ...

Mastering the Art of Revealing and Concealing

I stumbled upon a great demonstration on reversing the Hide and Show functionality at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show <!DOCTYPE html> <html> <head> <meta name="viewport" content="width ...