如何从锚标签有条件地打开一个新窗口/选项卡?

时间:2016-12-16 14:51:48

标签: javascript jquery asp.net-mvc

我有以下代码,它将打开一个新的选项卡/窗口,并根据用户单击网格中的按钮显示文件的内容。

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

在控制器中我返回

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

如果我有文件,一切正常。

如果控制器方法出错或找不到文档,如何防止事件发生?

更新:

$(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);   

1 个答案:

答案 0 :(得分:0)

单击按钮之前,请从服务器请求文档。如果失败,则文档不存在,您可以通过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>