时间戳

首页 > 解决方案 > 单击链接时更改变量

javascript - 单击链接时更改变量

问题描述

我有一个从数据库加载最后 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>

标签： javascriptc#razorasp.net-core

解决方案

过去我有几种方法可以做到这一点。任何一个：

  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();
    });
)};
  1. 第二种选择是，将基本信息放在页面上，然后当用户与之交互时返回服务器端请求更多详细信息，然后显示。这种方法有更多的来回和设置。

您所在行中的链接如下所示：

<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（几乎只是一个使用您的“模态代码”加载部分视图（即无布局）的操作）在里面）。

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

推荐阅读