我在Web应用程序项目AdventureWorksHost中有RESTful WCF EmployeeService。我试图从另一个Web应用程序AdventureWorkFront访问此服务。我在AdventureWorkFront中有一个客户页面Employee，我试图使用gijgo网格将json数据绑定到网格。 WCF工作正常，它返回json数据，但我无法将数据绑定到网格。我在chrome浏览器中没有错误，但得到Employee.aspx中定义的空网格。我是CORS的新手，gijgo。我在这里失踪了什么？我在http://localhost:50182/Employees/GetEmployees托管的RESTful WCF返回json数据。但是当我在我的客户端应用程序中调用此服务并尝试将其绑定到gijgo网格时，它不会因为以下原因之一而绑定：1）CORS失败2）或gijgo网格绑定错误。由于我是CORS概念和gijgo网格的新手，我无法弄清问题是什么。 Chrome浏览器调试器中没有错误。
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: '' });
});
});