0

I have an ASP.NET MVC application. In one of the forms I am having problems with the coding of character Ñ. It is shown as below:

Ñ

This form have several objects such as TextBoxFor and select, among others. Initially when page is loaded for first time Ñ character is show correctly in all the html objects (TextBoxFor, Select among others). Once I have filled in all the fields I click on a save button in order to save values into database. Then page is reloaded and it keeps all the fields filled in (they are not cleared).

Once page is reloaded the Ñ character is shown as:

Ñ

in the html Select object below:

<select class="form-control" id="street" name="street"></select>

but in the other objects such as TextBoxFor is being shown correctly as Ñ :

@Html.TextBoxFor(model => model.DepartmentName, new { @class = "input-xmediumlarge" }, (bool)( !ViewBag.ReadOnly), true)

Html Select object is populated from a query to database. While user types characters in it, a search is done on the fly (using JQuery) and items containing that string are being shown to select. Items shown on the fly which contains Ñ character are displayed correctly. The problem is once values are saved and page reloaded. Ñ character is shown incorrectly in the html select object. It only happens in select object. In all other objects Ñ character is correctly displayed.

I have indicated below statements in the head section of the page:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />

Also, the cshtml view is saved as UTF-8. I have checked it by using Notepad++ by following these steps: Open the file in Notepad. Click 'Save As...'. In the 'Encoding:' combo box I see the current file format UTF-8.

So what am I doing wrong?

UPDATED: I have debugged and inspected the generated source code by internet browser (chrome, firefox and so on) and I can see the problem is when setting de html select value using jquery as below:

$('#street').val('@Model.street');

Above line is interpreted as below by the internet browser:

$('#street').val('PE&#209;ALBES');

so in the html select object is displayed as: 

PE&#209;ALBES

instead of PEÑALBES.

Willy
  • 9,848
  • 22
  • 141
  • 284
  • Are these special characters saved in the database as html-encoded symbols? You should probably check that, and apply manual html encoding/decoding where needed to ensure that the database contains them as utf-8 symbols. – Nyerguds Jan 30 '20 at 09:03
  • Nyerguds these special characters are being stored correctly in the database.Also they are read correctly from database and then html select is populated correctly. Once they are correctly saved into database, they are incorrectly represented in the select once page is refreshed and value is kept in the select field. It seems like @Model.street is read by the internet browser as PEÑALBES instead of PEÑALBES. – Willy Jan 30 '20 at 13:47
  • But... "PEÑALBES" is _correct_ as data for the browser to receive. In HTML, the "Ñ" symbol indeed encodes to "Ñ". But if it actually _displays_ "PEÑALBES", then the actual _data_ it puts in the html page is **"PE&#209;ALBES"**. – Nyerguds Jan 30 '20 at 14:24
  • Mind you, these html symbol conversions aren't necessary if your page is utf-8, so it's possible there is some setting you can change somewhere in your asp project or code to disable their use altogether. It would still apply to other symbols though, like the ampersand (&) itself. So there must be _something_ going wrong... – Nyerguds Jan 30 '20 at 14:31
  • @Nyerguds the page where the representation of the Ñ character is being displayed wrong has the correct charset UTF-8 added to the head section. Also the cshtml view file is in UTF-8 format. As you said, I am trying to find some setting somewhere in my page or projects in order to these special characters to be correctly displayed but I don't know what setting nor the place in my ASP.NET project to touch. – Willy Jan 31 '20 at 00:17

1 Answers1

0

Finally I have solved it by applying below javascript function found here:

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

$('#street').val(decodeHtml('@Model.street'));

instead of below:

$('#street').val('@Model.street');

Other interesting posts talking abount it are below:

Willy
  • 9,848
  • 22
  • 141
  • 284