Submit Link Information for a Modal

1

I'm developing using Bootstrap and ASP.NET MVC. I am using a Table where on each line I have the Edit and Delete buttons. I'm 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'd like to know how to get the values from the line that I click Edit or Delete and sends them to the modal I created?

    
asked by anonymous 30.10.2014 / 21:04

2 answers

2

The most practical way I can think of is to be able to call modal whenever you need it, doing it inside a function where you first collect the data you need and send it back into the modal .

Remove your code from the modal call via the data attribute:

<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 above code and example below, what is done:

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

Statements

$(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><linkhref="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><tableclass="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>

Show also in JSFiddle .

    
31.10.2014 / 12:05
2

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

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

and use the on show event of bootstrap

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

If you use JS frameworks for front end like Angular or KnockoutJs it would be even simpler, but I think that's what you should do.

JsFiddle

    
31.10.2014 / 12:05