Question

如下所示，使用tr和td在行中显示一些数据。有Name，Surname和Age字段。当用户单击特定行时，这些数据将由我的java脚本代码获取并传递到我的模态窗口。一切都很好，期待一件事。除了引用的字段之外，我的db表还包含Id，我不想在行中向用户显示，但我需要它在Url.Action method的模态和休息字段中。我知道我可以通过将此Id添加到新的td作为其余字段来简单地做到这一点，但正如我之前所说，我不想将该字段呈现给用户。那么我怎么能实现这样做呢？下面找到我的代码。

...
@For Each item In Model.Transports
   Dim currentItem = item
     @<tr data-toggle="modal" data-target="#myModalTransportDetails">

     <td class="col-lg-1">@item.Name</td>
     <td class="col-lg-1">@item.Surname</td>
     <td class="col-lg-1">@item.Age</td>
...

我的Java脚本从我的tr中获取数据并在用户单击行时置于模态中：

$(document).ready(function () {
    $('#myModalTransportDetails').on('show.bs.modal', function (event) {
 $(this).find('#label1').val($(event.relatedTarget).find('td:first-child').text());
 $(this).find('#label2').val($(event.relatedTarget).find('td:nth-child(2)').text());
 $(this).find('#label3').val($(event.relatedTarget).find('td:nth-child(3)').text());
 });
    });

以下是我的模式，其中数据存在于用户。如果你看看它的底部，你会看到我正在传递.id = 1 - 这就是我不知道如何在这里转移这个ID而不将其显示为休息字段的观点。

  <div id="myModalTransportDetails" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Transpot informationr</h4>
                </div>
                <div class="modal-body" id="orderDetails">

                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-sm-4">LP:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control red-stripe" id="label1">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4">Status:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control red-stripe" id="label2">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-4 text-left">Arrive date:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control red-stripe" id="label3">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">




 <a href="@Url.Action("Details", "TransportGallery", New With { .id = 1} )" class="btn btn-primary">
                        Show pictures
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
                    </a>


                    <button type="button" class="btn btn-warning glyphicon glyphicon-off" data-dismiss="modal"> Close</button>

                </div>
            </div>
        </div>
    </div>

修改如你所说，我提出了tr：

   @<tr data-toggle="modal" data-target="#myModalTransportDetails" data-id="@item.id">

然后是js：

 $(document).ready(function () {
        $('#myModalTransportDetails').on('show.bs.modal', function (event) {
     $(this).find('#label1').val($(event.relatedTarget).find('td:first-child').text());
     $(this).find('#label2').val($(event.relatedTarget).find('td:nth-child(2)').text());
     $(this).find('#label3').val($(event.relatedTarget).find('td:nth-child(3)').text());


       var id = $(event.relatedTarget).data('id');

        var href = $('#details').attr('href'); // currently returns '/TransportGallery/Details/1'
        href = href.slice(0, href.lastIndexOf('/') + 1) + id;
        $('#details').attr('href', href);



     });
        });

如何修改？：

  <a href="@Url.Action("Details", "TransportGallery", New With { .id = 1} )" class="btn btn-primary" id="details">
                    Show pictures
                    <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
                </a>

Answer 1

您可以将模型的id存储为data-元素的<tr>属性

<tr data-id="@item.id" data-toggle="modal" data-target="#myModalTransportDetails">
    <td class="col-lg-1">@item.Name</td>
    ....

在您的脚本中，您可以使用

检索它

var id = $(event.relatedTarget).data('id');

然后，您需要更新链接的href属性。为链接指定唯一的id（例如id="details"）并将以下内容添加到脚本

var href = `$('#details').attr('href'); // currently returns '/TransportGallery/Details/1'
href = href.slice(0, href.lastIndexOf('/') + 1) + id;
$('#details).attr('href', href);

这会将href属性链接更新为/TransportGallery/Details/##，其中##是模型的ID。

Bootstrap将td值传递给modal但未在行

1 个答案: