Изменить переменную при нажатии на ссылку - PullRequest
Новая
       7

Изменить переменную при нажатии на ссылку

0 голосов
/ 13 декабря 2018

У меня есть страница, которая загружает последние 25 строк из базы данных и отображает их в таблице.Я хочу иметь возможность щелкнуть ссылку и получить модальное всплывающее окно, которое содержит больше информации.У меня все работает, кроме того, что я знаю, по какому ряду был кликнут IdНиже сейчас есть то, что у меня есть.Model.ClickedId никогда не меняется со значения по умолчанию, поэтому у всплывающего окна всегда появляется одно и то же сообщение.

Как я могу сделать так, чтобы ClickedId на бэкэнде было установлено на item.Id при нажатии на ссылку?

Backend: 

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

Front end: 

@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>

1 Ответ

0 голосов
/ 13 декабря 2018

Есть несколько способов, которыми я делал это в прошлом.Либо:

  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>

Где хранится идентификатор элементакак атрибут в элементе и класс прикреплен, чтобы мы могли отслеживать клики.В вашем 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>

иКроме того, вам понадобится контроллер и действие на вашем бэкэнде, которое будет возвращать HTML, который вы хотите отобразить во всплывающем элементе div (в основном, просто действие, которое загружает частичное представление (т.е. без макета) с вашим «модальным кодом» вэто).

Примечание. На самом деле я не пробовал приведенный выше код, поэтому могут быть некоторые синтаксические ошибки и т. д.

...