다른 포트의 ASP.NET Web API 를 jQuery 로 호출하기

https://www.c-sharpcorner.com/article/asp-net-web-api-using-mvc-and-entity-framework-part-one/

Global.asax.cs

namespace SatyaWebApi

{

public class WebApiApplication : System.Web.HttpApplication

{

protected void Application_Start()

{

AreaRegistration.RegisterAllAreas();

GlobalConfiguration.Configure(WebApiConfig.Register);

FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

RouteConfig.RegisterRoutes(RouteTable.Routes);

BundleConfig.RegisterBundles(BundleTable.Bundles);

}

protected void Application_BeginRequest()

{

string[] allowedOrigin = new string[] { "http://localhost:12477" };

var origin = HttpContext.Current.Request.Headers["Origin"];

if (origin != null && allowedOrigin.Contains(origin))

{

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", origin);

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET,POST");

//Need to add more later , will see when required

}

}

}

}

SatyaController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

namespace SatyaWebApi.Controllers

{

public class SatyaController : ApiController

{

//Add Action for GET // for Fetch data from database and return to the Client

public HttpResponseMessage Get()

{

List<Employee> allEmp = new List<Employee>();

using (CrystalGranite2016Entities dc = new CrystalGranite2016Entities())

{

allEmp = dc.Employees.OrderBy(a => a.FirstName).ToList();

HttpResponseMessage response;

response = Request.CreateResponse(HttpStatusCode.OK, allEmp);

return response;

}

}

}

}

도메인의 특정 포트 사이트를 호출하여 데이터 받아 리스트 출력하기

Part1.cshtml

@{

ViewBag.Title = "Satyaprakash - Fetch data from WebApi using jquery";

}

<style>

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

}

tr:nth-child(even) {

background-color: #dddddd;

}

</style>

<div>

<div style="padding:10px ; align-content:center">

<fieldset>

<legend style="font-family:Arial Black;color:blue">Get Data From Web API Using JQuery As Per Selection</legend>

<input id="rad1GetData" type="radio" name="Full Name" class="btn btn-default" />

<label style="color:green">

Get Full Name

</label> &nbsp;

<input id="rad2GetData" type="radio" name="Full Name" class="btn btn-default" />

<label style="color:orangered">

Get First Name

</label> &nbsp;

<input id="rad3GetData" type="radio" name="Full Name" class="btn btn-default" />

<label style="color:red">

Get Last Name

</label> &nbsp;

</fieldset>

</div>

<div id="updatePanel" style="width:90%; margin:0 auto; padding:10px">

</div>

</div>

@section Scripts{

<script>

$(document).ready(function () {

var apiBaseUrl = "http://localhost:47250/";

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

$.ajax({

url: apiBaseUrl + 'api/satya',

type: 'GET',

dataType: 'json',

success: function (data) {

var $table = $('<table/>').addClass('table table-responsive table-striped table-bordered');

var $header = $('<thead/>').html('<tr><th style="background-color: Yellow;color: blue">Full Name</th><th style="background-color: Yellow;color: blue">Email</th><th style="background-color: Yellow;color: blue">City</th><th style="background-color: Yellow;color: blue">Country</th></tr>');

$table.append($header);

$.each(data, function (i, val) {

var $row = $('<tr/>');

$row.append($('<td/>').html(val.FirstName + ' ' + val.LastName));

$row.append($('<td/>').html(val.EmailID));

$row.append($('<td/>').html(val.City));

$row.append($('<td/>').html(val.Country));

$table.append($row);

});

$('#updatePanel').html($table);

},

error: function () {

alert('Error!');

}

});

});

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

$.ajax({

url: apiBaseUrl + 'api/satya',

type: 'GET',

dataType: 'json',

success: function (data) {

var $table = $('<table/>').addClass('table table-responsive table-striped table-bordered');

var $header = $('<thead/>').html('<tr><th style="background-color: Yellow;color: blue">First Name</th><th style="background-color: Yellow;color: blue">Email</th><th style="background-color: Yellow;color: blue">City</th><th style="background-color: Yellow;color: blue">Country</th></tr>');

$table.append($header);

$.each(data, function (i, val) {

var $row = $('<tr/>');

$row.append($('<td/>').html(val.FirstName));

$row.append($('<td/>').html(val.EmailID));

$row.append($('<td/>').html(val.City));

$row.append($('<td/>').html(val.Country));

$table.append($row);

});

$('#updatePanel').html($table);

},

error: function () {

alert('Error!');

}

});

});

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

$.ajax({

url: apiBaseUrl + 'api/satya',

type: 'GET',

dataType: 'json',

success: function (data) {

var $table = $('<table/>').addClass('table table-responsive table-striped table-bordered');

var $header = $('<thead/>').html('<tr><th style="background-color: Yellow;color: blue">Last Name</th><th style="background-color: Yellow;color: blue">Email</th><th style="background-color: Yellow;color: blue">City</th><th style="background-color: Yellow;color: blue">Country</th></tr>');

$table.append($header);

$.each(data, function (i, val) {

var $row = $('<tr/>');

$row.append($('<td/>').html(val.LastName));

$row.append($('<td/>').html(val.EmailID));

$row.append($('<td/>').html(val.City));

$row.append($('<td/>').html(val.Country));

$table.append($row);

});

$('#updatePanel').html($table);

},

error: function () {

alert('Error!');

}

});

});

});

</script>

}