[FIXED] How to prevent Ajax from removing special characters while constructing a url?

Issue

I have an Ajax function that calls a get request. I am constructing the url by using data values from ViewBag, for some reason am not understading Ajax keeps on removing the values from the special character to the end. This is my Ajax

 $.ajax({
      url: 'api/getProvinceDatByUserID/@ViewBag.reportinPeriod&UserId=@ViewBag.userId&provinceName=@ViewBag.provinceName',
      type: 'GET',
      success: function (data) {}
});

The expected url should look like

api/getProvinceDatByUserID/Jun-2022&UserId=f8f61c2e-6cf3-454f-b3bd-bf6deae205a4&provinceName=ZAMBÉZIA

but Ajax trims the provinceName to

api/getProvinceDatByUserID/Jun-2022&UserId=f8f61c2e-6cf3-454f-b3bd-bf6deae205a4&provinceName=ZAMB&

hence my requesting failing,

How can I set Ajax to stop trimming and removing the special values and characters after it? Any help is appreciated

Update 1

I have to add the encodeUri still same trimming

url: 'api/getProvinceDatByUserID/@ViewBag.reportinPeriod&UserId=@ViewBag.userId&provinceName='+encodeURI('@ViewBag.provinceName')

Update 2

After adding encodeURIComponent to the url am no longer getting ZAMB& but am getting ZAMBÉZIA. Does ajax understand What is the ZAMBÉZIA the symbol ontop of letter E ?

Solution

this is how I finally solved by issue

 var provinceName = @Json.Serialize(ViewBag.provinceName);

then access the variable with the preserved special characters. and the final url looks like

 url: 'api/getProvinceDatByUserID/@ViewBag.reportinPeriod&UserId=@ViewBag.userId&provinceName='+ provinceName , 

Answered By - arriff

Answer Checked By - Willingham (PHPFixing Volunteer)