Question

我想将文件路径从视图传递到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));
}

Answer 1

您似乎正在使用“ id”

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

在td中它是class =“ Title”

必须是

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

和$（'＃filePath'）。attr（'src'，filepath）; .filePath没有像src这样的attr，attr是用于标签的

Answer 2

 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 3

您需要：

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>

Answer 4

当实际数据属性不带有大写字母i时，您正在寻找public class MainActivity extends AppCompatActivity implements View.OnTouchListener{ private RecyclerView recyclerView; private GestureDetectorCompat detector; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); detector = new GestureDetectorCompat(this, new GestureDetector.SimpleOnGestureListener() { @Override public boolean onFling (MotionEvent e1, MotionEvent e2,float velocityX, float velocityY){ return false; } }); recyclerView.setOnTouchListener(this); } @Override public boolean onTouchEvent(MotionEvent event) { return detector.onTouchEvent(event); } @Override public boolean onTouch(View v,MotionEvent event) { return detector.onTouchEvent(event); } @Override public boolean dispatchTouchEvent(MotionEvent ev){ super.dispatchTouchEvent(ev); return true; } }（大写I）。另外，正如charan kumar所说，您需要将“＃”更改为“。”因为您使用的是类而不是ID。

还有一点。在您发布的HTML中，没有带有“ mdlEdit”类的元素（这是您监听其click事件的元素）。

如何将图像从视图传递到MVC中的Bootstrap模式？

4 个答案: