如何從錨標籤中有條件地打開新的窗口/選項卡？

Question

我有以下代碼將打開一個新的選項卡/窗口，並顯示基於用戶單擊網格中的按鈕的文件的內容。

$(myButton).attr('href', '/MyController/GetDoc?Field1=' + dataItem.data1 + '&Field2=' + dataItem.data2);  
$(myButton).attr('target', '_blank'); 

在控制器我回到

return new FileContentResult(Convert.FromBase64String(myDoc), "application/pdf"); 

一切工作正常，如果我有一個文件。

如果控制器方法出錯或沒有找到文檔，我該如何防止事件發生？

UPDATE：

$(function() { 

    $(".myButtonClass").each(function() { 
     var button = $(this); 
     var docUrl = ''; 

     button.attr('target', '_blank'); 
     checkDocumentUrl(button, docUrl); 
    }); 

}); 

在我的按鈕單擊方法：

var myButton = $(e.currentTarget).closest(".myButtonClass"); 
$(myButton).attr('href', '/MyContoller/GetDoc?Field1=' + dataItem.data1+ '&Field2=' + dataItem.data2); 

Answer 1

單擊該按鈕之前，從服務器請求的文檔。如果失敗，文檔不存在，您可以通過JavaScript禁用該按鈕。

您的控制器應檢查文檔是否存在，如果不存在則返回HTTP 404。

//Example data only. Each button presumably has its own data. 
 
var dataItem = { 
 
    data1: 'foo', 
 
    data2: 'bar' 
 
}; 
 

 
$(document).ready(function() { 
 

 
    //Check the url for each button 
 
    $('.myButton').each(function() { 
 
    var button = $(this); 
 

 
    var docUrl = '/MyController/GetDoc?Field1=' + dataItem.data1 + '&Field2=' + dataItem.data2; 
 

 
    button.attr('href', docUrl); 
 
    button.attr('target', '_blank'); 
 

 
    checkDocumentUrl(button, docUrl); 
 
    }); 
 

 
    function checkDocumentUrl(button, docUrl) { 
 
    //Make a request for the document 
 
    $.ajax({ 
 
     method: 'HEAD', 
 
     url: docUrl, 
 
     error: function() { 
 
     //If request fails, document does not exist 
 
     handleInvalidDocument(button, docUrl); 
 
     } 
 
    }); 
 
    } 
 

 
    function handleInvalidDocument(button, docUrl) { 
 
    button.on('click', function(e) { 
 
     //Prevent the link from opening a new tab 
 
     e.preventDefault(); 
 
     alert('Sorry, no document available at ' + docUrl); 
 
    }); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="myButton">My Button</a>