将复杂类型传递给 Bootstrap 模态答案

【问题标题】：Pass complex type to Bootstrap modal将复杂类型传递给 Bootstrap 模态
【发布时间】：2016-10-01 01:46:01
【问题描述】：

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

作为一种解决方法，我尝试将类对象序列化为 json 字符串，并可以成功地将其传递给模式对话框（提供了代码 sn-p）。但是，我坚持将 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);
 });

在实现我想要的目标方面，我是否走在正确的道路上？有没有更好/替代的解决方案？

【问题讨论】：

您可以使用 Ajax 来获取数据。您可以使用 Knockout 或 Angular 绑定值。
我是 Web 开发的新手，现在涉及 Knockout/Angular 的东西太多了。对于 Ajax 调用，我想避免服务器调用我已经拥有的数据。

标签： javascript c# jquery asp.net-mvc twitter-bootstrap

【解决方案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();
    }

【讨论】：