C# 如何使用jQuery将图像添加到对话框窗体

我正在开发MVC应用程序，在我的一个页面上有一个图像库。我想做以下事情：当我点击任何给定的图像打开一个模式对话框并显示图像时（原因是我的页面上没有太多空间）

Javascript代码：

 function openDialog(url)
{
    $("#dialog-form").dialog("open");
    document.getElementById("dialog-form").style ="display: block;"
    document.getElementById("modalImg").src = url;

}

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 800,
    width: 850,
    modal: true,
    buttons: {

        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

剃须刀视图：

<div style="height: auto; width: 100%;">


            @foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
            {
                <div style="float: left; width: 250px;">
                    <img alt='Patka' src='@Url.Content(photo.Url)' width='250' onclick="openDialog('@Url.Content(photo.Url)')"/>
                </div>

            }

            <div id="dialog-form" title="Screenshot Preview" style="display: none;">
                <img alt='ModalPatka' id="modalImg" src=".."/>
            </div>

            <div style="clear: both;"></div>
        </div>   

@foreach（Model.Application.Screenshots.Where（p=>p.Device==1）中的var照片）
{
}

---

但是，当我点击任何图像时，什么都没有发生。知道为什么吗？

您的控制台（Firefox的Firebug或Chrome调试控制台）中是否有javascript错误？我不确定确切的问题是什么，但我可以说您可能应该清理javascript并使用jQuery选择器的全部功能，这可能有助于解决您的问题

以下是我建议的更改：

在预览图像上放置一个类，以便我们可以将jQuery处理程序附加到该元素的单击上

我不确定.src是否是元素上的有效jQuery选择器。尝试使用.attr（）指示符

让我们删除JavaScript中的GetElementById调用，并使用jQuery选择器

我认为对话框调用需要在.Ready jQuery函数中。参见示例

在调用.Dialog函数之前更新DOM元素，以防止屏幕闪烁

删除jQuery选择器中的空格，我认为这不会造成问题，但清理这些空格也不会有什么坏处（例如，

（this）

，而不是

（this）

）。即使jQuery UI示例中有空格，这可能只是一个编码风格问题

JavaScript代码

$(function(){
    $(".OpenDialog").on("click", function(){
        $("#dialog-form").style ="display: block;";
        $("#modalImg").attr("src", $(this).attr("src"));
        $("#dialog-form").dialog({
           autoOpen: false,
           height: 800,
           width: 850,
           modal: true,
           buttons: {    
               Cancel: function() {
                   $(this).dialog("close");
               }
           },
           close: function() {
               allFields.val("").removeClass("ui-state-error");
           }
       });
    });    
}); 

剃须刀视图

<div style="height: auto; width: 100%;">
    @foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
    {
        <div style="float: left; width: 250px;">
            <img alt='Patka' src='@Url.Content(photo.Url)' width='250' class="OpenDialog"/>
        </div>
    }

    <div id="dialog-form" title="Screenshot Preview" style="display: none;">
        <img alt='ModalPatka' id="modalImg" src=".."/>
    </div>

    <div style="clear: both;"></div>
</div> 

@foreach（Model.Application.Screenshots.Where（p=>p.Device==1）中的var照片）
{
}

.dialog

不是jquery的方法，因此我假设您使用jquery插件来提供此功能。哪一个？jQuery UI？是的jQuery-UI-1.8.24.js当我尝试它时，我最终得到

0x800a138b-JavaScript运行时错误：无法分配给指向
$（“#modalImg”）.attr（“src”）=$（this.attr（“src”）更新-您必须使用.attr（“src”，value）。My bad0x800a01b6-JavaScript运行时错误：对象不支持属性或方法“dialog”获得这两个导入：
在调用上述代码之前是否导入？还有，它们是否按照您刚才输入的顺序排列？