單擊鏈接時更改變量

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中查找單擊“查看”文本的時間，將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();
    });
)};

2. 第二個選項是，將基本信息放在頁面上，然后在用戶與之交互時，返回服務器端請求更多詳細信息，然后顯示該信息。 此方法還有更多的來回設置。

您行中的鏈接如下所示：

<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（幾乎只是一個用“模態代碼”加載部分視圖（即無布局）的操作）在里面）。

注意：我實際上沒有嘗試過上面的代碼，因此可能存在一些語法錯誤等