관리 메뉴

심재운 블로그

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

닷넷관련/ASP.NET MVC & Core

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

재우니 2018.08.25 00:44




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>
}



0 Comments
댓글쓰기 폼