javascript - 单击链接时更改变量

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

我过去有过几种方法来做到这一点。要么:

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

将“StackTraceErrorMessage”放在页面上的某个位置

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

然后在 JS 中查找单击“View”文本时，将 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>

并且您还需要在后端有一个 Controller 和操作，它将返回您想要在弹出 div 中显示的 Html(几乎只是一个使用您的 ' 加载部分 View (即无布局)的操作)模态代码')。

注意:我还没有实际尝试过上面的代码，所以可能存在一些语法错误等