LoginSignup
0
1

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.

@SKY-HaYaTo

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

Last updated at Posted at 2021-03-11

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

今回は従来から存在するHTTPリクエスト【XMLhttpRequest】を使ってHTMLフォームから受け取ったリクエストパラメータを
Post通信してサーバ側にモデルバインドして渡すサンプルを公開します。

今回はformタグを使って「multipart/form-data」形式でPost通信してみます。

【★入力画面★】
画像1(1回目).png

【★確認画面★】
画像2(1回目).png

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

Project
├ wwwroot
│ ├ js
│ │ ├ TorokuFormXMLhttpRequest1.js
│ │ └ TorokuFormXMLhttpRequest1Confirm.js
│ ├ lib
│ │ ├ bootstrap
│ │ │ ├ js
│ │ │ │ └ bootstrap.min.js
│ │ │ └ css
│ │ │ 　 └ bootstrap.min.css
│ │ └ jquery
│ │ 　 └ jquery.min.js
│ └ pages
│ 　 ├ TorokuFormXMLhttpRequest1.html
│ 　 └ TorokuFormXMLhttpRequest1Confirm.html
├ Controllers
│ 　 └ TorokuFormXMLhttpRequest1Controller.cs
├ Dto
│ └ TorokuFormXMLhttpRequest1Entity.cs
└ Setting
　 └ DBSetting.cs
TorokuFormXMLhttpRequest1.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/TorokuFormXMLhttpRequest1.js"></script>
</head>
<body>
    【登録フォーム】XMLhttpRequest１フォーム（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>
TorokuFormXMLhttpRequest1Confirm.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/TorokuFormXMLhttpRequest1Confirm.js"></script>
</head>
<body>
    【登録フォーム】XMLhttpRequest１フォーム（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>
TorokuFormXMLhttpRequest1.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 = "TorokuFormXMLhttpRequest1Confirm.html"; //TorokuFormXMLhttpRequest1Confirm.htmlへ遷移する。

    });
});
TorokuFormXMLhttpRequest1Confirm.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);

    //XMLHttpRequestのインスタンス変数xhrを生成する。
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) { //通信が完了した時
            if (xhr.readyState === 200) { //通信が成功した時
                console.log("通信成功");
            } else { //通信が失敗した時
                console.log("通信失敗");
            }
        } else { //通信が完了する前
            console.log("ただいま通信中･･･");
        }
    };

    // openメソッドでリクエストを初期化する。
    //【基本構造】：xhr.open(method,url,async);
    //openメソッドの第1引数：HTTPメソッド(GET / POST など)
    //openメソッドの第2引数：アクションメソッドのURL
    //openメソッドの第3引数：非同期通信か(デフォルトはtrueが設定される)
    xhr.open('POST', '../api/TorokuFormXMLhttpRequest1/postTorokuData',true);

    // FormData オブジェクトを送信するだけです。HTTP ヘッダは自動的に設定されます
    xhr.send(formData);

}
TorokuFormXMLhttpRequest1Controller.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using WebApplication8.Dto;
using WebApplication8.Setting;

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

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

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

namespace WebApplication8.Dto
{
    public class TorokuFormXMLhttpRequest1Entity
    {
        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; }
    }
}
DBSetting.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication8.Setting
{
    public class DBSetting
    {
        public string ConnectionString { get; set; }
    }
}

確認画面の「登録する」ボタンをクリックすると...
無事サーバ側のアクションメソッドにリクエストパラメータを渡すことが出来ました。

画像3(1回目).png

0
1
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
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?