2

tengo el siguiente codigo.

<div class="table ">
        @grid.GetHtml(tableStyle: "table highlight hoverable"
                  , columns: new[] {
        grid.Column("Persona"),
        grid.Column("Calificacion"),
        grid.Column("ente",header:"Ente Calificador"),
        grid.Column("Tareas"),
        grid.Column("Descri", header:"Descripción"),
        grid.Column("Fecha",
                    header: "Fecha de Vencimiento",
                    format: p=>p.Fecha.ToShortDateString()),
        grid.Column("Url",header:"Adjunto",format:@<text><a title="Adjunto" href="~/doc/@item.Url#toolbar=0" target="_blank"><i class="material-icons right">library_books</i></a></text>)
                                          })
    </div>

y quiero pasar via javascript el valor de href en el vinculo cuando hago click con el mouse en el mismo. a un modal que detallo abajo. en el atributo src de la etiqueta embed. teniendo en cuenta que el webgrid genere una tabla con registros distintos y enlaces distintos.

<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Calificacion</h4>
        <embed src="" />
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

como podría hacer esto.

1 respuesta 1

0

Si puedes agregar ids al <a> y al <embed>, puedes hacerlo asi:

document.getElementById("adjunto").addEventListener("click", function() {
  var href = this.getAttribute("href");
  document.getElementById("embed").src = href;
  $("#modal1").modal();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="table ">
        <text><a id="adjunto" title="Adjunto" href="~/doc/@item.Url#toolbar=0" target="_blank"><i class="material-icons right">library_books</i></a></text>
    </div>


<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Calificacion</h4>
        <embed id="embed" src="" />
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

3
  • hola muchísimas gracias. y para disparar el modal en la misma función que se le podría agregar.? Commented el 1 ago. 2018 a las 11:15
  • Tambien cuando la webgrid genera varias filas distintas con distintos id . se puede saber el id del objeto al que se le hizo click y ahi recien hacer la funcion que me comentaste. Commented el 1 ago. 2018 a las 11:30
  • Para mostrar el modal solo necesitas agregar $("#modal1").modal(); al final de la funcion. Ya edite mi respuesta.
    – alanfcm
    Commented el 1 ago. 2018 a las 17:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.