Pass complex type to Bootstrap modal

Question

The project is an ASP MVC 6 application. I'm trying to pass a class object to Bootstrap modal dialog. I went through some articles describing how data can be passed to the modal dialog using JQuery script. The examples cover passing simple data types like an int or string value but my luck could not get one with complex types.

As a workaround I tried serializing the class object to json string and could successfully pass it to the modal dialog (code snippet provided). But, I'm stuck up at deserializing the json to ViewModel object and further updating the controls with the object values in the modal dialog. could someone provide some directions in solving the issue?

HTML (ASP Razor view)

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

JQuery script

$("#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);
 });

Am I on the right path in achieving what I wanted? Any better/alternative solutions?

Answer 1

I gave a try and could achieve what I wanted. I'm still eager to find out a better solution though. I've tried to explain what worked for me.

The solution that worked for me is, deserialize the json object (complex type) and assign the values to the controls individually in the modal show callback event. The name attribute of the controls should match the ViewModel type to get the values in form submission. The values can still be submitted separately as name-value pair of the controls if you do not wish to pass complex type to Action method.

JQuery script

$("#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 modal)

<!-- 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();
    }