SharePoint Online – How to Call Web API (Cross Origin)

Let’s see how to call Cross Origin Web API, which insert item in SQL Server Database.

Note that here key important thing is Web API, which accepts Cross Origin Request, and insert data into SQL Server. If you are not aware about how to create Web API using CORS, please check my article on How to Create WEB API using CORS.

This article will help you to call Web API using jQuery (web API insert Data into SQL Server Database)

I have created Page in Pages Library named “AddEmployeeSQL.aspx”

I have also created CustomScript named folder inside Style Library, which will hold webapi.txt – custom txt file, which includes jQuery and html content.

Content For webapi.txt File is as below.

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

<div style="font-family:Verdana;font-size:11px">
    <h3>SharePoint Online - WebAPI - SQL Insert Operation</h3>
    <div>
        <table>
            <tr>
                <td>Name : </td>
                <td>
                    <input type="text" name="txtName" class="txtName" />
                </td>
            </tr>
            <tr>
                <td>Email : </td>
                <td>
                    <input type="text" name="txtEmail" class="txtEmail" />
                </td>
            </tr>
            <tr>
                <td>Contact No: </td>
                <td>
                    <input type="text" name="txtContact" class="txtContact" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="Create" id="btnSave" />
                    <div id="loadingPanel" style="color:green; font-weight:bold;display:none;">Data Saving...</div>
                </td>
            </tr>
        </table>
    </div>
</div>
<script>
    $(document).ready(function () {

        $('#btnSave').click(function () {

            var name = $('.txtName').val();
            var email = $('.txtEmail').val();
            var contact = $('.txtContact').val();

            $.post("https://d2aa8fbe-0ee0-4-231-b9ee.azurewebsites.net/api/Employee", { Name: name, Email: email, ContactNumber: contact })
                .fail(function () {
                    alert("An Error Occured while saving record.");
                })
                .done(function (data) {
                    alert("Sucess: " + data);
                });
        });
    });
</script>

Now save this code in Webapi.txt (you can give your preferred name to file) file and upload it to Custom Script folder

Next Edit AddEmployeeSQL.aspx Page and add Content Editor Web Part.

Now Edit Content Editor Web Part and assign script reference

Save Page (check in and Publish it) and we are ready to check functionality.

Fill required Information and Click on Create Button.

You can see it will create record in SQL Server Database.

Hence, we can conclude that it’s really very easy to use Cross Origin Web API and using SharePoint Online jQuery Method.