单击链接时更改变量

Question

I have a page that loads the last 25 rows from a database and displays them in a table. I want to be able to click a link and have a modal popup that contains more information. I've got everything working except for knowing which row Id was clicked. Below is currently what I have. Model.ClickedId never changes from the default value so the popup has the same message everytime.

How can I make it so ClickedId on the backend is set to item.Id when the link is clicked?

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

And the modal code where I am trying to display more information:

<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

There are a couple of ways I've done this in the past. Either:

1. Get all the information that all rows need and dump it on the page (maybe in hidden elements), then when the user interacts with your rows show/hide the relevant extra information. Depending on how much extra info you need there can be a bit of overhead with this.

Put the 'StackTraceErrorMessage' on the page somewhere like

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

Then in JS look for when the 'View' text is clicked, move the StackTraceErrorMessage from the hidden area to the modal html and display the modal 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. The second options is, put the basic information on the page and then when the user interacts with it go back to the server-side to request more details and then display that. There's a bit more back-and-forth and setup for this method.

The link in your row would look something like this:

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

Where the item id is stored as an attribute in the element and a class is attached so we can watch for clicks. In your js you would then look for any clicks like :

$(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();
          }
        })
    });
)};

So to support this on your page you would need an elment ready to recieve data from the backend

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

and also you would need a controller and action on your backend that is going to return the Html that you want to display in the popup div (pretty much just an action that loads a partial view (ie no layout) with your 'modal code' in it).

Note: I haven't actually tried the above code, so there may be some syntax errors etc