javascript - 将复杂类型传递给 Bootstrap 模式

Question

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

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

HTML(ASP Razor View )

<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( Bootstrap 模式)

<!-- 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 Controller

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