jsonファイルの内容を表示できるのか?

Question

ASP.NET MVCで、JSONファイルをserializeしたオブジェクトをcontrollerで、アラートや出力ウインドウなどで表示できるかを試しているのですが、返ってくるのはNULL値ばかりです。

View内で手打ちした内容は持ってきているのですが、ファイルから読み込んだものは持ってきていないようです。

ファイルを見てみると、中で、階層構造となっているっぽくて、Model部分で定義されているクラスのデータを構造化すればいいんじゃないかというアドバイスをもらったのですが、調べてみても、構造化の宣言した後にクラスの宣言をしたサンプルがのっている記事はありませんでした。

(前述の解決方法が正しいかはさておき)JSONファイルの内容をserializeしたオブジェクトをコントローラに持っていけるような解決策を教えて欲しいです。

開発環境: Visualstudio2017 .NETFramework4.6
言語: ASP.NET MVC C#
使用ツール:DHTMLX Gantt (URL:https://docs.dhtmlx.com/gantt/ )

【コード】
<index.cshtml>

<script type="text/javascript" >
function jsonExport() {
var json = new Object();
json = gantt.serialize('json');
var gnt = JSON.stringify(json.data);
alert(gnt);
var aj = '@Url.Action("JSONTest")';

$.ajax(
{
type: 'POST',
url: aj,                    
data: gnt,                     
dataType: 'json',
contentType: 'application/json',

error: function () { },
complete: function (data) { alert(data.responseText) }
}
);
}
</script>

[HomeControllers.cs]

public ActionResult JSONTest(Data viewModel,Object son)
{
string[] vs = new string[4];
vs[0] = viewModel.Text;
vs[1] = viewModel.StartDate.ToString();
vs[2] = viewModel.EndDate.ToString();
vs[3] = viewModel.Duration.ToString();
return Json(vs);
}

[Data.cs(Model)]

namespace GantDHT.Models
{
public class Data { 

public int Id { get; set; }
public string Text { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }   
public int Duration { get; set; }
}
}

【gntの内容】
[{"id":1,"text":"project #1","start_date":"2020-05-06","end_date":"2020-05-26","user":3,"duration":20,"parent":0,"progress":0},
{"id":2,"text":"Task #1","start_date":"2020-05-06","end_date":"2020-05-16","user":0,"duration":10,"parent":1,"progress":0},
{"id":3,"text":"Task #2","start_date":"2020-05-16","end_date":"2020-05-26","user":0,"duration":10,"parent":1,"progress":0}]

Comments

[退会済みユーザー]

コードは ``` と ``` で囲ってください。インデントされて見やすくなるので。インデントされてないコードは質問者さん自身も読む気がしないのでは？　赤の他人の回答者・閲覧者はなおさらです。読んでもらえる努力をしてください。

[退会済みユーザー]

以前のようにコメントや回答にフィードバックを返さないということは止めましょう。そこは今後改善してもらえますか？

[j-nagnn]

分かりました。改善するようにします。

[退会済みユーザー]

ではまずコードは ``` と ``` で囲ってください。

[j-nagnn]

直させていただきました。見やすくなったでしょうか?

[退会済みユーザー]

画像の「localhost:62353 の内容」というのは何なのですか？　この JSON 文字列を jQuery ajax を使ってアクションメソッド JSONTest に送信し、JSON 文字列を C# のオブジェクトにデシリアライズして引数にモデルバインドできればいいのですか？

であれば、「localhost:62353 の内容」を画像でなく、コピペしてメモ帳などに張り付けられるようにテキストにしてください。

[j-nagnn]

>>この JSON 文字列を jQuery ajax を使ってアクションメソッド JSONTest に送信し、JSON 文字列を C# のオブジェクトにデシリアライズして引数にモデルバインドできればいいのですか？
引数のオブジェクトは、それを入れないと、JSON文字列が入れられないのかと思い何となく追加しました。現段階では、配列vs[]に"text"や"startdate"のデータを格納したいです。
(無知を承知の上で聞きます)デシリアライズして引数にモデルバインドしないと実現できないのですか?

[j-nagnn]

>>「localhost:62353 の内容」を画像でなく、コピペしてメモ帳などに張り付けられるようにテキストにしてください。
テキストベースに直しました

[退会済みユーザー]

jQuery ajax のコードの data: gnt, の gnt が「localhost:62353 の内容」の JSON 文字列だと思っていたのですが、違うのですか？　違うのであれば gnt に代入される文字列を書いてください。

[j-nagnn]

>>data: gnt, の gnt が「localhost:62353 の内容」の JSON 文字列だと思っていたのですが、違うのですか？
いえ、その認識であってます

[退会済みユーザー]

「localhost:62353 の内容」の JSON 文字列には id 1 ～ 3 の 3 つの要素が含まれていますが、質問に書いてあるコードでは一つだけ Data というクラスにデシリアライズすることを考えているのですよね。そこはどうしたいのですか？

[j-nagnn]

出来れば3つとも、デシリアライズしたいです。

[退会済みユーザー]

コレクションのモデルバインディングは普通に View から POST すれば可能ですが、jQuery ajax で JSON を送信してということですと無理っぽいです。（自分が知らないだけという可能性は否定しきれませんが。カスタムモデルバインダとかを使えば可能かもしれませんけど）

一つずつという方法なら紹介できますが、それでは意味がないですか？

[退会済みユーザー]

どうしても 3 つともということであれば、【gntの内容】を文字列としてそのまま POST し、アクションメソッドの内部で Newtonsoft.Json とか JavaScriptSerializer を使って List<T> 型のオブジェクトにデシリアライズするという方法も考えられます。

どうするかよく考えてフィードバックください。

[j-nagnn]

複数のデータを送りたいので「【gntの内容】を文字列としてそのまま POST し、アクションメソッドの内部で Newtonsoft.Json とか JavaScriptSerializer を使って List<T> 型のオブジェクトにデシリアライズする」方法がいいのかもしれないです。

[退会済みユーザー]

3 つとも取得する方向でもう少し考えてみました。アクションメソッドの内部で Newtonsoft.Json とか JavaScriptSerializer を使って List<T> 型のオブジェクトにデシリアライズという必要はなかったです。後で回答欄にやり方を書いておきます。

[j-nagnn]

ありがとうございます。
もし、Nuget等でインストールするものがあれば教えていただけると幸いです。

[退会済みユーザー]

> Nuget等でインストールするものがあれば教えていただけると幸いです。

それは必要ないです。

Answer 1

質問に書いてある【gntの内容】の JSON 文字列には 3 つのオブジェクトが含まれていますが、それを POST してアクションメソッドの引数に List<T> 型のオブジェクトにデシリアライズしてモデルバインドするやり方を書きます。

まず List<T> の T クラスの定義が必要ですが、それは Visual Studio を使って生成できます。詳しくは以下の記事を見てください。

JSON 文字列から C# のクラス定義生成
http://surferonwww.info/BlogEngine/post/2020/05/10/generate-class-definition-from-json-string.aspx

以下のようになります。start_date, end_date は string 型となっていますが、JSON の value に直接設定できるのは string, number, object, array, true, false, null だけなので、JavaScript の Date オブジェクトや .NET Framework の DateTime オブジェクトは string にせざるを得ないということに注意してください。

public class Rootobject
{
    public Class1[] Property1 { get; set; }
}

public class Class1
{
    public int id { get; set; }
    public string text { get; set; }
    public string start_date { get; set; }
    public string end_date { get; set; }
    public int user { get; set; }
    public int duration { get; set; }
    public int parent { get; set; }
    public int progress { get; set; }
}

質問者さんの JavaScript のコードの data: gnt, の gnt が【gntの内容】の JSON 文字列（文字列という点に注意）で、それがそのままアクションメソッド JSONTest に送信されると理解していますが、その場合引数を List<Class1> 型にすれば 3 つのオブジェクトがその引数にモデルバインドされるはずです。

一応自分の環境で検証しましたが、以下のように期待通りモデルバインドされています。

お試しください。

Comments

[j-nagnn]

検証までしていただきありがとうございます。
後程試させていただきます