2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

初心者おばちゃんの簡単ASP.NET Razor PagesでRESTFul/Ajax使ってみよう

Last updated at Posted at 2020-07-22

RESTFul/Ajaxってなんでしょう。

Ajax -「非同期JavascriptとXML」。 Ajaxは、Webアプリケーションのユーザーエクスペリエンスをより豊かにするための一連のテクノロジーを大まかに定義しています。画面のデータの更新は、javascriptとxml(またはjsonまたは通常のhttp投稿)を使用して非同期的に行われます。おばちゃんはjsonをつかってます。

RESTFul -「代表的な状態転送」。 RESTFulを使用するアプリケーションには、リソースの使用を中心にしたUrl構造と要求/応答パターンがあります。純粋なモデルでは、HTTP動詞Get、Post、Put、Deleteを使用して取得しますリソースを作成、更新、削除します。PutとDeleteは多くの場合使用されません。GetとPostをマップに残して選択(GET)および作成、更新、削除(POST)します。おばちゃんはGETをつかってます。

Razor Pagesとはなんでしょう。

ViewModelクラスを定義しなくていいといのは、とっても始めやすかったです。その代わりにフロントエンド部分につき、バックエンド部分がClassとなっていて、スカッフホールドした場合にコードを共有しにくい場合があります。
一番良かったことは、『@{}』でクラスをHTML内で呼び出させたりができて、フロントエンド部分からの応用がとても効くところでした。
なのでこの度はClassで生成したリストをHTMLとRazorで読み込み表示し、それぞれにViewDataをつかって名前を付けることで、クリック・イベントを通してのJavascriptファンクションにそれぞれの名前のパラメータを送ってやることを可能にしました。
そしてそこからRESTFulで個別にサーバーと対話させる仕組みになっています。
例題では「1」「2」「3」としてますが、やっていることは同じです。

C#class - Index.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;

namespace myFirstAjax.Pages
{
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
        
        [BindProperty]
        public string content { get; set; }

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {
       /**この部分は、コンストラクタをつかってRazorのモデルで呼び出してもよい**/
            ViewData["Title"] = "BeerNeko Ajax練習";
            ViewData["ichi"] = "1";
            ViewData["ni"] = "2";
            ViewData["san"] = "3";
        }

    /**GETよりパラメータ付きで呼び出される(handler名は"UpdateCorrectedCount")**/
        public IActionResult OnGetUpdateCorrectedCount(int memorizeID)
        {
            content = "<a id='Index_" + memorizeID.ToString() 
                + "' class='btn btn-info card-link text-light' onclick='closeAnswer("
                + memorizeID.ToString() + ");'><strong>サーバから帰ってきた"
                + "<u>No.<font color=red>" + memorizeID.ToString() 
                + "</u></font>です!</strong>"
                + "<br>もう一回クリックしてIDに名前が付いてパラメータとしてcloseAnswer(" 
                + memorizeID.ToString() + ")で消えることを確認してください。</a>";
            return new JsonResult(new { Content = content });
        }
    }
}

HTML w/ Razor Page - Index.cshtml

@page
@model IndexModel
@ViewData["Title"]
<style>
    .answer .question {
        cursor: pointer;
    }
</style>
<div class="text-center">
    <h1>初めてのAjax</h1>
    <div>
        <div class="question">
            1. この下のNo1をサーバから呼んできてぇ~!
        </div>
        <div id='toggle_@ViewData["ichi"]' class="answer border border-dark rounded mb-0 p-3 bg-light text-dark">
            <div id='@ViewData["ichi"]'>
                @Model.content
                <a id='Index_@ViewData["ichi"]' class="btn btn-info card-link text-light" onclick="ajaxCorrectedCount('@ViewData["ichi"]');">
                    このボタンで
                    @ViewData["ichi"]
                    のIDのサーバを呼び出せるよん。
                </a>
            </div>
        </div>
        <div class="question">
            2. この下のNo2をサーバから呼んできてぇ~!
        </div>
        <div id='toggle_@ViewData["ni"]' class="answer border border-dark rounded mb-0 p-3 bg-light text-dark">
            <div id='@ViewData["ni"]'>
                @Model.content
                <a id='Index_@ViewData["ni"]' class="btn btn-info card-link text-light" onclick="ajaxCorrectedCount('@ViewData["ni"]');">
                    このボタンで
                    @ViewData["ni"]
                    のIDのサーバを呼び出せるよん。
                </a>
            </div>
        </div>
        <div class="question">
            3. この下のNo3をサーバから呼んできてぇ~!
        </div>
        <div id='toggle_@ViewData["san"]' class="answer border border-dark rounded mb-0 p-3 bg-light text-dark">
            <div id='@ViewData["san"]'>
                @Model.content
                <a id='Index_@ViewData["san"]' class="btn btn-info card-link text-light" onclick="ajaxCorrectedCount('@ViewData["san"]');">
                    このボタンで
                    @ViewData["san"]
                    のIDのサーバを呼び出せるよん。
                </a>
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script>
        function ajaxCorrectedCount(AjaxMemorizeID) {
            var vId = "#" + AjaxMemorizeID;
            var index_ = '#Index_' + AjaxMemorizeID;
            $.ajax({
                type: 'get',
                url: '?handler=UpdateCorrectedCount&memorizeID=' + AjaxMemorizeID + '',
                datatype: "application/json",
                data: {
                    __RequestVerificationToken: $('[name="__RequestVerificationToken"]').val(),
                },
                success: function (data) {
                    $(vId).html(data.content)
                }
            });
        }

        $(document).ready(function () {
            $(".question").on('click', function () { $(this).next().toggle() });
        });

        function closeAnswer(AjaxMemorizeID) {
            {
                var vId = "#toggle_" + AjaxMemorizeID;
                $(vId).toggle();
            }
        }
    </script>
}

beernekoAjax.png

動画でご覧になりたい方はこちらからどうぞ

初心者おばちゃんの簡単ASP.NET Razor PagesでRESTFul/Ajax使ってみよう
[実際に使ってるOboeroシステムの動画はこちら]
(https://studio.youtube.com/video/RLMCMSeNsxE/edit/basic)

Oboero メモリーシステムで確認してみたい方はこちらをどうぞ

Oboero メモリーシステム

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?