The name 'id' does not exist in the curren

Question

I cannot use the parameter passed to my javascript method in lambda expression by trying several ways as shown below. How can I use id parameter in the expression below? Thanks in advance.

There is a hyperlink in the FileName and I pass the ID parameter to the Javascript method successfully:

<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"
    });
}

Update: Here is the Ajax method that I used before

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

If somebody told you there is no need ajax, it seems the image data can be post to page,just like dictionary,you can change your code ,and put your Model.FileAttachments to be part of js,just like

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"
    });
}

And you said you want to download other file types (pdf, etc),it can not be like image,you can use code like these if there is no limited to download the file

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

Answer 2

I posted the final working status of the code by modifying the @Sky Fang's answer so that someone need to use it. I also pass the title parameter to the javascript method.

View:

@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>