What causes the incorrect format of URL parameters in JavaScript?

While working on creating a JavaScript code with an URL in the code-behind page using C#, I encountered an issue where the URL parameter inside the JavaScript was not in the correct format after being generated by C#.

For example:

URL parameter:

JavaScript: javascript:dnnModal.show('',false,365,206,false)

C# code:

string link = "http://google.com?popUp=true";
string googleIcon = "<a href='javascript:dnnModal.show('" + link +',false,365,206,false)'><img border='0' src='~/Icons/gIcon.png'></a>";

Upon viewing the aspx page's source code, I noticed that the generated googleIcon code had an incorrect format:

<a href="javascript:dnnModal.show(" http:="" google.com?popup="true',false,365,206,false)'"><img src="~/Icons/gIcon.png" border="0"></a>

When hovering over the icon hyperlink, only part of the JavaScript string was displayed. The URL and other parts were lost in translation.

I am seeking assistance in resolving this issue and learning how to properly pass an URL parameter into JavaScript using C#.

c#javascriptasp.net

Answer №1

Here is the updated code snippet:

var googleIcon = "<a href=\'javascript:dnnModal.show(\'" + link + "\',false,365,206,false)\'><img border='0' src='~/Icons/gIcon.png'></a>";

Answer №2

It seems like the string escaping is not being done correctly

string googleIcon = "<a href='javascript:dnnModal.show(\"" + link +"\",false,365,206,false)'><img border='0' src='~/Icons/gIcon.png'></a>";

Answer №3

While two others have suggested different approaches, I recommend encapsulating these tasks in a user control if feasible. Alternatively, consider using System.Web.UI.HtmlControls for added flexibility.
Here is an example of how you could implement it: 

            HtmlLink myHtmlLink = new HtmlLink();
            myHtmlLink.Href = @"javascript:dnnModal.show(\"" + link +"\",false,365,206,false)";
            HtmlImage myImage = new HtmlImage();
            myImage.Src = "~/Icons/gIcon.png";
            myImage.Border = 0;
            myHtmlLink.Controls.Add(myImage);

This approach is preferred because Asp.net handles DOM creation, ensuring a safe and valid XHTML output.

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

An unspecified issue arose in GDI+ during the saving process

I am working on a project where users need to upload a jpeg file from one server to another. Currently, I am using the "HttpPostedFileBase" to get the file data in my controller. When uploading the file to the local server (Web-based Admin application IP i ...

c#asp.netasp.net-mvcfileimpersonation

Attempting to decode the string prior to selecting an item from the Vue.js/Nuxt array

Hey there, I really appreciate anyone who can assist me with this. I've been dabbling in Laravel for a few months and now I'm trying to dive into studying Nuxt. The specific type of translation I need help with is proving to be quite challenging ...

javascriptvue.jsnuxt.js

The Framework of ASP.NET Web Forms

We created an ASP.NET Web Forms solution a few years back with a structured layer approach that consisted of: Data Access layer: This layer provided access to the data through simple procedures like the ones shown below: public void execute_NonQuery_s ...

asp.netentity-frameworkwebforms

Tips for effectively deploying SvelteKit on a server without causing any disruptions to the user experience

After developing my information system using Sveltekit and setting up the server with Ubuntu 22.04 OS, PM2 as the process manager, and running the app on Node.js, I followed the Sveltekit documentation to deploy the app for a node adapter. Below is my svel ...

javascripttypescriptsveltekitpm2

How to Trigger an ascx.cs Function from an ascx Page with JavaScript

I'm currently working with a code behind file that includes a method: public string ProductsAsJson() This method is responsible for returning a JSON representation of multiple products. In order to integrate some Angular functions into my ascx page, ...

javascriptc#asp.net

Send arguments to q.defer when calling d3.csv

Is there a way to pass parameters to q.defer in D3 and get them inside awaitAll method? I have a specific index (file name - d) to pass here: var data = [1,3,5,6,7]; var q = d3.queue(); data.map(function(d){ q.defer(d3.csv, ...

javascriptcsvd3.js

The prop type `cellHeight` provided to `GridList` in (Material-ui / React) is invalid

warning.js:33 Warning: The prop type for cellHeight in the GridList component is invalid. I encountered this error message, despite the property functioning correctly. Is there a way to resolve this issue? If you're interested, check out the documen ...

javascriptreactjsmaterial-ui

Transforming Coordinates into City and Country with Geocoder

I need help converting longitude and latitude coordinates into the corresponding country and city for users. I am currently utilizing an API from darkskynet to retrieve the coordinates. Is there a better approach to achieve this? Any tips or suggestions wo ...

javascripthtmlgoogle-geocoding-api

No content appearing on React screen

I initialized a fresh react project using "npx create-react-app name". After removing unnecessary files, the application no longer displays anything. I've encountered issues with react-router and defining routes as well. index.html: <!DOCTYPE html ...

javascriptreactjs

The two-word string is failing to pass through the query string

I've been working on passing multiple values through the query string. So far, I have successfully passed single-word values to a PHP page using jQuery. However, I encountered an issue when trying to pass a user's name like "Vishal Deb" as it onl ...

javascriptjqueryquery-string

Ajax request in Rails not receiving a response from the controller

After troubleshooting a simple GET request to the controller action, I confirmed that the request is being made successfully and there are no issues with the controller executing the action. However, I am not receiving any response data. $.ajax({ url: ...

javascriptruby-on-railsajax

Error: Attempting to retrieve a refresh token from the Google API resulted in an Uncaught ReferenceError, as the

I am currently working on obtaining a refresh token once a user authorizes with Google in order to prevent the need for re-authorization. After studying Google's documentation, I learned that setting the access type to offline is necessary. Now, I am ...

javascriptgoogle-api

Adding additional rows to an Array Object in JavaScript based on a certain condition

I am faced with a scenario where I have an array object structured as follows [ { id: 123, startdate: '2022-06-05', enddate: '2023-04-05' },{ id: 123, startdate: '2021-06-05', enddate: '2021-04-05' } ] The task at h ...

javascriptarraysobject

Numerous animated elements within A-frame

Is there a way to incorporate animation into an A-Frame glTF model, causing it to smoothly move 5 spaces to the left and then 5 spaces forward? Below is my current code: <a-gltf-model color="#FFFFFF" width="1" height="1" de ...

javascripthtmlcssanimationaframe

Issue with conditions in window.setTimeout function

I've been grappling with a website that features a loading page lasting 5 seconds, during which users can choose to activate autoplay or not. However, even after implementing a condition in my code, the autoplay feature continues to run unexpectedly. ...

javascriptjqueryhtmlcss

Guide to making an interactive graph in MVC4

I am working on an asp.net mvc4 application and trying to add a chart to display data. However, when I try to view it in the browser, nothing appears. Below is the code snippet from the controller that is functioning correctly: DAL dal = new ...

c#asp.netasp.net-mvcasp.net-mvc-4google-visualization

How to implement the onRowClick event in ASP.NET Gridview to show record details without using a Details/Select button

I'm currently working with a gridView and have configured a button within it to display detailed information when clicked. This button calls the DetailsView() function, which executes an SQL command and binds the data to a repeater for a custom detail ...

jqueryasp.netvb.netgridviewwebforms

Display an image from SQL using a link that does not require JavaScript

Greetings! I am faced with a task involving a car table in my SQL database. This table includes columns for the car make and a column named picture of type: Picture(image, null) When displaying the cars in a repeater, it typically appears like this: < ...

c#asp.netsqlhtmlimage

Is it better to verify the data from an ajax request or allow JavaScript to generate an error if the data is empty

Is it better to check if the necessary data is present when handling success data in jQuery, like this? success: function (data) { if (data.new_rank !== undefined) { $('._user_rank').html(data.new_rank); } } Or should you just l ...

javascriptjqueryajax

Retrieve the data attribute from a specific dropdown menu using jQuery

Here is the code snippet I am currently working with: $('.tmp-class').change(function() { $('.tmp-class option:selected').each(function() { console.log($('.tmp-class').data('type')); }) ...

javascriptjquery