Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

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

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

Last updated at Posted at 2021-03-08

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

ASP.Net Core(version 2.1)でのHTMLフォーム画面から登録内容を入力してPost通信してサーバ側に送る、という一連のサンプルコードがなかなか見当たらないので作ってみた。

この記事はシリーズ化する予定。
第1回はHTMLの「form」タグを使わずにPost通信する方法を考えてみた。
入力画面と確認画面は以下の通り。

【★入力画面★】
登録フォーム入力画面.png

【★確認画面★】
登録フォーム確認画面.png

プロジェクトのディレクトリ構造は以下の通り。
【ディレクトリ構造】

Project
├ wwwroot
│ ├ js
│ │ └ TorokuForm.js
│ ├ 	
│ ├ css
│ ├ 	
│ ├ lib
│ │ ├ bootstrap
│ │ │ └ js
│ │ │ 　 └ bootstrap.min.js
│ │ ├ jquery
│ │ │ └ jquery.min.js
│ │ └ 	
│ ├ pages
│ │ ├ TorokuForm.html
│ │ └ TorokuFormConfirm.html
│ └ 	
├ Controllers
│ └ TorokuFormController.cs
├ 	
└ Dto
　 └ TorokuFormEntity.cs
TorokuForm.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/TorokuForm.js"></script>
</head>
<body>
    <!--名前(姓)-->
    <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>

    <div class="contentsCheckBtnArea">
        <button class="btn contentsCheckBtnClass" id="contentsCheckBtnId">内容確認</button>
    </div>
</body>
</html>
TorokuFormConfirm.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/TorokuFormConfirm.js"></script>
</head>
<body>
    <!--名前(姓)-->
    <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>
</body>
</html>
TorokuForm.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 = "TorokuFormConfirm.html"; //TorokuFormConfirm.htmlへ遷移する。

    });
});
TorokuFormConfirm.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() {

    //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(); //メルマガの購読希望の判定

    var torokuFormEntity = {
        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
    };

    var m = JSON.stringify(torokuFormEntity);
    console.log(m);

    //POST通信を実行する。
    $.ajax({
        url: "../api/TorokuForm/postTorokuData",
        type: "POST",
        data: JSON.stringify(torokuFormEntity), // m
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            alert("OK通信");
        },
        error: function (xhr) {
            alert(xhr.status);
        }
    });

}
TorokuFormController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using WebApplication8.Dto;
using WebApplication8.Setting;


namespace WebApplication8.Controllers
{
    [Route("api/TorokuForm")] //[Route("api/[controller]")]
    [ApiController]
    public class TorokuFormController : ControllerBase
    {

        /// <summary>
        /// 設定記述オブジェクト
        /// </summary>
        private readonly IOptions<DBSetting> options = null;

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

        [HttpPost("postTorokuData")]
        public void postTorokuData([FromBody]TorokuFormEntity torokuFormEntity)
        { 
            //処理を書く。
        }
    }
}
TorokuFormEntity.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication8.Dto
{
    public class TorokuFormEntity
    {
        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; }
    }
}

確認画面にある登録ボタンを送信すると、無事Controllerクラス「TorokuFormController.cs」にリクエストパラメータが渡されている。

【結果】
サーバ通信後のコード.png

0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?