將復雜類型傳遞給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();
    }