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 ?