複雑なタイプをブートストラップモーダルに渡す

Question

このプロジェクトは、ASP MVC 6アプリケーションです。 Bootstrapモーダルダイアログにクラスオブジェクトを渡そうとしています。 JQueryスクリプトを使用してデータをモーダルダイアログにどのように渡すことができるかを説明する記事をいくつか紹介しました。この例では、intやstringの値のような単純なデータ型を渡していますが、私の運は複雑な型を持つものは得られませんでした。

回避策として、クラスオブジェクトをjson stringにシリアル化して、モーダルダイアログ（コードスニペットが提供されています）に渡すことができました。しかし、ViewModelオブジェクトにjsonをデシリアライズして、モーダルダイアログのオブジェクト値でコントロールをさらに更新しています。誰かが問題を解決するためにいくつかの方向を提示することができますか？

HTML（ASPレイザービュー）

<button role="button" data-toggle="modal" data-target="#updateModal" data-dataid=@JsonHelper.SerializeObject(@item) /> 

jQueryのスクリプト

$("#updateModal").on('show.bs.modal', function (e) { 
    var dataid = e.relatedTarget.dataset.dataid; 

    //populate the textbox - to test data is passed properly 
    $(e.currentTarget).find('textarea[name="dataidval"]').val(dataid); 
}); 

は私が欲しかったものを達成するための正しい道の上にいるだろうか？より良い/代替ソリューションはありますか？

Answer 1

私は試して、私が望むものを達成することができました。私はまだより良い解決策を見つけることを熱望しています。私は何が私のために働いたか説明しようとしました。

私にとっては、jsonオブジェクト（複合型）を逆シリアル化し、モーダルショーコールバックイベントで個別にコントロールに値を割り当てることです。フォームの送信時に値を取得するには、コントロールのname属性がViewModel型と一致する必要があります。複雑な型をActionメソッドに渡したくない場合は、値をコントロールの名前と値のペアとして別々に提出することもできます。

jQueryのスクリプト

$("#updateModal").on('show.bs.modal', function (e) { 

    var dataid = e.relatedTarget.dataset.dataid; 

    //deserialize json 
    var dataObject = JSON.parse(dataid); 

    //populate the controls with values   
    $(e.currentTarget).find('input[name="ViewModel.ID"]').val(dataObject.ID); 
    $(e.currentTarget).find('input[name="ViewModel.Name"]').val(dataObject.Name); 
    $(e.currentTarget).find('input[name="ViewModel.PropertyA"]').val(dataObject.PropertyA); 
    $(e.currentTarget).find('input[name="ViewModel.PropertyB"]').val(dataObject.PropertyB); 
}); 

HTML（ブートストラップモーダル）

<!-- minimal code for the sake of clarity --> 
@model ViewModel 

<form asp-controller="XYZController" asp-action="@nameof(XYZController.Update)" asp-route-returnurl="@ViewData["ReturnUrl"]" 
    method="post" class="form-horizontal" role="form"> 

    <div class="form-group"> 

     <input asp-for="@Model.ID" name="ViewModel.ID" class="hidden" /> 
     <!-- asp-for attributes may not have any effect in this case--> 
     <input class="form-control" asp-for="@Model.Name" name="ViewModel.Name" /> 
     <input class="form-control" asp-for="@Model.PropertyA" name="ViewModel.PropertyA" /> 
     <input class="form-control" asp-for="@Model.PropertyB" name="ViewModel.PropertyB" /> 

    </div> 
</form> 

ASP MVCコントローラ

[HttpPost] 
    public IActionResult Update(ViewModel viewModel) 
    { 
     return View(); 
    }