【fetch API】ASP.Net Core(ver 2.1)でフォーム画面からのリクエストパラメータをPost通信する(第4回)

【実行環境】
PC：Windows10
開発環境：Visual Studio2019 Community
C#フレームワーク：ASP.Net Core (version 2.1)

モダンなHTTPリクエスト【fetch API】を使ってHTMLフォームから受け取ったリクエストパラメータを
Post通信してサーバ側にモデルバインドして渡すサンプルを公開します。

fetch APIとよく比較されるのが「XMLhttpRequest」です。ですが最近ではfetch APIでのサーバ通信を
行う傾向にあります。

なぜでしょうか？
それは「fetch APIの方が書き方がシンプルでわかりやすいから」なんですね！

XMLhttpRequestのお話は次の機会に渡すとして早速本題に入りましょう！

【★入力画面★】
![画像1(1回目).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/3fa41c54-5c44-b4f0-c0e2-3c449c238003.png)

【★確認画面★】
![画像2(1回目).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/6c9b736f-2a98-7ecf-b6f9-d2c882e23b97.png)

ディレクトリは以下の通り

```
Project
├ wwwroot
│ ├ js
│ │ ├ TorokuFormFetchAPI1.js
│ │ └ TorokuFormConfirmFetchAPI1.js
│ ├ lib
│ │ ├ bootstrap
│ │ │ ├ js
│ │ │ │ └ bootstrap.min.js
│ │ │ └ css
│ │ │ 　 └ bootstrap.min.css
│ │ └ jquery
│ │ 　 └ jquery.min.js
│ └ pages
│ 　 ├ TorokuFormFetchAPI1.html
│ 　 └ TorokuFormConfirmFetchAPI1.html
├ Controllers
│ └ TorokuFormFetchAPI1Controller.cs
└ Dto
　 └ TorokuFormFetchAPI1Entity.cs
	
```

```TorokuFormFetchAPI1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>登録フォーム</title>
    <!--共通ライブラリ-->
    <link rel="stylesheet" href="" />
    <script type="text/javascript" src="../lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
    <!--個別ファイル-->
    <script type="text/javascript" src="../js/TorokuFormFetchAPI1.js"></script>
</head>
<body>
    登録フォームFetch API１フォーム（multipart/form-data）形式でPOSTする
    <form class="tourokuForm" id="form-element" enctype="multipart/form-data">
        <!--名前(姓)-->
        <div class="nameSeiArea">
            <div class="nameSeiLabelTitle">
                名前(姓)<br />First Name
            </div>
            <div class="nameSeiInputTitle">
                <input type="text" class="nameSeiInputClass" name="nameSei" id="nameSeiInputId" data-toggle="tooltip" title="名前(姓)を入力してください" required />
            </div>
        </div>
        <!--名前(名)-->
        <div class="nameMeiArea">
            <div class="nameMeiLabelTitle">
                名前(名)<br />Last Name
            </div>
            <div class="nameMeiInputTitle">
                <input type="text" class="nameMeiInputClass" name="nameMei" id="nameMeiInputId" data-toggle="tooltip" title="名前(名)を入力してください" required />
            </div>
        </div>
        <!--半角ﾌﾘｶﾞﾅ(姓)-->
        <div class="hankakuHuriganaSeiArea">
            <div class="hankakuHuriganaSeiLabelTitle">
                半角フリガナ(姓)<br />Half-Width Kana(First Name)
            </div>
            <div class="hankakuHuriganaSeiInputTitle">
                <input type="text" class="hankakuHuriganaSeiInputClass" name="hankakuHuriganaSei" id="hankakuHuriganaSeiInputId" data-toggle="tooltip" title="半角フリガナ(姓)を入力してください" required />
            </div>
        </div>
        <!--半角ﾌﾘｶﾞﾅ(名)-->
        <div class="hankakuHuriganaMeiArea">
            <div class="hankakuHuriganaMeiLabelTitle">
                半角フリガナ(名)<br />Half-Width Kana(Last Name)
            </div>
            <div class="hankakuHuriganaMeiInputTitle">
                <input type="text" class="hankakuHuriganaMeiInputClass" name="hankakuHuriganaMei" id="hankakuHuriganaMeiInputId" data-toggle="tooltip" title="半角フリガナ(姓)を入力してください" required />
            </div>
        </div>
        <!--性別-->
        <div class="sexArea">
            <div class="sexLabelTitle">
                性別<br />Sex
            </div>
            <div class="sexInputTitle">
                <label class="radioBtnClass" id="radioBtnClassId">
                    <input type="radio" name="sex" class="sexClass" value="男性" id="sexMen" checked />男性 Men
                    <input type="radio" name="sex" class="sexClass" value="女性" id="sexWomen" />女性 Women
                </label>
            </div>
        </div>
        <!--会社名または学校名-->
        <div class="comnanySchoolNameArea">
            <div class="comnanySchoolNameLabelTitle">
                会社名または学校名<br />Your Company or school Name
            </div>
            <div class="comnanySchoolNameInputTitle">
                <input type="text" class="comnanySchoolNameInputClass" name="comnanySchoolName" id="comnanySchoolNameInputId" data-toggle="tooltip" title="会社名または学校名を入力してください" required />
            </div>
        </div>
        <!--所属先名-->
        <div class="departmentNameArea">
            <div class="departmentNameLabelTitle">
                所属先名<br />Your Department Name
            </div>
            <div class="departmentNameInputTitle">
                <input type="text" class="departmentNameInputClass" name="departmentName" id="departmentNameInputId" data-toggle="tooltip" title="所属先名を入力してください" required />
            </div>
        </div>
        <!--メールアドレス-->
        <div class="emailAddressArea">
            <div class="emailAddressLabelTitle">
                メールアドレス<br />E-mail Address
            </div>
            <div class="emailAddressInputTitle">
                <input type="text" class="emailAddressInputClass" name="emailAddress" id="emailAddressInputId" data-toggle="tooltip" title="メールアドレスを入力してください" required />
            </div>
        </div>
        <!--郵便番号-->
        <div class="addressArea">
            <div class="addressLabelTitle">
                郵便番号<br />Post Address
            </div>
            <div class="addressInputTitle">
                <input type="text" class="addressInputClass" name="address" id="addressInputId" data-toggle="tooltip" title="郵便番号を入力してください" required />
            </div>
            <div class="addressBtnArea">
                <button class="btn btn-primary" id="addressBtnId">自動検索</button>
            </div>
        </div>
        <!--都道府県名-->
        <div class="prefectureArea">
            <div class="prefectureLabelTitle">
                都道府県名<br />Prefecture
            </div>
            <div class="prefectureInputTitle">
                <input type="text" class="prefectureInputClass" name="prefecture" id="prefectureInputId" />
            </div>
        </div>
        <!--市区町村名-->
        <div class="cityNameArea">
            <div class="cityNameLabelTitle">
                市区町村名<br />City Name
            </div>
            <div class="cityNameInputTitle">
                <input type="text" class="cityNameInputClass" name="cityName" id="cityNameInputId" />
            </div>
        </div>
        <!--町名・番地名-->
        <div class="chomeBanchiNameArea">
            <div class="chomeBanchiNameLabelTitle">
                町名・番地名<br />Chome Banchi Name
            </div>
            <div class="chomeBanchiNameInputTitle">
                <input type="text" class="chomeBanchiNameInputClass" name="chomeBanchiName" id="chomeBanchiNameInputId" />
            </div>
        </div>
        <!--電話番号-->
        <div class="phoneArea">
            <div class="phoneLabelTitle">
                電話番号<br />Phone
            </div>
            <div class="phoneInputTitle">
                <input type="text" class="phoneInputClass" name="phone" id="phoneInputId" data-toggle="tooltip" title="電話番号を入力してください" required />
            </div>
        </div>
        <!--FAX-->
        <div class="faxArea">
            <div class="faxLabelTitle">
                Fax番号<br />Fax
            </div>
            <div class="faxInputTitle">
                <input type="text" class="faxInputClass" name="fax" id="faxInputId" />
            </div>
        </div>
        <!--パスワード-->
        <div class="passwordArea">
            <div class="passwordLabelTitle">
                パスワード<br />Password
            </div>
            <div class="passwordInputTitle">
                <input type="password" class="passwordOneceInputClass" name="password" id="passwordOneceInputId" data-toggle="tooltip" title="パスワードを入力してください" required />
                <input type="password" class="passwordTwiceInputClass" name="password" id="passwordTwiceInputId" data-toggle="tooltip" title="パスワードをもう一度入力してください" required />
            </div>
        </div>
        <!--メルマガ購読-->
        <div class="mailMagagineArea">
            <div class="mailMagagineLabelTitle">
                メルマガ購読する<br />Mail Magagine Subscribe
            </div>
            <div class="mailMagagineInputTitle">
                <label class="mailMagagineLabel">
                    <input type="checkbox" class="mailMagagineInputClass" name="mailMagagine" id="mailMagagineInputId" />購読する
                </label>
            </div>
        </div>
    </form>
    <div class="contentsCheckBtnArea">
        <button class="btn contentsCheckBtnClass" id="contentsCheckBtnId">内容確認</button>
    </div>
</body>
</html>
```

```TorokuFormConfirmFetchAPI1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>登録フォーム(確認画面)</title>
    <!--共通ライブラリ-->
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="../lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
    <!--個別ファイル-->
    <script type="text/javascript" src="../js/TorokuFormConfirmFetchAPI1.js"></script>
</head>
<body>
    登録フォームFetch API１フォーム（multipart/form-data）形式でPOSTする
    <form class="tourokuForm" method="post" id="form-element" enctype="multipart/form-data">
        <!--enctype="application/x-www-form-urlencoded"-->
        <!--名前(姓)-->
        <div class="nameSeiArea">
            <div class="nameSeiLabelTitle">
                名前(姓)<br />First Name
            </div>
            <div class="nameSeiInputTitle">
                <input type="text" class="nameSeiInputClass" name="nameSei" id="nameSeiInputId" data-toggle="tooltip" title="名前(姓)を入力してください" required />
            </div>
        </div>
        <!--名前(名)-->
        <div class="nameMeiArea">
            <div class="nameMeiLabelTitle">
                名前(名)<br />Last Name
            </div>
            <div class="nameMeiInputTitle">
                <input type="text" class="nameMeiInputClass" name="nameMei" id="nameMeiInputId" data-toggle="tooltip" title="名前(名)を入力してください" required />
            </div>
        </div>
        <!--半角ﾌﾘｶﾞﾅ(姓)-->
        <div class="hankakuHuriganaSeiArea">
            <div class="hankakuHuriganaSeiLabelTitle">
                半角フリガナ(姓)<br />Half-Width Kana(First Name)
            </div>
            <div class="hankakuHuriganaSeiInputTitle">
                <input type="text" class="hankakuHuriganaSeiInputClass" name="hankakuHuriganaSei" id="hankakuHuriganaSeiInputId" data-toggle="tooltip" title="半角フリガナ(姓)を入力してください" required />
            </div>
        </div>
        <!--半角ﾌﾘｶﾞﾅ(名)-->
        <div class="hankakuHuriganaMeiArea">
            <div class="hankakuHuriganaMeiLabelTitle">
                半角フリガナ(名)<br />Half-Width Kana(Last Name)
            </div>
            <div class="hankakuHuriganaMeiInputTitle">
                <input type="text" class="hankakuHuriganaMeiInputClass" name="hankakuHuriganaMei" id="hankakuHuriganaMeiInputId" data-toggle="tooltip" title="半角フリガナ(姓)を入力してください" required />
            </div>
        </div>
        <!--性別-->
        <div class="sexArea">
            <div class="sexLabelTitle">
                性別<br />Sex
            </div>
            <div class="sexInputTitle">
                <input type="text" class="sexClass" name="sex" id="sexId" />
            </div>
        </div>
        <!--会社名または学校名-->
        <div class="comnanySchoolNameArea">
            <div class="comnanySchoolNameLabelTitle">
                会社名または学校名<br />Your Company or school Name
            </div>
            <div class="comnanySchoolNameInputTitle">
                <input type="text" class="comnanySchoolNameInputClass" name="comnanySchoolName" id="comnanySchoolNameInputId" data-toggle="tooltip" title="会社名または学校名を入力してください" required />
            </div>
        </div>
        <!--所属先名-->
        <div class="departmentNameArea">
            <div class="departmentNameLabelTitle">
                所属先名<br />Your Department Name
            </div>
            <div class="departmentNameInputTitle">
                <input type="text" class="departmentNameInputClass" name="departmentName" id="departmentNameInputId" data-toggle="tooltip" title="所属先名を入力してください" required />
            </div>
        </div>
        <!--メールアドレス-->
        <div class="emailAddressArea">
            <div class="emailAddressLabelTitle">
                メールアドレス<br />E-mail Address
            </div>
            <div class="emailAddressInputTitle">
                <input type="text" class="emailAddressInputClass" name="emailAddress" id="emailAddressInputId" data-toggle="tooltip" title="メールアドレスを入力してください" required />
            </div>
        </div>
        <!--郵便番号-->
        <div class="addressArea">
            <div class="addressLabelTitle">
                郵便番号<br />Post Address
            </div>
            <div class="addressInputTitle">
                <input type="text" class="addressInputClass" name="address" id="addressInputId" data-toggle="tooltip" title="郵便番号を入力してください" required />
            </div>
            <div class="addressBtnArea">
                <button class="btn btn-primary" id="addressBtnId">自動検索</button>
            </div>
        </div>
        <!--都道府県名-->
        <div class="prefectureArea">
            <div class="prefectureLabelTitle">
                都道府県名<br />Prefecture
            </div>
            <div class="prefectureInputTitle">
                <input type="text" class="prefectureInputClass" name="prefecture" id="prefectureInputId" />
            </div>
        </div>
        <!--市区町村名-->
        <div class="cityNameArea">
            <div class="cityNameLabelTitle">
                市区町村名<br />City Name
            </div>
            <div class="cityNameInputTitle">
                <input type="text" class="cityNameInputClass" name="cityName" id="cityNameInputId" />
            </div>
        </div>
        <!--町名・番地名-->
        <div class="chomeBanchiNameArea">
            <div class="chomeBanchiNameLabelTitle">
                町名・番地名<br />Chome Banchi Name
            </div>
            <div class="chomeBanchiNameInputTitle">
                <input type="text" class="chomeBanchiNameInputClass" name="chomeBanchiName" id="chomeBanchiNameInputId" />
            </div>
        </div>
        <!--電話番号-->
        <div class="phoneArea">
            <div class="phoneLabelTitle">
                電話番号<br />Phone
            </div>
            <div class="phoneInputTitle">
                <input type="text" class="phoneInputClass" name="phone" id="phoneInputId" data-toggle="tooltip" title="電話番号を入力してください" required />
            </div>
        </div>
        <!--FAX-->
        <div class="faxArea">
            <div class="faxLabelTitle">
                Fax番号<br />Fax
            </div>
            <div class="faxInputTitle">
                <input type="text" class="faxInputClass" name="fax" id="faxInputId" />
            </div>
        </div>
        <!--パスワード-->
        <div class="passwordArea">
            <div class="passwordLabelTitle">
                パスワード<br />Password
            </div>
            <div class="passwordInputTitle">
                <input type="text" class="passwordOneceInputClass" name="password" id="passwordOneceInputId" data-toggle="tooltip" title="パスワードを入力してください" required />
            </div>
        </div>
        <!--メルマガ購読-->
        <div class="mailMagagineArea">
            <div class="mailMagagineLabelTitle">
                メルマガ購読する<br />Mail Magagine Subscribe
            </div>
            <div class="mailMagagineInputTitle">
                <input type="text" class="mailMagagineInputClass" name="mailMagagine" id="mailMagagineInputId" />購読する
            </div>
        </div>

        <div class="backToPrePage">
            <button class="btn btn-dark backToPrePageClass" id="backToPrePageId">前画面に戻る</button>
        </div>
        <div class="tourokuToDb">
            <button type="button" class="btn btn-primary tourokuToDbClass" id="tourokuToDbId">登録する</button>
        </div>

    </form>
    <!--
    <div class="backToPrePage">
        <button class="btn btn-dark backToPrePageClass" id="backToPrePageId">前画面に戻る</button>
    </div>
    <div class="tourokuToDb">
        <button type="button" class="btn btn-primary tourokuToDbClass" id="tourokuToDbId">登録する</button>
    </div>
    -->
</body>
</html>
```

```TorokuFormFetchAPI1.js
$(document).ready(function () {

    //確認画面から戻ってきたときの処理
    var localData = localStorage.getItem('form_data'); //ローカルストレージから値を取得する。
    localData = JSON.parse(localData); //ローカルストレージから取得した値をオブジェクトデータに戻す。
    if (localData !== null) {
        for (var index in localData) {
            var data = localData[index];
            var formName = data['name'];
            var formVal = data['value'];
            //もう一度値をセットする。
            $('[name=' + formName + ']').val(formVal);
        }

    }

    //内容確認ボタンが押下された時の処理
    $("#contentsCheckBtnId").click(function () {
        var nameSei = $("#nameSeiInputId").val(); //名前(姓)
        var nameMei = $("#nameMeiInputId").val(); //名前(名)
        var hankakuHuriganaSei = $("#hankakuHuriganaSeiInputId").val(); //半角ﾌﾘｶﾞﾅ(姓)
        var hankakuHuriganaMei = $("#hankakuHuriganaMeiInputId").val(); //半角ﾌﾘｶﾞﾅ(姓)
        var sex = $("input[name='sex']:checked").val(); //性別 var sex = $("input[name='sex']:checked").parent().text();
        var comnanySchoolName = $("#comnanySchoolNameInputId").val(); //会社名または学校名
        var departmentName = $("#departmentNameInputId").val(); //所属先
        var emailAddress = $("#emailAddressInputId").val(); //E-mail
        var address = $("#addressInputId").val(); //郵便番号
        var prefecture = $("#prefectureInputId").val(); //都道府県名
        var cityName = $("#cityNameInputId").val(); //市区町村名
        var chomeBanchiName = $("#chomeBanchiNameInputId").val(); //町名・番地名
        var phone = $("#phoneInputId").val(); //電話番号
        var fax = $("#faxInputId").val(); //Fax番号
        var passwordTwice = $("#passwordTwiceInputId").val(); //パスワード
        var mailMagagine = ""; //メルマガの購読希望の判定
        if ($("#mailMagagineInputId").prop("checked") === true) {
            mailMagagine = "購読希望する";
        } else {
            mailMagagine = "購読希望しない";
        }

        var sendData = {
            nameSeiData: nameSei,
            nameMeiData: nameMei,
            hankakuHuriganaSeiData: hankakuHuriganaSei,
            hankakuHuriganaMeiData: hankakuHuriganaMei,
            sexData: sex,
            comnanySchoolNameData: comnanySchoolName,
            departmentNameData: departmentName,
            emailAddressData: emailAddress,
            addressData: address,
            prefectureData: prefecture,
            cityNameData: cityName,
            chomeBanchiNameData: chomeBanchiName,
            phoneData: phone,
            faxData: fax,
            passwordTwiceData: passwordTwice,
            mailMagagineData: mailMagagine
        };

        //フォームの内容をJSONデータで一括取得するコード
        var form = $(".tourokuForm"); // 値を保存しておきたいフォーム
        //var formData = form.serializeArray(); //serializeArray()でフォームの内容をオブジェクト化
        //var formJson = JSON.stringify(formData); //JSON.stringifyメソッドでそのデータをJSON化させる
        var formJson = JSON.stringify(sendData); //JSON.stringifyメソッドでそのデータをJSON化させる
        localStorage.setItem('form_data', formJson); //Jsonデータをローカルストレージに保存する。

        location.href = "TorokuFormConfirmFetchAPI1.html"; //TorokuFormConfirmFetchAPI1.htmlへ遷移する。

    });
});

```

```TorokuFormConfirmFetchAPI1.js
//import { parseJSON } from "jquery";

$(document).ready(function () {

    var localData = localStorage.getItem('form_data'); //ローカルストレージから値を取り出す。
    localData = JSON.parse(localData); //ローカルデータから取得したJSONデータをオブジェクトへ戻す

    //ローカルストレージにデータがなければ null が返ってくるので、nullで分岐
    if (localData !== null) {
        $("#nameSeiInputId").val(localData.nameSeiData); // 
        $("#nameMeiInputId").val(localData.nameMeiData); //
        $("#hankakuHuriganaSeiInputId").val(localData.hankakuHuriganaSeiData); //
        $("#hankakuHuriganaMeiInputId").val(localData.hankakuHuriganaMeiData); //
        $("#sexId").val(localData.sexData);
        $("#comnanySchoolNameInputId").val(localData.comnanySchoolNameData); //会社名
        $("#departmentNameInputId").val(localData.departmentNameData); //所属先名
        $("#emailAddressInputId").val(localData.emailAddressData); //Emailアドレス
        $("#addressInputId").val(localData.addressData); //郵便番号
        $("#prefectureInputId").val(localData.prefectureData); //都道府県名
        $("#cityNameInputId").val(localData.cityNameData); //市町村名
        $("#chomeBanchiNameInputId").val(localData.chomeBanchiNameData); //町名・番地名
        $("#phoneInputId").val(localData.phoneData); //電話番号
        $("#faxInputId").val(localData.faxData); //Fax
        $("#passwordOneceInputId").val("お客様が入力したパスワード"); //パスワード
        var inputPassWord = localData.passwordTwiceData; //パスワードは確認画面で表示せず、変数inputPassWordに格納する。
        $("#mailMagagineInputId").val(localData.mailMagagineData); //メルマガ購読確認

        //一連の処理が終わったタイミングなどで、ローカルストレージの情報を削除する。
        localStorage.removeItem('form_data');
    }

    //前画面に戻る時の処理
    $("#backToPrePageId").click(function () {
        //前画面に戻るボタンを押下したときの処理
        backToPrePageSetLocalStorage();
    });

    //DBに登録するときの処理
    $("#tourokuToDbId").click(function () {
        torokuToDb();
    });
});


//前画面に戻るボタンを押下したときの処理
function backToPrePageSetLocalStorage() {
    //フォームの内容をJSONデータで一括取得するコード
    var form = $(".tourokuForm");
    var formData = form.serializeArray();//serializeArray()でフォームの内容をオブジェクト化
    var formJson = JSON.stringify(formData); //JSON.stringifyメソッドでそのデータをJSON化させる

    localStorage.setItem('form_data', formJson); //ローカルストレージに保存する。
    location.href = "TorokuForm.html";
}

//DBに登録する処理
function torokuToDb() {
    
    // 新規送信用オブジェクトformDataのインスタンスを生成する。
    var formData = new FormData();
    
    //formタグのパラメーターをそれぞれの変数に格納する。
    var nameSei = $("#nameSeiInputId").val(); //名前(姓)
    var nameMei = $("#nameMeiInputId").val(); //名前(名)
    var hankakuHuriganaSei = $("#hankakuHuriganaSeiInputId").val(); //半角ﾌﾘｶﾞﾅ(姓)
    var hankakuHuriganaMei = $("#hankakuHuriganaMeiInputId").val(); //半角ﾌﾘｶﾞﾅ(姓)
    var sex = $("#sexId").val(); //性別
    var comnanySchoolName = $("#comnanySchoolNameInputId").val(); //会社名または学校名
    var departmentName = $("#departmentNameInputId").val(); //所属先
    var emailAddress = $("#emailAddressInputId").val(); //E-mail
    var address = $("#addressInputId").val(); //郵便番号
    var prefecture = $("#prefectureInputId").val(); //都道府県名
    var cityName = $("#cityNameInputId").val(); //市区町村名
    var chomeBanchiName = $("#chomeBanchiNameInputId").val(); //町名・番地名
    var phone = $("#phoneInputId").val(); //電話番号
    var fax = $("#faxInputId").val(); //Fax番号
    var passwordTwice = $("#passwordTwiceInputId").val(); //パスワード
    var mailMagagine = $("#mailMagagineInputId").val(); //メルマガの購読希望の判定

    //appendメソッドを使って第一引数にkey名、第二引数に値(変数)を指定してformDataインスタンスに格納していく。
    formData.append("nameSeiData", nameSei);
    formData.append("nameMeiData", nameMei);
    formData.append("hankakuHuriganaSeiData", hankakuHuriganaSei);
    formData.append("hankakuHuriganaMeiData", hankakuHuriganaMei);
    formData.append("sexData", sex);
    formData.append("comnanySchoolNameData", comnanySchoolName);
    formData.append("departmentNameData", departmentName);
    formData.append("emailAddressData", emailAddress);
    formData.append("addressData", address);
    formData.append("prefectureData", prefecture);
    formData.append("cityNameData", cityName);
    formData.append("chomeBanchiNameData", chomeBanchiName);
    formData.append("phoneData", phone);
    formData.append("faxData", fax);
    formData.append("passwordTwiceData", passwordTwice);
    formData.append("mailMagagineData", mailMagagine);

    //コンソールでformDataの中身を確認する。
    console.log(formData);

    //fetch内の各引数は以下の通り。
    //第1引数は【アクションメソッドのPath】、
    //第2引数は【通信方法 例)Get または　Post】、
    //第3引数は【データの型】
    //サンプル例：fetch(Path,{method:"POST",body:formData})
    const response = fetch("../api/TorokuFormFetchAPI1/postTorokuData", { //【重要ポイント】「await」句は削除すること
        method: "POST",   // GET POST PUT DELETEなど
        body: formData        // リクエスト本文にフォームデータを設定
    });

}
```

```TorokuFormFetchAPI1Controller.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using WebApplication8.Dto;
using WebApplication8.Setting;

namespace WebApplication8.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class TorokuFormFetchAPI1Controller : ControllerBase
    {
        /// <summary>
        /// 設定記述オブジェクト
        /// </summary>
        private readonly IOptions<DBSetting> options = null;

        /// <summary>
        /// インスタンス生成時に設定記述オブジェクトの取り込みを行う。
        /// </summary>
        public TorokuFormFetchAPI1Controller(IOptions<DBSetting> options)
        {
            //設定記述子
            this.options = options;
        }

        /// <summary>
        /// HTMLフォームからのリクエストパラメータをエンティティクラスの各プロパティへモデルバインド
        /// して引数として渡す。
        /// </summary>
        /// <param name="torokuFormEntity"></param>
        [HttpPost("postTorokuData")]
        public void postTorokuData([FromForm] TorokuFormFetchAPI1Entity torokuFormEntity)
        {
            //データベースとの接続処理等を記述する。
        }
    }
}

```

```TorokuFormFetchAPI1Entity.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication8.Dto
{
    public class TorokuFormFetchAPI1Entity
    {
        public string nameSeiData { get; set; }
        public string nameMeiData { get; set; }
        public string hankakuHuriganaSeiData { get; set; }
        public string hankakuHuriganaMeiData { get; set; }
        public string sexData { get; set; }
        public string comnanySchoolNameData { get; set; }
        public string departmentNameData { get; set; }
        public string emailAddressData { get; set; }
        public string addressData { get; set; }
        public string prefectureData { get; set; }
        public string cityNameData { get; set; }
        public string chomeBanchiNameData { get; set; }
        public string phoneData { get; set; }
        public string faxData { get; set; }
        public string passwordTwiceData { get; set; }
        public string mailMagagineData { get; set; }
    }
}

```

確認画面の「登録する」ボタンをクリックすると...
無事サーバ側のアクションメソッドにリクエストパラメータが渡されたことが確認できました。
![画像3(1回目).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/985a16b8-5cba-7036-9e02-dc9d02b9509c.png)