Sending Link Information to a Modal

Question

I am developing using Bootstrap and ASP.NET MVC. I am using a Table where on each line I have the Edit and Delete buttons. I am using the following code:

<div class="container">
    @foreach (var item in Model.REGISTRO_PERGUNTAS)
    {
        <tr>
            <td>@item.ID_ARQUIVO</td>
            <td>@item.NUMERO_PERGUNTA</td>
            <td>@item.PERGUNTA</td>
            <td>
                @Html.ActionLink("Editar", "Editar", "Cadastros", 
                new { id = item.NUMERO_PERGUNTA}, 
                new { href = "#myModal", data_toggle = "modal" })
            </td>
            <td>
                @Html.ActionLink("Deletar","Deletar", "Cadastros", 
                new { id = item.NUMERO_PERGUNTA, pergunta = item.PERGUNTA }, 
                new { href = "#myModal", data_toggle = "modal" })
            </td>
        </tr>
    }
</div>

I wonder how do I get the values of the line I click on Edit or Delete and send them to modal that I created?

Answer 1

Add attributes of data-nome-do-atributo in the link as follows

<a href="#my_modal" data-toggle="modal" data-id-pergunta="1234">Editar</a>

and use bootstrap modal on show event

$('#my_modal').on('show.bs.modal', function(e) {
    var idPergunta = $(e.relatedTarget).data('id-pergunta');
    $(e.currentTarget).find('input[name="perguntaId"]').val(idPergunta);
});

If using JS frameworks for front end like Angular or Knockoutjs would be even simpler, but I think it should suit you

Jsfiddle

Answer 2

The most practical way I can think of is for you to call modal where necessary, by doing so within a function where you first collect the data you need and send it to modal.

Remove the modal call via attribute from your code data:

<a data_toggle="modal"/> <!-- não usar isto, vamos chamar com JavaScript -->

jQuery

$(document).ready(function(){

  // anexamos o evento à classe de CSS "modal-trigger"
  $('.modal-trigger').on("click", function(e) {
    e.preventDefault();

    // recolhemos os dados que pretendemos
    var $this  = $(this),
        $modal = $($this.data("target")),
        name   = $this.data("name"),
        action = $this.data("action"),
        title  = $this.closest("tr").find("td:first-child").html();

    // se a markup da modal existe, alteramos o que pretendemos
    if ($modal.size()==1) {

      $modal.find('#myModalLabel').html("A " + action + " " + title);
      $modal.find('.modal-body').html("Hei " + name + ", é para " + action + "?");
      // chamamos a modal
      $modal.modal('show');
    }
  });
 });

In the code above and example below, what is done:

• Attach click event so that by clicking an element of the page that contains the CSS class modal-trigger a certain code is executed;
• We cancel the default behavior of this element using the method preventDefault();
• We collect data from the button using the method .data(), additionally we collect a text from the table row where the button is;
• We check whether the modal is present in the DOM by counting the total of elements with the ID of the DOM, see method .size();
• If there is we will change the title of modal and the contents thereof with the data received;
• Finally, we call the modal making use of the method .modal('show').

---

Demonstrations

$(document).ready(function(){

  $('.modal-trigger').on("click", function(e) {
    e.preventDefault();

    var $this  = $(this),
        $modal = $($this.data("target")),
        name   = $this.data("name"),
        action = $this.data("action"),
        title  = $this.closest("tr").find("td:first-child").html();

    if ($modal.size()==1) {

      $modal.find('#myModalLabel').html("A " + action + " " + title);
      $modal.find('.modal-body').html("Hei " + name + ", é para " + action + "?");

      $modal.modal('show');
    }
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<table class="table table-bordered">
  <tbody>
    <tr>
      <td>
        Coisas boas na vida
      </td>
      <td>
        <button type="button" class="btn btn-primary btn-sm modal-trigger" data-target="#myModal" data-name="bubu" data-action="Editar">Editar</button>
      </td>
      <td>
        <button type="button" class="btn btn-danger btn-sm modal-trigger" data-target="#myModal" data-name="bubu" data-action="Apagar">Apagar</button>
      </td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fechar</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Siga...</button>
      </div>
    </div>
  </div>
</div>

Demonstration also in Jsfiddle.