首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在MVC中将图像从View传递到Bootstrap Modal?

如何在MVC中将图像从View传递到Bootstrap Modal?
EN

Stack Overflow用户
提问于 2018-07-25 20:33:07
回答 4查看 1.1K关注 0票数 2

我想将文件路径从view传递给Modal。但目前,filepath的价值正在变得越来越接近undefined

请告诉我哪里弄错了。

脚本

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

    })

视图中的代码片段

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

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-07-25 21:11:54

您需要:

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

因为您已经在Edit链接中指定了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>

票数 2
EN

Stack Overflow用户

发布于 2018-07-25 20:35:38

看起来你用的是"id“

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

在td中,它是标题“class=”

它一定是

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

和$('#filePath').attr(' src ',filepath);没有像src这样的属性用于.filePath,attr用于标记

票数 2
EN

Stack Overflow用户

发布于 2018-07-25 20:51:57

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

    })
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51518996

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档