使用onclick时Javascript无法更改图像src_Javascript_C#_Asp.net Core_Razor Pages

使用onclick时Javascript无法更改图像src

javascript c# asp.net-core

使用onclick时Javascript无法更改图像src,javascript,c#,asp.net-core,razor-pages,Javascript,C#,Asp.net Core,Razor Pages,我有一个带有许多图像缩略图的表格，当你点击一个图像时，一个模式弹出窗口打开，然后全屏显示缩略图的HTML代码为： <img src='@EngDwgListReturn.EngDwgTnURL' class="" onclick="changedata('@EngDwgListReturn.EngDwgURL')"> 当您单击缩略图时，它会第一次正确地全屏显示，但当您单击另一个缩略图时，它不会显示新图像，只显示您单击的第一个图像请问我做错

我有一个带有许多图像缩略图的表格，当你点击一个图像时，一个模式弹出窗口打开，然后全屏显示

缩略图的HTML代码为：

<img src='@EngDwgListReturn.EngDwgTnURL' class="" onclick="changedata('@EngDwgListReturn.EngDwgURL')">

当您单击缩略图时，它会第一次正确地全屏显示，但当您单击另一个缩略图时，它不会显示新图像，只显示您单击的第一个图像

请问我做错了什么

非常感谢

我测试了你的代码，它对我很有用，下面是一个简单的演示，你可以检查一下

型号

public class Image
{
    public List<EngDwgListReturn> EngDwgListReturn { get; set; }
}

public class EngDwgListReturn
{
    public string EngDwgTnURL { get; set; }
}

 public class IndexModel : PageModel
{
    [BindProperty]
    public  Image Image { get; set; }
    public void OnGet()
    {
        Image = new Image
        {
            EngDwgListReturn = new List<EngDwgListReturn>
           {
              new EngDwgListReturn
              {
                  EngDwgTnURL="/images/aa.jpg"
              },
              new EngDwgListReturn
              {
                  EngDwgTnURL="/images/bb.jpg"
              },
               new EngDwgListReturn
              {
                  EngDwgTnURL="/images/cc.jpg"
              }
           }
        };
        }
}

公共类映像
{
公共列表EngDwgListReturn{get；set；}
}
公共课英语
{
公共字符串EngDwgTnURL{get；set；}
}

PageModel

public class Image
{
    public List<EngDwgListReturn> EngDwgListReturn { get; set; }
}

public class EngDwgListReturn
{
    public string EngDwgTnURL { get; set; }
}

 public class IndexModel : PageModel
{
    [BindProperty]
    public  Image Image { get; set; }
    public void OnGet()
    {
        Image = new Image
        {
            EngDwgListReturn = new List<EngDwgListReturn>
           {
              new EngDwgListReturn
              {
                  EngDwgTnURL="/images/aa.jpg"
              },
              new EngDwgListReturn
              {
                  EngDwgTnURL="/images/bb.jpg"
              },
               new EngDwgListReturn
              {
                  EngDwgTnURL="/images/cc.jpg"
              }
           }
        };
        }
}

公共类索引模型：PageModel
{
[BindProperty]
公共映像映像{get；set；}
公共互联网
{
图像=新图像
{
EngDwgListReturn=新列表
{
新英语
{
EngDwgTnURL=“/images/aa.jpg”
},
新英语
{
EngDwgTnURL=“/images/bb.jpg”
},
新英语
{
EngDwgTnURL=“/images/cc.jpg”
}
}
};
}
}

wwwroot/Images

页面

@page
@model IndexModel
<body>
    <div class="modal" id="DwgModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Picture info</h4>
                </div>
                <div class="modal-body">
                    <img id="DwgModelURL" width="450" height="200" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
@foreach (var EngDwgListReturn in Model.Image.EngDwgListReturn)
{
    <img src='@EngDwgListReturn.EngDwgTnURL' width="40" height="50" onclick="changedata('@EngDwgListReturn.EngDwgTnURL')" />
}
@section Scripts
{
    <script>
        function changedata(ImageURL) {
            document.getElementById("DwgModelURL").src = ImageURL;
            $("#DwgModal").modal('show');
        }
    </script>
}

@page
@模型索引模型
图片信息
}
@节脚本
{
函数changedata（ImageURL）{
document.getElementById（“DwgModelURL”）.src=ImageURL；
$（“#DwgModal”）.modal（'show'）；
}
}

测试

您在开发控制台中是否有任何错误？您好，有关于此案例的更新吗？