将复杂类型传递给Bootstrap模式

Question

该项目是ASP MVC 6应用程序。 我正在尝试将类对象传递给Bootstrap模式对话框。 我阅读了一些文章，描述了如何使用JQuery脚本将数据传递给模式对话框。 这些例子涵盖了传递简单数据类型，如int或string值，但我的运气无法获得具有复杂类型的数据类型。

作为一种解决方法，我尝试将类对象序列化为json字符串，并可以成功将其传递给模式对话框（提供的代码片段）。 但是，我坚持将json反序列化为ViewModel对象，并使用模态对话框中的对象值进一步更新控件。 有人可以提供解决问题的方向吗？

HTML（ASP Razor视图）

<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对象（复杂类型）进行反序列化，并在模态show callback事件中单独将值分配给控件。 控件的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();
    }