Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Why a string that has persian/arabic and English characters, was messed up in browser view?

I’m coding an ASP.NET core application. I read a record of SQL database and I want to show it in my html page through a Jquery function. It’s a part of my code:

//some code...

    <script charset="utf-8" type="text/javascript">
       $(document).ready(function () {
         var materialname = [];
         
         @if (Model.Count() != 0)
         {
            foreach (var item in Model)
            {
              @:console.log('name: ' + '@item.material.StoreName');
              @:materialname.push('@item.material.StoreName');

            } 
         }
       });
   </script>

When I run this code, it’s showed an incorrect string in console.
for example, StoreName in DB is:

enter image description here

but it is showed in console like this:

 name: محصول دسته AB اندازه 5mm

How can I correct this and show a right encoding char?

Tags:

2

Answers


  1. 0

    If you are using .razor or .cshtml embedded code try this

    @if (Model.Count() != 0)
         {
            foreach (var item in Model)
            {
              @:console.log('name: ' + 'HttpUtility.HtmlDecode(@item.material.StoreName)');
              @:materialname.push('@item.material.StoreName');

            } 
         }

    Make sure to use proper package reference

    using System.Web;
    Login or Signup to reply.
  2. 0

    This happens because ASP.Net Core automatically HTML-encodes all strings output in Razor pages to prevent cross-site scripting (XSS). This isn’t noticable in HTML because browsers interpret the escape sequences, but in JS it’s just a string going ‘&#x645;’ etc.

    You have several options.

    Globally allow Arabic

    Since your site will be dealing with Arabic text routinely, you may want to exclude the Arabic unicode range from automatic encoding globally. To do this, add this line to your program.cs. It changes the default HtmlEncoder to a new one which takes an array of allowed unicode ranges it won’t touch:

    builder.Services.AddSingleton(HtmlEncoder.Create(UnicodeRanges.BasicLatin, UnicodeRanges.Arabic));

    Make sure to leave BasicLatin in there or it will escape spaces and everything.

    There are some more Arabic ranges you may want to add. This option has the benefit of saving massive bandwidth if you’re dealing with a lot of Arabic text.

    Personally I’m in Germany, so I use Latin1Supplement (for umlauts, guillemets etc.) and LatinExtendedAdditional (capital eszett is in there).

    Use Html.Raw()

    This is dangerous and you should only use it if you know what you’re doing, i.e. if you can control what the string contains. If the string contains a ' for example, it will kill your Javascript. If the string contains user-generated input, a user can now inject arbitrary code into your page. Only do this if you are certain the string is harmless.

    foreach (var item in Model)
{
    @:console.log('name: ' + '@Html.Raw(item.material.StoreName)');
    @:materialname.push('@Html.Raw(item.material.StoreName)');
}

    Use a custom method to escape strings Javascript style

    Here is an extension method that allows you to call @Html.JsString() instead of @Html.Raw(). It uses the built-in JavaScriptEncoder to escape strings specifically for javascript:

    public static IHtmlContent JsString([NotNull] this IHtmlHelper html, object value)
=> value switch
{
    null => HtmlString.Empty,
    string s => new HtmlString(System.Text.Encodings.Web.JavaScriptEncoder.Default.Encode(s)),
    _ => new HtmlString(System.Text.Encodings.Web.JavaScriptEncoder.Default.Encode(value.ToString()!)),
};

    This will make your code look like this:

    console.log('u0645u062Du0635u0648u0644 u062Fu0633u062Au0647 AB u0627u0646u062Fu0627u0632u0647 5mm');

    Still escaped, but now Javascript knows how to handle it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search