javascript - 出现时将对象传递给模态

Question

我有一个简单的表格，可以编辑特定行的元素。当用户点击图标(带有 icon ion-md-create 类)模式时出现，然后用户可以编辑数据。 Modal 包含表单，因此当用户提交表单时， Controller 会用新数据更新数据库。

这是我显示行的方式:

@foreach (var measurement in Model.WeightMeasurements)
{
    <tr>
        <td>@Html.DisplayFor(x => measurement.MeasurementDate)</td>
        <td>@Html.DisplayFor(x => measurement.Value)</td>
        <td>
            <a class="btn-icon" href="#" data-toggle="modal" data-target="#editWeight" data-id="@measurement.Id" data-weight="@measurement.Value" data-date="@measurement.MeasurementDate"> 
                <i class="icon ion-md-create"></i> 
            </a>
        </td>
    </tr>
}

这就是我获取每一行数据并将它们插入模态的方式:

$(document).ready(function () {
    $('#editWeight').on('show.bs.modal', function (e) {
        // get data
        var id = $(e.relatedTarget).data('id');
        var weight = $(e.relatedTarget).data('weight');
        var date = $(e.relatedTarget).data('date');

        // insert data in modal
        $('#e_weight_id').val(id);
        $('#e_weight_value').val(weight);
        $('#e_datepickerWeight').val(date);
    });
});

这是我的模式的样子:

<div class="modal animated bounceIn" id="editWeight" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div>
                <div class="modal-body">
                    @using (Html.BeginForm("EditWeightMeasurement", "Measurement", FormMethod.Post, new { @class = "pt-5" }))
                    {
                        @Html.Hidden("e_weight_id", "");
                        <div class="row">
                            <div class="col-6 form-group">
                                <label for="uname">Weight [kg] </label>
                                @Html.TextBox("e_weight_value", "", new { @placeholder = "Edit weight", @class = "form-control", @required = "required" })
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label>Date</label>
                                    @Html.TextBox("e_weight_date", "", new { @id = "e_datepickerWeight", @class = "form -control datepicker" })
                                </div>
                            </div>
                        </div>
                        <div class="d-flex py-3 align-items-center">
                            <div class="ml-auto">
                                <button type="submit" class="btn pink">Save</button>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

我不喜欢 js 的工作方式 - 我不想从 html 获取数据，而是想将整个 measurement 对象传递给 modal(对象从 form 传递到 controller 层的方式相同)。这可能吗？

Answer 1

您只需在模态 Bootstrap 4 中使用 event.relatedTarget 和 HTML data-* 属性

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

You can also visit this bootstrap docs for more information