Utilizing Javascript to Successfully Pass Special Characters in URL Parameters

Hey there, I'm encountering an issue with calling an action result in my controller that contains parameters. Whenever one of these parameters has a special character like #, the string parameters are not including the # sign and all subsequent parameters are set to null.

Here is the JavaScript code I'm using to call the action result:

    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnExport').unbind().click(function () {
                var url = @Url.Content("~/BankStatement/ExportBankStatementSummary") +
                    "?legalName=" + '@ViewBag.LegalName' +
                    "&dba=" + '@ViewBag.DBA' + 
                    "&contactPerson=" + '@ViewBag.ContactPerson' +
                    "&address=" + '@ViewBag.Address' + 
                    "&period=" + '@ViewBag.Period' +
                    "&totalHeading=" + '@ViewBag.TotalHeading';
                window.location = url;
            });
        });
    </script>

This is the action result being called by the above JavaScript:

public ActionResult ExportBankStatementSummary(string legalName, string dba, 
                                               string contactPerson, string address, 
                                               string period, string totalHeading)
    {
        ViewBag.LegalName = legalName;
        ViewBag.DBA = dba;
        ViewBag.ContactPerson = contactPerson;
        ViewBag.Address = address;
        ViewBag.Period = period;
        ViewBag.TotalHeading = totalHeading;

        ...

The problem arises when any parameter in the action result contains a special character (# in this case), causing that parameter and the following parameters to become null.

For instance, if the address is "Street # 2", then the address parameter becomes "Street" and the period and totalHeading parameters become null.

Any assistance on resolving this issue would be greatly appreciated.

Thank you in advance.

[I do not believe this question is a duplicate, as the other question referenced discusses different details and does not fully cover the answer to this particular issue.]

Answer №1

To properly encode special characters in a Uniform Resource Identifier (URI) component, you can utilize the encodeURIComponent() method.

The encodeURIComponent() function replaces certain characters with escape sequences that represent the UTF-8 encoding of the character. This is particularly useful for handling characters composed of two "surrogate" characters.

For instance:

 var url = @Url.Content("~/BankStatement/ExportBankStatementSummary") +
                "?legalName=" + encodeURIComponent('@ViewBag.LegalName')

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

Executing functions on Angular scope within Underscore Template

Having an underscore template being invoked from an Angular controller, there is a dropdown in the template and an onchange function called on the dropdown. Despite several attempts to get the method triggered in the onchange event, using this code <se ...

Utilizing PNG images with color in CSS, HTML, or JavaScript

On my website, I have an image in PNG format. I am wondering if there is a way to change the color of the image using HTML5, JavaScript, or CSS. Ideally, I would like the image to be changed to white by inverting its colors (changing black to white, not al ...

Immediate add/modify

Exploring various websites online, I've come across platforms that offer the ability to manipulate data effortlessly. From inserting records to deleting and editing them, the process seems seamless. What's intriguing is how, upon clicking the r ...

How to access a specific "div id" using an href tag

I have some code that I need help with. I want to display the detailMess after it has been confirmed. How can I call the div-id inside an <a href="" onclick="return confirm('1 time count if you click OK, Are you sure?');"& ...

Unveiling the information retrieved from an AJAX request during page load

I've been working on a unique concept for my website. Instead of displaying data from a JSON file upon load, I want it to render only when a specific click event occurs. Initially, I tried using callbacks but soon realized the flaws in that approach. ...

Adding an item to an array in Angular 2 using JavaScript!

In my Angular2 form, I have a field that consists of an array of objects. I've successfully created a table with a Delete Row button for each row and an Add Row button using the push() and slice() methods in JavaScript. However, there's a major ...

Add the birthdate to the database by selecting the day, month, and year from the dropdown menus

Within my form, there are three distinct dropdown menus for birthday selection: Day, Month, and Year. Meanwhile, in the database, a column labeled "birthday" exists with a date data type. The challenge arises when converting the values chosen from these d ...

Maintain the chosen month in every dropdown toggle div in angular 4

While displaying data using toggle options, I am facing an issue where if I click on a different month, all other greyed out headers are displaying the previously selected values. I am trying to figure out a way to keep the value under Selected month as i ...

Tips for retrieving the value of a tag within a modal popup

I am trying to extract the value from an 'a' tag using the code below. <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" style="display: block;"> <div class="modal-d ...

The functionality of JQuery's .hover() is disabled once an HTML onClick() event is activated

I am currently working on a webpage and attempting to incorporate JQuery into it for the first time. However, I seem to be encountering some issues that I believe might have simple solutions. Background Information My JQuery code only contains one event l ...

Having trouble with your angular.jg ng controller functioning properly?

Having trouble getting any content to show up from the media object! The plate object seems to be malfunctioning. <!DOCTYPE html> <html lang="en" ng-app="confusionApp"> <head> <meta charset="utf-8"> <met ...

Conceal the slider thumb within the material-ui framework

I've been attempting to conceal the slide thumb, initially without using a library. However, I started considering utilizing material-ui as it might make the process easier. Hence, I'm seeking assistance here. Below is my code snippet: import * ...

Is Sass only compatible with Ubuntu for monitoring once?

After successfully installing Sass on Ubuntu, I ran the command sass --watch scss:css and it worked perfectly. However, now I have to manually run this command every time I make changes to my code. It seems like it only works once. Can someone please ass ...

Managing arrays effectively within ngrx store

I'm currently utilizing ngrx/store in my application and encountering a challenge when attempting to save an array. To start, I initialize my array as empty with the following code: export interface AppState{ customObjects: Array<CustomObject& ...

What is the best way to utilize a basic jQuery hide/show function to display everything before hiding it?

I have a dropdown menu where selecting an option will display a specific section based on the matching value and class, while hiding all other sections. How can I set it up so that before any selection is made, all sections are displayed and only hide afte ...

Ways to retrieve a specific Array[property] within an object?

I am struggling to access a specific property within an array of objects. My goal is to extract the "name" elements from the app catalog array, combine them with the names from the custom array apps.name, and assign the result to a new property in the ques ...

Tips for excluding the mention of the final index within a for loop when passing the index as a parameter for a function

I'm struggling with the code I've written: function(customSlider, images){ // create thumbs container var thumbContainer = $("<div></div>").addClass(defaultOptions.thumbsContainerClass); // add thumbs ...

Ways to conceal a dynamically generated div upon page load?

I am currently facing a scenario where I need to dynamically create a div. My initial approach was to create it on the document ready event, but the requirement is for it to be displayed only upon selection. The problem I am encountering is that the empty ...

Tips on how to dynamically load the content of a URL into a modal and update the browser address simultaneously

I am attempting to achieve a specific effect using JavaScript and jQuery Link to the content I want to load in a modal The goal is to load the content in a modal while keeping the main page in the background. Additionally, when a URL is followed, I want ...

The issue arises when using IE8/9 with $.get and .html() functions, as the retrieved data

Below is a snippet of JavaScript code that I am currently working with: $(".refresh").on("click touch", function () { $.get($("a.suggest-date").attr('href') + '#suggestedDate', null, function (result) { console.log(result); ...