1648854780
データの取得にMVCを使用するASP.NETWebAPIパート2
ASP.NET Web APIは、Web API、つまり.NETFramework上にHTTPベースのサービスを構築するためのフレームワークです。Web APIを使用する最も一般的なユースケースは、RESTfulサービスを構築することです。
説明
このアプリケーションでは、Jqueryを使用してWebAPIからデータを取得する手順を示します。このセッションを行う前に、パート1のセッションにアクセスしてください。
ソースコードへの道
前のセッションで従うべき重要なステップ。
WebApiの新しいプロジェクトを作成する
[ファイル]>[新規]>[プロジェクト]>[asp.netMVCWebアプリケーションの選択]>[エントリアプリケーション名]>[OK]をクリック>[WebAPIの選択]>[ビューエンジンRazorの選択]>[OK]に移動します
新しいAPIコントローラーを追加します。
ソリューションエクスプローラーに移動>ソリューションエクスプローラーからコントローラーフォルダーを右クリック>追加>コントローラー>コントローラー名を入力>Templete"empty APIController">Addを選択します。
Global.asax.csファイルにApplication_BeginRequestイベントを追加して、クロスオリジンリソース共有を許可します。
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");
}
}
ここでは、クライアントアプリケーションがアプリケーションサービスを利用できるようにする「AllowOrigin」のコードを記述します。これにより、クロスドメインのajax呼び出しが可能になります。CORSサポートはASP.NETWebAPI2でリリースされました。ASP.NetWebAPI2でCORSのサポートを提供するには、Microsoft.AspNet.WebApi.CorsNuGetパッケージを使用する必要があります。このパッケージをインストールするには、NuGetパッケージマネージャーコンソールから次のコマンドを実行できます。CORSサポートについては後で説明します。Install-Package Microsoft.AspNet.WebApi.Cors
このセッションで従うべき手順
これらの以下の手順は、前のパート1セッションの続きになります。したがって、最初に私のパート1セッションに従う必要があります。
ステップ1
WebAPIサービスを利用するための別の新しいプロジェクトを追加します。ここでは、クライアントアプリケーション用のMVCWebアプリケーションを作成しました。
[ソリューションエクスプローラー]>[追加]>[新しいプロジェクト]>[asp.netMVCWebアプリケーションの選択]>[アプリケーション名の入力]>[OK]をクリック>[インターネットアプリケーションの選択]>[ビューエンジンRazorの選択]>[OK]に移動します
ステップ2
新しいMVCコントローラーを追加します。
ソリューションエクスプローラーに移動>ソリューションエクスプローラーからコントローラーフォルダーを右クリック>追加>コントローラー>コントローラー名を入力>Templete"empty MVCController">Addを選択します。
ステップ3
ここでは、「Part1」アクションを「ホーム」コントローラーに追加しました。次のコードを書いてください。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Web;
using System.Web.Mvc;
namespace SatyaConsumingApi.Controllers
{
public class HomeController : Controller
{
public ActionResult Part1()
{
return View();
}
}
} ステップ4
アクションとデザインのビューを追加します。アクションメソッドを右クリック（ここではフォームアクションを右クリック）>ビューの追加...>ビュー名の入力>ビューエンジン（Razor）の選択>追加。
コード参照
@{
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>
<input id="rad2GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:orangered">
Get First Name
</label>
<input id="rad3GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:red">
Get Last Name
</label>
</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>
} コードの説明
ラジオボタン用。
<input id="rad1GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:green">
Get Full Name
</label>
<input id="rad2GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:orangered">
Get First Name
</label>
<input id="rad3GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:red">
Get Last Name
</label>
ここでは、バックエンドからデータを取得するためのjqueryコードを追加しました。これは、WebAPIを使用するSQLserverを意味します。IDが異なる3つのラジオボタンを追加しました。
<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>
ここに、前のセッションで作成したWebAPIURLを追加しました。
var apiBaseUrl = "http://localhost:47250/"; ラジオボタンのクリックイベントで、WebAPIセクションで作成されたコントローラー名のURLを追加しました。
$('#rad1GetData').click(function () {
$.ajax({
url: apiBaseUrl + 'api/satya', ここでsatyaはコントローラーの名前であり、このコントローラーセクションの説明は前のセクションにあります。
このURLパスは、SatyaWebApiプロジェクトのApp_StartフォルダーのWebApiConfig.csファイルから取得します。
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
); 実行が成功すると、データは対応する列ヘッダーのテーブルに表示されます。
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!');
} 他の残りのラジオボタンについても同じ手順に従います。
- 最初のラジオボタンID（＃rad1GetData）を使用すると、従業員のフルネームが表示されます。
- 2番目のラジオボタンID（＃rad2GetData）を使用すると、従業員の名が表示されます。
- 3番目のラジオボタンID（＃rad3GetData）を使用すると、従業員の名前が表示されます。
ステップ5
_Layout.cshtmlファイルで、以下に示すようにフッターセクションをカスタマイズしました。
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer> ステップ6
ここでは、クライアントアプリケーションがWeb APIアプリケーションからのサービスを利用するため、両方のアプリケーションを起動する必要があります。ソリューションを右クリック>プロパティ>[複数のスタートアッププロジェクト]を選択>両方のプロジェクトのアクションを開始に変更>適用>OK
出力
WebAPIを使用するためのMVCWebアプリケーションのURL。ここでは、MVCWebアプリとWebAPIurlの両方が同時に並行して実行されます。
http：// localhost：12477 / Home / Part1 >>MVCWebアプリケーションのURL
http：// localhost：47250 / >> Web API URL
フルネームのラジオボタンの場合。
名ラジオボタンの場合。
姓のラジオボタンの場合。
まとめ
- MVCWebアプリケーションがWebAPIサービスをどのように使用するか。
- JQueryでWebAPIサービスを実装する方法。
ソース：https ：//www.c-sharpcorner.com/article/asp-net-web-api-using-mvc-and-entity-framework-part-one/
#api #aspdotnet #entityframework
What is GEEK
Buddha Community
1648854780
データの取得にMVCを使用するASP.NETWebAPIパート2
ASP.NET Web APIは、Web API、つまり.NETFramework上にHTTPベースのサービスを構築するためのフレームワークです。Web APIを使用する最も一般的なユースケースは、RESTfulサービスを構築することです。
説明
このアプリケーションでは、Jqueryを使用してWebAPIからデータを取得する手順を示します。このセッションを行う前に、パート1のセッションにアクセスしてください。
ソースコードへの道
前のセッションで従うべき重要なステップ。
WebApiの新しいプロジェクトを作成する
[ファイル]>[新規]>[プロジェクト]>[asp.netMVCWebアプリケーションの選択]>[エントリアプリケーション名]>[OK]をクリック>[WebAPIの選択]>[ビューエンジンRazorの選択]>[OK]に移動します
新しいAPIコントローラーを追加します。
ソリューションエクスプローラーに移動>ソリューションエクスプローラーからコントローラーフォルダーを右クリック>追加>コントローラー>コントローラー名を入力>Templete"empty APIController">Addを選択します。
Global.asax.csファイルにApplication_BeginRequestイベントを追加して、クロスオリジンリソース共有を許可します。
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");
}
}
ここでは、クライアントアプリケーションがアプリケーションサービスを利用できるようにする「AllowOrigin」のコードを記述します。これにより、クロスドメインのajax呼び出しが可能になります。CORSサポートはASP.NETWebAPI2でリリースされました。ASP.NetWebAPI2でCORSのサポートを提供するには、Microsoft.AspNet.WebApi.CorsNuGetパッケージを使用する必要があります。このパッケージをインストールするには、NuGetパッケージマネージャーコンソールから次のコマンドを実行できます。CORSサポートについては後で説明します。Install-Package Microsoft.AspNet.WebApi.Cors
このセッションで従うべき手順
これらの以下の手順は、前のパート1セッションの続きになります。したがって、最初に私のパート1セッションに従う必要があります。
ステップ1
WebAPIサービスを利用するための別の新しいプロジェクトを追加します。ここでは、クライアントアプリケーション用のMVCWebアプリケーションを作成しました。
[ソリューションエクスプローラー]>[追加]>[新しいプロジェクト]>[asp.netMVCWebアプリケーションの選択]>[アプリケーション名の入力]>[OK]をクリック>[インターネットアプリケーションの選択]>[ビューエンジンRazorの選択]>[OK]に移動します
ステップ2
新しいMVCコントローラーを追加します。
ソリューションエクスプローラーに移動>ソリューションエクスプローラーからコントローラーフォルダーを右クリック>追加>コントローラー>コントローラー名を入力>Templete"empty MVCController">Addを選択します。
ステップ3
ここでは、「Part1」アクションを「ホーム」コントローラーに追加しました。次のコードを書いてください。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Web;
using System.Web.Mvc;
namespace SatyaConsumingApi.Controllers
{
public class HomeController : Controller
{
public ActionResult Part1()
{
return View();
}
}
} ステップ4
アクションとデザインのビューを追加します。アクションメソッドを右クリック（ここではフォームアクションを右クリック）>ビューの追加...>ビュー名の入力>ビューエンジン（Razor）の選択>追加。
コード参照
@{
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>
<input id="rad2GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:orangered">
Get First Name
</label>
<input id="rad3GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:red">
Get Last Name
</label>
</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>
} コードの説明
ラジオボタン用。
<input id="rad1GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:green">
Get Full Name
</label>
<input id="rad2GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:orangered">
Get First Name
</label>
<input id="rad3GetData" type="radio" name="Full Name" class="btn btn-default" />
<label style="color:red">
Get Last Name
</label>
ここでは、バックエンドからデータを取得するためのjqueryコードを追加しました。これは、WebAPIを使用するSQLserverを意味します。IDが異なる3つのラジオボタンを追加しました。
<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>
ここに、前のセッションで作成したWebAPIURLを追加しました。
var apiBaseUrl = "http://localhost:47250/"; ラジオボタンのクリックイベントで、WebAPIセクションで作成されたコントローラー名のURLを追加しました。
$('#rad1GetData').click(function () {
$.ajax({
url: apiBaseUrl + 'api/satya', ここでsatyaはコントローラーの名前であり、このコントローラーセクションの説明は前のセクションにあります。
このURLパスは、SatyaWebApiプロジェクトのApp_StartフォルダーのWebApiConfig.csファイルから取得します。
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
); 実行が成功すると、データは対応する列ヘッダーのテーブルに表示されます。
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!');
} 他の残りのラジオボタンについても同じ手順に従います。
- 最初のラジオボタンID（＃rad1GetData）を使用すると、従業員のフルネームが表示されます。
- 2番目のラジオボタンID（＃rad2GetData）を使用すると、従業員の名が表示されます。
- 3番目のラジオボタンID（＃rad3GetData）を使用すると、従業員の名前が表示されます。
ステップ5
_Layout.cshtmlファイルで、以下に示すようにフッターセクションをカスタマイズしました。
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer> ステップ6
ここでは、クライアントアプリケーションがWeb APIアプリケーションからのサービスを利用するため、両方のアプリケーションを起動する必要があります。ソリューションを右クリック>プロパティ>[複数のスタートアッププロジェクト]を選択>両方のプロジェクトのアクションを開始に変更>適用>OK
出力
WebAPIを使用するためのMVCWebアプリケーションのURL。ここでは、MVCWebアプリとWebAPIurlの両方が同時に並行して実行されます。
http：// localhost：12477 / Home / Part1 >>MVCWebアプリケーションのURL
http：// localhost：47250 / >> Web API URL
フルネームのラジオボタンの場合。
名ラジオボタンの場合。
姓のラジオボタンの場合。
まとめ
- MVCWebアプリケーションがWebAPIサービスをどのように使用するか。
- JQueryでWebAPIサービスを実装する方法。
ソース：https ：//www.c-sharpcorner.com/article/asp-net-web-api-using-mvc-and-entity-framework-part-one/