如何从锚标签中有条件地打开新的窗口/选项卡？

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>