$.ajax No 'Access-Control-Allow-Origin' header is present on the requested resource with WebAPI

I want to get data from a WebAPI with jquery

        $("#btnSend").click(function () {
            $("#sending").show();
            $.ajax({
                type: 'GET',
                url: '/Report/SendEmail?quote=18',
                crossDomain: true,
                success: function (msg) {
                    if (msg == 'True') {
                        alert('Email sent to the client');
                    }
                    $("#sending").hide();
                },
                error: function (request, status, error) {
                    $("#sending").hide();
                }
            });
        });

and it produce

‘No Access-Control-Allow-Origin' header is present on the requested resource error.

The solution is to add in the result of the WebAPI the following code:

            Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST");
            Response.Headers.Add("Access-Control-Allow-Headers", "accept, authority");
            Response.Headers.Add("Access-Control-Allow-Credentials", "true");

Happy coding!

Using the UpdateProgress to lock down controls in the browser

If it takes awhile for the server to process the postback (e.g. complex rules or badly written code ), the user may not realize that the server is processing the request. This can lead to all kinds of issues with users that are not savvy or familiar with web applications (multiple clicks, moving off the page, etc.). Consequently, I want to tell the user that the server is processing the request and disable the controls on the page. Let's break this down into two steps: show a message, and disable the user's interaction with the controls.

You can use the UpdateProgress control alone with the UpdatePanel to provide a message to the user during the postback. This is very simple -- put the UpdateProgress control within the UpdatePanel like so:

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        Update in progress. Please wait ...
    </ProgressTemplate>
</asp:UpdateProgress>
 

This will display the "Update in progress. Please wait ..." message to the the user while the server is processing the request. However, it doesn't prevent the user from continuing to interact with the web application. To provide this type of functionality, we will use the PageRequestManager to invoke some JavaScript while also using CSS and DHTML to lock down the UI.

First, we'll add a little more to our UpdateProgress control:

<ProgressTemplate>
    <div id="blur" />
    <div id="progress">
        Update in progress. Please wait ...
    </div>
</ProgressTemplate>
 

We'll use the "blur" and "progress" controls to _overlay _the controls in the UI while also providing a message to the user. To provide the functionality we require, we need to use the following CSS elements:

#blur
{
    width: 100%;
    background-color: black;
    moz-opacity: 0.5;
    khtml-opacity: .5;
    opacity: .5;
    filter: alpha(opacity=50);
    z-index: 120;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#progress
{
    z-index: 200;
    background-color: White;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px black;
    padding: 5px 5px 5px 5px;
    text-align: center;
    width: 100%;
    left: 0px;
    height: 75px;
    padding-top: 40px;
    padding-bottom: 60px;
}
 

The purpose of the "blur" control is to provide a tag that lays over everything in the browser. Since the opacity is 0.5 (and 50), it appears gray while allowing the user to continue to see the controls behind it. However, since the "blur" control exists between the user and the other controls, the user cannot interact with any other controls.

image

Advertsing

125X125_06

Planet Xamarin

Planet Xamarin

Calendar

<<  September 2017  >>
MonTueWedThuFriSatSun
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

View posts in large calendar

Month List