jquery - 如何在 MVC 中将图像从 View 传递到 Bootstrap Modal？

Question

我想将文件路径从 View 传递到模态。但目前，filepath 的值变得未定义。

请指导我哪里出错了。

脚本

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

    })

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>

自定义图像 Html 助手

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 = $(this).closest('tr');
var filepath = row.find('td.filePath a').data('id');

由于您已经在“编辑”链接中指定了 data-toggle="modal"data-target="#EditRecord"，因此您只需将对话框添加到 Html 并将值设置为显示:$('#modalContent').text(filepath);，如以下代码片段所示。

最后复制 src 属性:

$('#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>