Question

我有一个页面，该页面从数据库加载最后25行并将其显示在表中。我希望能够单击一个链接，并有一个包含更多信息的模式弹出窗口。除了知道单击了哪一行ID之外，我一切正常。下面是我目前所拥有的。 Model.ClickedId永远不会更改默认值，因此每次弹出窗口都会显示相同的消息。

如何做到这一点，以便在单击链接时将后端的ClickedId设置为item.Id？

后端：

public int ClickedId { get; set; } = 0;

前端：

@foreach (var item in Model.SFException)
   {
      <tr>
         <td>
            <a href="#" data-toggle="modal" data-target="#exampleModalCenter" onclick="@Model.ClickedId=@item.Id">View</a> <!-- Set ID to item.ID? -->
         </td>
         <td>
            @Html.DisplayFor(modelItem => item.ObjectType)
         </td>
         <td>
            @Html.DisplayFor(modelItem => item.ObjectKeyProperty)
         </td>
         <td>
            @Html.DisplayFor(modelItem => item.ObjectKeyValue)
         </td>
          ...

我试图显示更多信息的模式代码：

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Exception Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @Html.DisplayFor(model => model.SFException[Model.ClickedId].StackTraceErrorMessage)
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

过去我有几种方法可以做到这一点。要么：

获取所有行所需的所有信息并将其转储到页面上（也许在隐藏的元素中），然后在用户与您的行进行交互时显示/隐藏相关的额外信息。根据您需要多少额外信息，这可能会产生一些开销。

将“ StackTraceErrorMessage”放在页面上类似的位置

<td class="open-modal" data-itemId="@item.Id">
    View
    <input type="hidden" value="@item.StackTraceErrorMessage" />
</td>

然后在JS中查找单击“查看”文本的时间，将StackTraceErrorMessage从隐藏区域移至模式html并显示模式html

$(document).ready(function() {
    $(".open-modal").click(function() {
        // get the item id from the clicked on element
        var itemId = $(this).data("itemId");
        // get the relevant StackTraceErrorMessage and put in the modal html
        var message = $(this).find('input').val();
        $('.modal-body').html(message);
        // show the modal html (presumably this has styles associated to make it look like a dialog)
        $('.modal).show();
    });
)};

第二个选项是，将基本信息放在页面上，然后当用户与之交互时，返回服务器端请求更多详细信息，然后显示该信息。此方法还有更多的来回设置。

您行中的链接看起来像这样：

<td data-itemId="@item.Id" class="show-row-details">View</td>

其中，商品ID作为属性存储在元素中，并附加了一个类，因此我们可以观察点击情况。然后，在您的js中，您将查找任何点击：

$(document).ready(function() {
    $(".show-row-details").click(function() {
        // get the item id from the clicked on element
        var itemId = $(this).data("itemId");
        // make a request to the backend for more info
        $.ajax({
          url: baseUrl + "YourController/YourAction",
          data: { itemId : itemId  },
          success: function (data) {
             // put the data returned into the popup element on our page and make it visible
             $('#popup').html(data);
             $('#popup').show();
          }
        })
    });
)};

因此，要在您的页面上支持此功能，您需要准备好一点，以便从后端接收数据

<div id="popup" style="display:none"></div>

，并且您还需要在后端上使用一个控制器和一个操作，该操作和操作将返回要在弹出div中显示的HTML（几乎只是一个加载带有'的局部视图（即无布局）的操作）模式代码”。

注意：我实际上没有尝试上面的代码，因此可能存在一些语法错误等

单击链接时更改变量

1 个答案: