藤本  結衣

藤本 結衣

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

データの取得にMVCを使用するASP.NETWebAPIパート2
藤本  結衣

藤本 結衣

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