如何使用Ajax成功在新选项卡中打开URL？

Question

Here i am trying to open the file in new tab by calling ViewFile action of Doctor controller using Ajax Success which is in function abc(this) on click of anchor tag.
Now the problem is that everything is as required but the url doesnot open in new tab.

Below is my Ajax

<script>
function abc(thisEvent) {
    debugger;
    var getDoCredId = $(thisEvent).attr('docCredId');
    var parameter = { id: getDoCredId };
    $.ajax({
        url: "/Doctor/ViewFile1",
        type: "get",
        dataType: "html",
        data: parameter,
        success: function (data) {
            debugger;
            if (data = true) {
                debugger;
                var getdoctorId = $(thisEvent).attr('docCredId');
                var url = "/Doctor/ViewFile/" + getdoctorId;
                window.open(url, "_blank");
            }
            else {
                debugger;
                showNotification("Error", "warning");
            }
        }
    });
}

Below is my anchor tag HTML

<a title="View Attachment"   docCredId = "' + getDocCredId + '"  onclick="abc(this)"><i class="btn btn-web-tbl btn-warning fa fa-eye "></i></a>

Below is code behind

public bool ViewFile1(int id)
    {
        var document = _doctorService.GetDoctorCredentialDetails(id);
        string AttachPath = ConfigPath.DoctorCredentialsAttachmentPath;
        string strFileFullPath = Path.Combine(AttachPath, document.AttachedFile);

        string contentType = MimeTypes.GetMimeType(strFileFullPath);
        bool checkFileInFolder = System.IO.File.Exists(strFileFullPath);
        if (checkFileInFolder == true)
        {
            return true;
        }
        else
        {
            return false;
        }
  }
    public ActionResult ViewFile(int id)
    {
        var document = _doctorService.GetDoctorCredentialDetails(id);
        string AttachPath = ConfigPath.DoctorCredentialsAttachmentPath;
        string strFileFullPath = Path.Combine(AttachPath, document.AttachedFile);
        string contentType = MimeTypes.GetMimeType(strFileFullPath);
        bool checkFileInFolder = System.IO.File.Exists(strFileFullPath);  
        bool filedata = System.IO.File.ReadAllBytes(strFileFullPath).Any();
        byte[] filedata1 = System.IO.File.ReadAllBytes(strFileFullPath);
        var cd = new System.Net.Mime.ContentDisposition
        {
            FileName = document.FileName,
            Inline = true
        };
        Request.HttpContext.Response.Headers.Add("Content-Disposition", cd.ToString());
        return File(filedata1, contentType);
    }

Answer 1

Since this is too long for a regular comment, I am posting this as an answer, although it isn't directly going solve the problem because I am not able to reproduce it, but might give some insights and let you check the differences with what happens in your code as compared with this simplified example.

---

Calling window.open() from jQuery ajax success callback works just fine: https://codepen.io/nomaed/pen/dgezRa

I used the same pattern as you did, without your server code but using jsonplaceholder.typicode.com sample API instead.

---

There are some issues with the code sample that you might want to consider, even though you didn't ask for comments about it and it's not directly related to your issue (probably):

1. if (data = true) means data will always be true. You probably mean to do a if (data === true) if you know it's a boolean value, or if (data) if you want to accept any truthy value (true, {}, "something", 42, etc). Judging by the Java code and how you define the response format in the jQuery ajax call, it looks like you're expecting the "data" variable result be an HTML and not a boolean. You might want to try and remove the dataType: "html" row and let jQuery set the data format according to what is coming back from the server, and/or send a JSON formatted response, as in a POJO of { result: true } for a successful response. Then make sure that data.result === true to be sure that you got what you expect.

2. You should probably add arbitrary data to tags DOM elements the data-* attributes and if you're using jQuery, access them using the .data() selector. White adding just random attributs with string values may work, it's considered an abuse of the HTML and DOM, and the data-* attributes are there specifically for adding any data.

3. In the abc() function you grab the value of the attribute in the beginning ( var getDoCredId = $(thisEvent).attr('docCredId'); ) but in the callback you're trying to get the value once more. You really don't need it since the success() callback is a closure in the scope of the abc() function and it has access to the value already, so doing var getdoctorId = $(thisEvent).attr('docCredId'); in the callback is really not needed.

4. I'd also suggest naming getDoCredId variable just as docCredId . Having a "get" prefix usually means that it's a getter function or a reference to some getter. Likewise, the " thisEvent " argument of the main function should probably be called " callerElement " or something like that since it's not an event, it's an actual element that you're passing directly from the DOM when calling abc(this) in the onClick event handler of the <a> anchor. This is just to make the code clearer to understand for anyone who's reading it, and for yourself when you're coming back to it several months in the future and trying to figure out what's going on :)

Answer 2

Try adding async: false to your Ajax request

function abc(thisEvent) {
    debugger;
    var getDoCredId = $(thisEvent).attr('docCredId');
    var parameter = { id: getDoCredId };
    $.ajax({
        async: false, // <<<----------- add this
        url: "/Doctor/ViewFile1",
        type: "get",
        dataType: "html",
        data: parameter,
        success: function (data) {
            debugger;
            if (data = true) {
                debugger;
                var getdoctorId = $(thisEvent).attr('docCredId');
                var url = "/Doctor/ViewFile/" + getdoctorId;
                window.open(url, "_blank");
            }
            else {
                debugger;
                showNotification("Error", "warning");
            }
        }
    });
}