CORS in asp.net web application not working

334
March 18, 2017, at 07:10 AM

I have RESTful WCF EmployeeService in a web application project AdventureWorksHost. I am trying to access this service from another web application AdventureWorkFront. I have a client page Employee in AdventureWorkFront where I am trying to bind json data to a grid using gijgo grid. The WCF works fine, it returns json data, but i am not able to bind the data to the grid. I get no error in the chrome browser,but get the empty grid defined in Employee.aspx. I am new to CORS, gijgo. what am i missing here? My RESTful WCF self hosted at http://localhost:50182/Employees/GetEmployees returns json data. But when i call this service in my client application and try to bind it to a gijgo grid, it doesnt bind for either of the reasons : 1) CORS failed 2) or gijgo grid binding is wrong. Since I am new to CORS concept and gijgo grid, I am not able to figure out what the problem is. There is no error in chrome browser debugger.

Solution Explorer

  1. In my client web application AdventureWorksFront, i have these AdventureWorksMaster.master, Employees.aspx,Employee.js,Global.asax.cs,webconfig

AdventureWorksMaster.master

            <%@ Master Language="C#" AutoEventWireup="true" CodeFile="AdventureWorksMaster.master.cs" Inherits="AdventureWorksMaster" %>
            <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head runat="server">
                <title></title>
                <asp:ContentPlaceHolder id="head" runat="server">
                </asp:ContentPlaceHolder>
            </head>
            <body>
                <form id="form1" runat="server">
                     <asp:ScriptManager ID="ScriptManager1" runat="server">
                  <Scripts>
                    <asp:ScriptReference Path="Scripts/Jquery/jquery-3.1.1.min.js" />
                     <asp:ScriptReference Path="Scripts/Gijgo/gijgo.js" />
                      <asp:ScriptReference Path="Scripts/Gijgo/gijgo.min.js" />
                       <asp:ScriptReference Path="Scripts/Gijgo/grid.js" />
                       <asp:ScriptReference Path="Scripts/Gijgo/grid.min.js" />
                  </Scripts>
                </asp:ScriptManager>
                    <link href="Content/themes/gijgo/gijgo.css" rel="stylesheet" />
                    <link href="Content/themes/gijgo/grid.css" rel="stylesheet" />
                <div>
                    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                </form>
            </body>
            </html>

` Employees.aspx

                <%@ Page Title="" Language="C#" MasterPageFile="~/AdventureWorksMaster.master" AutoEventWireup="true" CodeFile="Employees.aspx.cs" Inherits="Employees" %>
            <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
            </asp:Content>
            <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
                 <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
                    <Scripts>
                         <asp:ScriptReference Path="Scripts/Modules/Employee/Employee.js" />
                        <asp:ScriptReference Path="Scripts/Global/Global.js" />
                         <asp:ScriptReference path="http://localhost:50182/Employees/GetEmployees"/>
                   </Scripts>
              </asp:ScriptManagerProxy>
                <div class="gj-margin-top-10">
                    <div class="gj-float-left">
                        <div class="display-inline">
                            <input id="txtQuery" type="text" class="gj-frm-ctrl gj-display-inline-block" />
                            <button id="btnSearch" type="button" class="gj-button">Search</button>
                            <button id="btnClear" type="button" class="gj-button">Clear</button>
                        </div>
                    </div>
                    <div class="gj-float-right">
                        <button id="btnAdd" type="button" class="gj-button">Add New Record</button>
                    </div>
                </div>
                <div class="gj-clear-both"></div>
                <div class="gj-margin-top-10">
                  <%--  <table id="grid" data-source="@Url.Action('Employees/GetEmployees')"></table>--%>
            <table id="grid" ></table>
                </div>
                <div id="dialog" class="gj-display-none">
                    <input type="hidden" id="BusinessEntityId" />
                         <div>
                            <label for="FirstName" class="gj-bold">First Name:</label>
                            <input type="text" class="gj-frm-ctrl gj-width-240" id="FirstName"/>
                        </div>
                        <div class="gj-margin-top-10">
                            <label for="MiddleName" class="gj-bold">Middle Name:</label>
                            <input type="text" class="gj-frm-ctrl gj-width-240" id="MiddleName" />
                        </div>
                       <div>
                            <label for="LastName" class="gj-bold">Last Name:</label>
                            <input type="text" class="gj-frm-ctrl gj-width-240" id="LastName"/>
                        </div>
                       <div>
                            <label for="PersonType" class="gj-bold">Person Type:</label>
                            <input type="text" class="gj-frm-ctrl gj-width-240" id="PersonType"/>
                        </div>
                       <div>
                            <label for="BirthDate" class="gj-bold">DOB:</label>
                            <input type="text" class="gj-frm-ctrl gj-width-240" id="BirthDate"/>
                        </div>
                       <div>
                            <label for="JobTitle" class="gj-bold">Job Title:</label>
                            <input type="text" class="gj-frm-ctrl gj-width-240" id="JobTitle"/>
                        </div>
                    <div>
                            <label for="LoginID" class="gj-bold">Login ID:</label>
                            <input type="text" class="gj-frm-ctrl gj-width-240" id="LoginID"/>
                        </div>
                    <div>
                            <label for="MaritalStatus" class="gj-bold">Marital Status:</label>
                            <input type="text" class="gj-frm-ctrl gj-width-240" id="MaritalStatus"/>
                        </div>
                     <div>
                            <label for="NationalIDNumber" class="gj-bold">NationalIDNumber:</label>
                            <input type="text" class="gj-frm-ctrl gj-width-240" id="NationalIDNumber"/>
                        </div>
                        <div class="gj-margin-top-10">
                            <button type="button" id="btnSave" class="gj-button">Save</button>
                            <button type="button" id="btnCancel" class="gj-button">Cancel</button>
                        </div>
                </div>
            </asp:Content>

Employee.js

                $(document).ready(function () {
                var grid, dialog;
                grid = $('#grid').grid({
                    loader: {
                        url: "http://localhost:50182/Employees/GetEmployees",
                        jsonp: "callback",
                        type: 'GET',
                        datatype: 'jsonp',
                        crossDomain: true,
                        cache: false,
                        processData: true,
                        withCredentials: true,
                        timeout: 1200000000,
                        success: onSuccessFunc,
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("error");
                        }
                    },
                    columns: [
                     { field: 'BusinessEntityId', title: 'ID', width: 32 },
                     { field: 'Persons.FirstName', title: 'First Name', sortable: true },
                     { field: 'Persons.MiddleName', title: 'Middle Name', sortable: true },
                     { field: 'Persons.LastName', title: 'Last Name', width: 32 },
                     { field: 'Persons.PersonType', title: 'Type', sortable: true },
                     { field: 'BirthDate', title: 'DOB', sortable: true },
                     { field: 'JobTitle', title: 'Title', width: 32 },
                     { field: 'LoginID', title: 'Login', sortable: true },
                     { field: 'MaritalStatus', title: 'MaritalStatus', sortable: true },
                     { field: 'NationalIDNumber', title: 'NationalID #', sortable: true },

                     { width: 50, tmpl: '<a href="#">edit</a>', align: 'center', events: { 'click': Edit } },
                     { width: 50, tmpl: '<a href="#">delete</a>', align: 'center', events: { 'click': Delete } }
                    ],
                    pager: { limit: 20 }
                });
                dialog = $('#dialog').dialog({
                    title: 'Add/Edit Record',
                    autoOpen: false,
                    resizable: false,
                    modal: true
                });

                function Edit(e) {
                    $('#BusinessEntityId').val(e.data.BusinessEntityId);
                    $('#FirstName').val(e.data.record.Persons.FirstName);
                    $('#MiddleName').val(e.data.record.Persons.MiddleName);
                    $('#LastName').val(e.data.record.Persons.LastName);
                    $('#PersonType').val(e.data.record.Persons.PersonType);
                    $('#BirthDate').val(e.data.record.BirthDate);
                    $('#JobTitle').val(e.data.record.JobTitle);
                    $('#LoginID').val(e.data.record.LoginID);
                    $('#MaritalStatus').val(e.data.record.MaritalStatus);
                    $('#NationalIDNumber').val(e.data.record.NationalIDNumber);
                    $('#dialog').dialog('open');
                }
                function Delete(e) {
                    if (confirm('Are you sure?')) {
                        alert('TODO: Write code that delete the data on the server.');
                        grid.reload(); //load the new data from the server after the deletion
                    }
                }
                function Save() {
                    if ($('#BusinessEntityId').val()) {
                        var id = parseInt($('#BusinessEntityId').val());
                        alert('Are you sure you want to save the data?');
                        grid.updateRow(id,
                            {
                                'ID': id,
                                'FirstName': $('#FirstName').val(),
                                'MiddleName': $('#MiddleName').val(),
                                'LastName': $('#LastName').val(),
                                'PersonType': $('#PersonType').val(),
                                'BirthDate': $('#BirthDate').val(),
                                'JobTitle': $('#JobTitle').val(),
                                'LoginID': $('#LoginID').val(),
                                'MaritalStatus': $('#MaritalStatus').val(),
                                'NationalIDNumber': $('#NationalIDNumber').val()
                            }

                            );
                    } else {
                        alert('Save record.');
                        grid.addRow(
                            {
                                'FirstName': $('#FirstName').val(),
                                'MiddleName': $('#MiddleName').val(),
                                'LastName': $('#LastName').val(),
                                'PersonType': $('#PersonType').val(),
                                'BirthDate': $('#BirthDate').val(),
                                'JobTitle': $('#JobTitle').val(),
                                'LoginID': $('#LoginID').val(),
                                'MaritalStatus': $('#MaritalStatus').val(),
                                'NationalIDNumber': $('#NationalIDNumber').val()
                            });
                    }
                    dialog.close();
                }
                $('#btnAdd').on('click', function () {
                    $('#ID').val('');
                    $('#Name').val('');
                    $('#PlaceOfBirth').val('');
                    $('#dialog').dialog('open');
                });
                $('#btnSave').on('click', Save);
                $('#btnCancel').on('click', function () {
                    dialog.close();
                });
                $('#btnSearch').on('click', function () {
                    grid.reload({ name: $('#txtQuery').val() });
                });
                $('#btnClear').on('click', function () {
                    $('#txtQuery').val('');
                    grid.reload({ name: '' });
                });
            });
READ ALSO
Jquery load png image strange characters

Jquery load png image strange characters

Help me please, when load image with jquery Im getting strange charachters like this

322
Hover event not triggering properly in MS Edge

Hover event not triggering properly in MS Edge

I'm working on a pretty big project and have managed to get everything working on most all browsers except for MS EdgeNo supprise there but I really need this hover effect to work

446
Angular Clicking on Text to show div tag

Angular Clicking on Text to show div tag

I was wondering how to accomplish this with Angular as it seems that ng-click is something to use, then ng-model seems like that could be used

364
Autobahn JS Subscription management

Autobahn JS Subscription management

I am setting up a blog between our clients and us so they can have a space to talk about the different commercial transactions (each commercial transaction has a reference number and has it's own information)

547