我想将文件路径从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));
}
发布于 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>
发布于 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用于标记
发布于 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);
})
https://stackoverflow.com/questions/51518996
复制相似问题