MYSQLで日本語文字列の文字化け

Question

jsからAjaxを経由して、asp.netでMySQLにデータをインサートしているのですが
MySQLの文字化けでちょっとつまずいているので質問させてください

動作確認環境は
Windows10 + Vs2019(IIS Express) + MySQL(xampp)
MYSQLのテーブル、フィールドは　utf8_general_ci

です

---確認した事項---
ASP.net側でデバッグで確認するとajaxで送信されたデータは文字化けしていませんでした
phpmyAdminからデータを見ると文字化け（？）になっています
phpmyAdminから直接フィールドに日本語を入力すると正常にセットできます。

何か見落としているようなところ、考えられる要因などはないでしょうか、、

sendData(para) {

   this.data.append("mode", "test");
   this.data.append("device", "あいうえお");
   this.data.append("QR", "http://xxxxx.com");

   var options = {};
   options.url = "FileUploadHandler.ashx";
   options.type = "POST";
   options.data = this.data;
   options.contentType = false;
   options.processData = false;
   options.beforeSend= function(xhr) {
        xhr.overrideMimeType('text/html;charset=Shift_JIS');
   };
   options.success = function (result) {
       //window.location.reload();	
   };
   options.error = function (err) {
       //window.location.reload();
   };

   $.ajax(options);

   return;

}

  string conStr = WebConfigurationManager.ConnectionStrings["MySqlDataSorce"].ConnectionString;
  MySqlConnection conn = new MySqlConnection(conStr);
  conn.Open();

  try
  {
    DateTime dtNow = DateTime.Now;
    
    MySqlCommand cmd = new MySqlCommand("insert into db_test ( mode,device,qr,createday) values ( '" + context.Request.Form["mode"] + "','" + context.Request.Form["device"] + "','" + context.Request.Form["qr"] + "','" + DateTime.Now + "');", conn);
    cmd.ExecuteNonQuery();
    cmd.Dispose();
    
   }
   catch (MySqlException ex)
   {
     //logger.Debug("SQL Error：");
   }
   finally
   {
   conn.Close();
   }

   context.Response.ContentType = "text/plain";
   context.Response.Write("File(s) Uploaded Successfully!");

Comments

[退会済みユーザー]

insert 文をパラメータ化したらどうなりますか？

SQL Server のケースですが以下のような話もあります。

パラメータ化の副次的な効用
http://surferonwww.info/BlogEngine/post/2016/06/04/use-parameterized-query-to-avoid-unexpected-character-corruption.aspx

[Qoo]

SurferOnWww様

アドバイスありがとうございます。
教えて頂いた通り、下記の２種類のパラメータ化を試しましたが
いずれも文字化けしてしまうようです

ちなみにパラメータの「@」ではnullになってしまい「?」だとパラメタセットできることがわかりました。
既存コードでは＠で作っているものが多数あり、このプログラムだけ？でしか動作しないというのも気になります。

もしかすると開発環境だけの問題で本番環境ならうまくいくかもしれないので、後程実行環境でもテストしてみようと思います。

もし、何かお気づきの点などあれば教授いただけると助かります。

string query ="INSERT INTO db_test (mode,device,qr,createday) VALUES (?mode,?device,?qr,?createday)";
using (MySqlCommand cmd = conn.CreateCommand())
{
cmd.CommandText = query;
cmd.Parameters.AddWithValue("?mode", context.Request.Form["mode"]);
cmd.Parameters.AddWithValue("?device", context.Request.Form["device"]);
cmd.Parameters.AddWithValue("?qr", "あああ");
cmd.Parameters.AddWithValue("?createday", DateTime.Now);
cmd.ExecuteNonQuery();
}
conn.Close();

string query ="INSERT INTO db_test (mode,device,qr,createday) VALUES (?mode,?device,?qr,?createday)";
using (MySqlCommand cmd = conn.CreateCommand())
{
cmd.CommandText = query;
cmd.Parameters.Add(new MySqlParameter("?mode",MySqlDbType.VarChar,60));
cmd.Parameters["?mode"].Value = context.Request.Form["mode"];
cmd.Parameters.Add(new MySqlParameter("?device",MySqlDbType.VarChar,100));
cmd.Parameters["?device"].Value = context.Request.Form["device"];
cmd.Parameters.Add(new MySqlParameter("?qr",MySqlDbType.Text));
cmd.Parameters["?qr"].Value = "あああ";
cmd.Parameters.Add(new MySqlParameter("?createday",MySqlDbType.DateTime));
cmd.Parameters["?createday"].Value = DateTime.Now;
cmd.ExecuteNonQuery();
}
conn.Close();

[退会済みユーザー]

↓ これのせいだと思います。検証してみました。後で回答欄に詳細を書いておきます。

> options.beforeSend= function(xhr) {
> xhr.overrideMimeType('text/html;charset=Shift_JIS');
> };

[Qoo]

ありがとうございます！
ちなみに、今本番環境（windows2012 server r2）でテストしたところ、
文字化けせずデータ格納できることが確認できました
検証までして頂いて、、ほんとうにありがとうございます！

[退会済みユーザー]

もう少し詳しく見てみましたが上記はサーバー側の動作に影響してなかったです。でも、念のため質問者さんの方でも削除して試してみてください。

[退会済みユーザー]

> ちなみに、今本番環境（windows2012 server r2）でテストしたところ、文字化けせずデータ格納できることが確認できました

ということは、開発環境の MySQL に問題があったということでしょうか？　せっかくなので自分の検証結果を回答欄に書いておきます。回答ではありませんが、回答欄でないと画像を貼れませんのでご容赦ください。

[退会済みユーザー]

質問者さん、お手数ですが、ご自分で回答欄に解決した方法を書いて、それにマークを付けてこのスレッドはクローズ願います。開発環境で何故ダメだったかを調査中で、その結果を書いてクローズしたいということでしたらその限りでがありませんが。

Answer 1

質問に対する 2021/11/12 11:50 の私のコメントで「せっかくなので自分の検証結果を回答欄に書いておきます。回答ではありませんが、回答欄でないと画像を貼れませんのでご容赦ください」と書いた件です。

検証に使ったコードを下の方に貼っておきます。MySQL に INSERT するところまでは含んでいませんが、その他は質問者さんのコードとほぼ同じです。

最初、

options.beforeSend= function(xhr) {
xhr.overrideMimeType('text/html;charset=Shift_JIS');
};

で送信ヘッダに、

Content-type: text/html;charset=Shift_JIS

が含まれるのかと思っていましたが、それは全く関係なくて、以下の Fiddler の画像の通り Content-Type は正しく設定され、送信されるフォームデータも正しく（application/x-www-form-urlencoded 形式になり、日本語の部分は UTF-8 のパーセントエンコーディング）なります。

それを受信する .ashx でも文字化けは起こしてません。

なので、文字化けの問題があるとすると、その先の ADO.NET + Connector/NET を使ってのコードや MySQL の設定ということになるかと思いますが、本番環境では問題なかったということは MySQL の設定が原因でしょうか。または、パラメータ名が @name がダメで ?name は問題なかったのとことなので、Connector/NET (MySql.Data.dll）が問題とか？

なお、options.beforeSend=... の設定があるとどうなるかと言うと、jQuery.ajax が応答を受信した処理に問題が出るはずです。

下の画像を見てください。 上の Fiddler の画像で受信側のヘッダで chatset=utf-8 となっているとおり UTF-8 でコンテンツが返ってきていますが、options.beforeSend=... の設定で jQuery.ajax は Shift_JIS として解釈した結果文字化けしています。

.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" 
    AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
    Inherits="WebApplication2._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h1>Default.aspx</h1>
    <input id="Button1" type="button" value="button" />
    <div id="div1"></div>
    <script>
        $(function () {
            var javascriptObject = { mode: "test", device: "日本語", qr: "http://xxxxx.com" };

            $("#Button1").on("click", function () {
                $.ajax({
                    type: "POST",
                    url: "FileUploadHandler.ashx",
                    data: javascriptObject,
                    beforeSend: function (xhr) {
                        xhr.overrideMimeType('text/html;charset=Shift_JIS');
                    },
                    success: function (data) {
                        $("#div1").text(data);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        // ・・・省略・・・
                    }
                });
            });
        });
    </script>
</asp:Content>

.ashx

using System.Web;

namespace WebApplication2
{
    /// <summary>
    /// FileUploadHandler の概要の説明です
    /// </summary>
    public class FileUploadHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            var mode = context.Request.Form["mode"];
            var device = context.Request.Form["device"];
            var qr = context.Request.Form["qr"];

            context.Response.ContentType = "text/plain";
            context.Response.Write($"{mode}, {device}, {qr}");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Comments

[Qoo]

ご連絡が遅くなりました。もう一台仮想環境ですが、　サーバと同じバージョンのもので
windows１０＋VS２０１９＋XAMPP環境を使用してチャレンジしたところ、文字化けは発生しませんでした、やはり文字化けが起こったPCではMYSQLの設定か、MySql.Data.dllなど、他の要因がありそうです。
一度、現在の環境をアンインストールして、本番環境と同じバージョンでチャレンジしたいと思います。

いつも検証までしていただきありがとうございます！