capture the href link with javascript in asp.mvc webgrid

Question

capture the href link with javascript in asp.mvc webgrid

Navigation

#1 by (0 votes)

2

I have the following code.

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

and I want to pass via javascript the value of href in the link when I click with the mouse on it. to a modal that I detail below. in the src attribute of the embed tag. taking into account that the webgrid generates a table with different records and different links.

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

How could I do this.

javascript html5 asp.net-mvc

asked by Martin Vega Mercado 31.07.2018 в 19:53

source

1 answer

How to recycle images Validate select in registration form

score 0 · Accepted Answer

If you can add ids to the <a> and the <embed> , you can do so:

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>