How to pass Image from View to Bootstrap Modal in MVC?

Question

I want to pass filepath from view to Modal. But currently, the value of filepath is getting undefined.

Please guide me where I am getting wrong.

Script

  var row;
    $(document).on('click', '.mdlEdit', function () {
        debugger;
        row = $(this).closest('tr');   

        var link = $.trim(row.find('.Link').text());
       var filepath = $(this).data("Id");    

        $('#Title').val(title);
        $('#Link').val(link);

        $('#filePath').attr('src', filepath);

    })

Piece of code from view

<tr>
    <td class="Title">
        @item.Title
    </td>
    <td class="Link">
        @item.Link
    </td>

    <td class="filePath">
    <a target="_blank" data-id="@item.FilePath" href=@item.FilePath title="Enlarge Image">
                @Html.Image(item.FilePath, "Image", "60px", "", "img-thumbnail")
      </a>
    </td>
 <td>
  <a class="mdlEdit" data-toggle="modal" data-target="#EditRecord">Edit</a>

  </td>
</tr>

Custom Image Html Helper

public static IHtmlString Image(this HtmlHelper helper, string src, string alt, string height, string width, params string[] allClasses)
{
    TagBuilder tb = new TagBuilder("img");
    tb.Attributes.Add("src", VirtualPathUtility.ToAbsolute(src));//throws error
    tb.Attributes.Add("alt", alt);
    if (!string.IsNullOrEmpty(height) || !string.IsNullOrEmpty(width))
    {
        StringBuilder value = new StringBuilder();

        if (!string.IsNullOrEmpty(height))
            value.AppendFormat("height:{0};", height);

        if (!string.IsNullOrEmpty(width))
            value.AppendFormat("width:{0};", width);

        tb.Attributes.Add("style", value.ToString());
    }
    if (allClasses?.Any() ?? false)
        tb.Attributes.Add("class", string.Join(" ", allClasses));

    return new MvcHtmlString(tb.ToString(TagRenderMode.SelfClosing));
}

Answer 1

 var row;
    $(document).on('click', '.mdlEdit', function () {
        debugger;
        row = $(this).closest('tr');   

        var link = $.trim(row.find('.Link').text());
       var filepath = $(this).prop('data-id');  //add this line  

        $('.Title').val(title);
        $('.Link').val(link);

        $('.filePath a').attr('src', filepath);

    })

Answer 2

You need:

var row = $(this).closest('tr');
var filepath = row.find('td.filePath a').data('id');

As you already specified data-toggle="modal" data-target="#EditRecord" in your Edit link, all you need is adding the dialog to the Html and setting a value to be displayed: $('#modalContent').text(filepath); as shown in following snippet.

and finally copy src attribute:

$('#EditRecord .img-thumbnail').attr('src', filepath);

$(document).on('click', '.mdlEdit', function() {
  var row = $(this).closest('tr');

  var filepath = row.find('td.filePath a').data('id');

  $('#modalContent').text(filepath);
  $('#EditRecord .img-thumbnail').attr('src', filepath);
})

a.mdlEdit:hover {
  cursor: pointer;
  background-color: cyan;
}

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

<table>
  <tr>
    <td class="filePath">
      <a target="_blank" data-id="https://farm2.staticflickr.com/1070/553600544_dd5b2f39ec_m.jpg" href="https://farm2.staticflickr.com/1070/553600544_dd5b2f39ec_m.jpg" title="Enlarge Image">
        <img src="https://farm2.staticflickr.com/1070/553600544_dd5b2f39ec_m.jpg" alt="Image" style="height:60px;" class="img-thumbnail" />
      </a>
    </td>
    <td>
      <a class="mdlEdit" data-toggle="modal" data-target="#EditRecord">Edit modal</a>

    </td>
  </tr>
  <tr>
    <td class="filePath">
      <a target="_blank" data-id="https://farm2.staticflickr.com/1125/553600532_3b70325b49_m.jpg" href="https://farm2.staticflickr.com/1125/553600532_3b70325b49_m.jpg" title="Enlarge Image">
        <img src="https://farm2.staticflickr.com/1125/553600532_3b70325b49_m.jpg" alt="Image" style="height:60px;" class="img-thumbnail" />
      </a>
    </td>
    <td>
      <a class="mdlEdit" data-toggle="modal" data-target="#EditRecord">Edit modal</a>

    </td>
  </tr>
</table>

<!-- Modal -->
<div class="modal fade" id="EditRecord" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="exampleModalLabel">Edit record dialog</h4>
      </div>
      <div class="modal-body">
        <div id="modalContent"></div>
        <img alt="Image" style="height:60px;" class="img-thumbnail" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 3

You're looking for $(this).data("Id") (capital I) when the actual data attribute is not with a capital i. Also, as charan kumar said, you need to change '#' to '.' because you're using classes and not ids.

One more point. In the HTML you posted there is no element with "mdlEdit" class (which is the element you listen to its click event).

Answer 4

it seems you are using "id"

$('#Title').val(title);
$('#Link').val(link);
$('#filePath').attr('src', filepath);

in td it is class="Title"

it must be

$('.Title').val(title);
$('.Link').val(link);
$('.filePath').attr('src', filepath);

and $('#filePath').attr('src', filepath); there is no attr like src for .filePath, attr is for a tag