名称 'id' 在 Javascript 方法的当前上下文中不存在

Question

通过尝试以下几种方法，我无法在 lambda 表达式中使用传递给我的 javascript 方法的参数。如何在下面的表达式中使用 id 参数？提前致谢。

FileName 中有一个超链接，我成功将 ID 参数传递给 Javascript 方法：

<a onclick="downloadFile(@p.ID);">@p.FileName</a>

function downloadFile(id) {
    $.fancybox({
        //This works: (p.ID == 82)
        content: '<img     src="data:image/png;base64,@System.Convert.ToBase64String(Model.FileAttachments.FirstOrDefault(p => p.ID == 82 ).FileData)" alt=""/>',

        //They are not works: (p.ID == id / p.ID == @id  / p.ID == this.id)
        content: '<img src="data:image/png;base64,@System.Convert.ToBase64String(Model.FileAttachments.FirstOrDefault(p => p.ID == id ).FileData)" alt=""/>',

        content: '<img src="data:image/png;base64,@System.Convert.ToBase64String(Model.FileAttachments.FirstOrDefault(p => p.ID == @id ).FileData)" alt=""/>',

        content: '<img src="data:image/png;base64,@System.Convert.ToBase64String(Model.FileAttachments.FirstOrDefault(p => p.ID == this.id ).FileData)" alt=""/>',

        type: "html"
    });
}

更新：这里是我之前用的Ajax方法

function downloadFile(id) {
    $.ajax({
        url: "/Issue/RenderImage",
        type: "POST",
        data: JSON.stringify({ 'id': id }),
        dataType: "json",
        traditional: true,
        contentType: "application/json; charset=utf-8",

        success: function (response) {
            $.fancybox({
                content: '<img height="200" width="250" src="data:image/png;base64,' + response.Image + '" />',
                type: "html"
            //});
        },
        error: function () {
            alert("an error has occured!!!");
        }
    });
}

Answer 1

如果有人告诉你不需要ajax，好像图像数据可以post分页，就像字典一样，你可以改变你的代码，把你的Model.FileAttachments 成为 js 的一部分，就像

var allPictures= @JsonConvert.SerializeObject(Model.FileAttachments.ToDictionary(k=>k.ID,v=>System.Convert.ToBase64String(v.FileData)));
function downloadFile(id) {
    $.fancybox({
        content: '<img src="data:image/png;base64,'+allPictures[id] +'" alt=""/>',
        type: "html"
    });
}

而且你说你要下载其他类型的文件（pdf等），不能像图片那样，如果没有下载文件的限制，你可以使用这样的代码

<a href="filePath">fileName</a>

Answer 2

我通过修改@Sky Fang的答案贴出代码的最终工作状态，以便有人需要使用它。我还将标题参数传递给 javascript 方法。

查看：

@using Newtonsoft.Json

<a onclick="showImage(@p.ID, '@p.FileName - @p.Created - @p.AuthorID');">@p.FileName</a>


<script>    
function showImage(id, imageTitle) {
    $.fancybox.showLoading(); //Shows loading animation 
    var allImages=  @(new HtmlString(JsonConvert.SerializeObject(Model.FileAttachments.ToDictionary(k=>k.ID,v=>System.Convert.ToBase64String(v.FileData)))));
    $.fancybox({
        'scrolling'         : 'no',
        'titleShow'         : true,
        'title'             : imageTitle,
        'showCloseButton'   : true,
        'titlePosition'     : 'outside',
        //'titleFormat'     : formatTitle,
        //'transitionIn'    : 'fade',
        //'transitionOut'   : 'fade',
        //'speedIn'         : 600,
        //'speedOut'        : 200,
        'overlayShow'       : false,
        content: '<img style="height:500px; width:auto;" src="data:image/png;base64,'+ allImages[id] +'" />',
        type: "html"
    });
}
</script>

名称 'id' 在 Javascript 方法的当前上下文中不存在

The name 'id' does not exist in the current context in Javascript method

javascript

asp.net-mvc

jquery

lambda

url-parameters