20210308のHTMLに関する記事は6件です。

投稿日：2021-03-08T22:46:05+09:00

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

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

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

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

【★入力画面★】

【★確認画面★】

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

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」にリクエストパラメータが渡されている。

【結果】

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-08T18:08:47+09:00

【CSS】white-spaceの使い方

プログラミング勉強日記

2021年3月8日

white-spaceとは

　テキスト内の改行・スペース・タブをどのように扱うか指定できる。

white-spaceの使い方
white-space: 値;
　この値には、normal, nowrap, pre, pre-wrap, pre-lineのどれかを指定する。
　
　normalは初期状態と同じで、HTMLを使用するときのいつも通り表示される。連続した半角スペース/tab/改行を全て1つの半角スペースとして表示し、改行は通常通り横幅いっぱいになったときに行う。
　nowrapは、normal同様連続した半角スペース/tab/改行を全て1つの半角スペースとして表示する。テキスト内で改行を行われた場合に改行する。
　preは、半角スペース/tab/改行をそのまま表示し、改行は横幅いっぱいになっても改行を行わない。テキスト内で改行を行われた場合に改行する。
　pre-wrapは、normal同様連続した半角スペース/tab/改行を全て1つの半角スペースとして表示する。改行は横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行する。
　pre-lineは、preと同様に半角スペース/tab/改行をそのまま表示する。改行はpre-wrap同様に横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行する。
　pre-lineは、normal同様連続した半角スペース/tab/改行を全て1つの半角スペースとして表示する。改行はpre-wrap同様に横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行する。

これらを表にまとめると以下のようになる。

値表示の説明改行の説明

normal（初期値）連続した半角スペース/tab/改行を全て1つの半角スペースとして表示横幅いっぱいになったときに改行

nowrap 連続した半角スペース/tab/改行を全て1つの半角スペースとして表示テキスト内で改行を行われた場合に改行

pre 半角スペース/tab/改行をそのまま表示改行は横幅いっぱいになっても改行を行わない。テキスト内で改行を行われた場合に改行

pre-wrap 半角スペース/tab/改行を全て1つの半角スペースとして表示横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行

pre-line 連続した半角スペース/tab/改行を全て1つの半角スペースとして表示横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行

参考文献

CSSで改行ルールを簡単設定！改行をコントロールする方法
 white-space

値	表示の説明	改行の説明
normal（初期値）	連続した半角スペース/tab/改行を全て1つの半角スペースとして表示	横幅いっぱいになったときに改行
nowrap	連続した半角スペース/tab/改行を全て1つの半角スペースとして表示	テキスト内で改行を行われた場合に改行
pre	半角スペース/tab/改行をそのまま表示	改行は横幅いっぱいになっても改行を行わない。テキスト内で改行を行われた場合に改行
pre-wrap	半角スペース/tab/改行を全て1つの半角スペースとして表示	横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行
pre-line	連続した半角スペース/tab/改行を全て1つの半角スペースとして表示	横幅いっぱいになってもテキスト内で改行を行われた場合でもどちらの場合も改行

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-08T14:40:21+09:00

laravel asset関数でcssファイルとimgを呼び出す

はじめに

HTMLでimgの表示とasset関数でimgを表示するのがごちゃごちゃになったので備忘録として投稿します。

asset関数とは?

asset関数とはlaravelにあるヘルパ関数の一つになります。
詳しくはlaravelの公式ページをご覧下さい。
画像の呼び出し、URLの遷移として使用可能です。

asset関数でimgを呼び出す方法?

asset関数はlaravelのpublicフォルダから見た時に、どこにあるのかを引数として指定する必要があります。laravelのフォルダ構成はスクショの様になっています。

asset関数をどの様に記述するのか?

publicフォルダから見た時に、どこにあるのかを引数として書くには以下の様にします。
index.blade.php
//cssファイルの呼び出し
<link rel="stylesheet" href="{{ asset('/css/bulletin-board/index-list.css') }}" >

//画像の呼び出し
<img src="{{ asset('/css/images/black-board.jpg') }}" >
最後に

HTMLで<img src="images/black-board.jpg">で画像を呼び出せる方法は前から知っていたが知識が増えるとあれはどうなの?これはどうなの?と疑問が増えて試行錯誤の連続があると思います。一度整理してとりあえず書いてどの様に反映されるかを確認するキッカケとなりました。画像やcssファイルを呼び出すときはasset関数で統一するように調整してみます。

参考文献

Laravel 5、{{url}}と{{asset}}の違いは何ですか？

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-08T14:40:21+09:00

laravel asset関数でcssファイルと画像を呼び出す

はじめに

HTMLでimgの表示とasset関数でimgを表示するのがごちゃごちゃになったので備忘録として投稿します。

asset関数とは?

asset関数とはlaravelにあるヘルパ関数の一つになります。
詳しくはlaravelの公式ページをご覧下さい。
画像の呼び出し、URLの遷移として使用可能です。

asset関数でimgを呼び出す方法?

asset関数はlaravelのpublicフォルダから見た時に、どこにあるのかを引数として指定する必要があります。laravelのフォルダ構成はスクショの様になっています。

asset関数をどの様に記述するのか?

publicフォルダから見た時に、どこにあるのかを引数として書くには以下の様にします。
index.blade.php
//cssファイルの呼び出し
<link rel="stylesheet" href="{{ asset('/css/bulletin-board/index-list.css') }}" >

//画像の呼び出し
<img src="{{ asset('/css/images/black-board.jpg') }}" >
最後に

HTMLで<img src="images/black-board.jpg">で画像を呼び出せる方法は前から知っていたが知識が増えるとあれはどうなの?これはどうなの?と疑問が増えて試行錯誤の連続があると思います。一度整理してとりあえず書いてどの様に反映されるかを確認するキッカケとなりました。画像やcssファイルを呼び出すときはasset関数で統一するように調整してみます。

参考文献

Laravel 5、{{url}}と{{asset}}の違いは何ですか？

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-08T11:27:05+09:00

アニメーション

アニメーションをまとめます。

チェックボックス

チェックマークがいい感じにつく

<input type="radio" name="test" id="test1">
<label for="test1">チェックボックス</label>

input[type="radio"] {
    display: none;
}

input[type="radio"]+label {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 0px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input[type="radio"]+label:last-child {
    margin-bottom: 0;
}

input[type="radio"]+label:before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #6cc0e5;
    position: absolute;
    left: 0;
    top: 3px;
    opacity: .8;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

input[type="radio"]:checked+label:before {
    width: 10px;
    top: -1px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

ツールチップ

text.blade.php

<button type="button" class="btn--circle btn--circle-c btn--shadow tooltip1 bookshelf_store_js" data-id="{{ $novel->id }}">
    <i class="fas fa-book-medical"></i>
    <div class="tooltip_content">本棚に追加</div>
</button>

text.scss

//ツールチップ
.tooltip1 {
    position: relative;
    cursor: pointer;
    display: inline-block;

    i {
        margin: 0;
        padding: 0;
    }

    & .tooltip_content {
        display: none;
        position: absolute;
        margin: 1.5em 0;
        padding: 7px 10px;
        min-width: 120px;
        max-width: 100%;
        color: #555;
        font-size: 0.9rem;
        background: #FFF;
        border: solid 2px $border_color;
        box-sizing: border-box;
        box-shadow: 1px 1px 5px $border_color;
        z-index: 2;

        &:before {
            content: "";
            position: absolute;
            top: -24px;
            left: 50%;
            margin-left: -15px;
            border: 12px solid transparent;
            border-bottom: 12px solid #FFF;
            z-index: 2;
        }

        &:after {
            content: "";
            position: absolute;
            top: -30px;
            left: 50%;
            margin-left: -17px;
            border: 14px solid transparent;
            border-bottom: 14px solid $border_color;
            z-index: 1;
        }
    }

    &:hover .tooltip_content {
        display: inline-block;
        top: 35px;
        left: -40px;
    }

}

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-08T01:08:52+09:00

営業の私がGoogle Apps Script【GAS】を使って営業の業務を自動化・効率化していく話。

はじめに

※この記事は随時更新しています。(最終更新日：2021/3/8 業務フロー大枠を更新)
※この記事は私が仕事している企業の状況等を記載しておりますが、企業内の機密情報は一切記載しません。そのため一部表現を変えたり情報をマスクしていますがご容赦ください。

私は小さなIT企業で営業をしています。
もともとはエンジニアでしたが、会社都合で入社から3年後にして営業をしています。(謎)
営業の業務って本当に無駄な業務が多いんですよね・・・。

特に私の今いる会社では、人数がとても少ないので、一言で営業といっても単に顧客へのセールスだけが仕事というわけではありません。

契約等の事務処理、契約書作成、プロダクト開発、マーケティング、広報・・・
あげればキリがありません。もはや万屋です。

[営業]という切り口から、現在の繰り返しの業務を上げると、たくさん出てきます。
・CRMでの案件作成
・見積書の作成・提出
・契約書の作成・提出・受領
・契約書の締結
・稟議起案・押印
・CRMでの案件情報更新
・顧客への案内(契約書、見積書の送付等)

こんな同じことの繰り返し業務を営業は当たり前のようにやっているわけです。
もう、やめませんかこんな単純な作業と訴えたいのが私の思いであり、誰もやっていないところだったので、
自分が上記の業務を全部効率化・自動化したったろ！というのが志であります。

というわけで、この記事では、私が日頃行う業務をGASをつかってどうやってどのくらい効率化・自動化できるかをまとめて行くことにします。

会社で使っているツール一覧

プラットフォーム：Googple Gsuite

コミュニケーション：Slack

SCM：Salesforce

BIツール：TableauOnline(念の為)

稟議：承認Time

自動化・効率化の前にやるべきこと

業務を自動化する上で、実際にコーディング(自動化)する前にやるべきことがあります。

現状の業務フローを整理(大枠からPCの操作レベルまで詳細を整理)

自動化・効率化するためのフロー設計

モックアップ作成

とはいえ、上記ができるのは過去に経験者であればできると思いますが、私は一連の流れを経験したことがないので、
できるだけ上記をまず優先的にやりつつも、試験的にコーディングを並行してやって行くことにします。

業務フローの整理(大枠)

以下に、営業のメンバーが行う大枠の業務フローです。
これを１案件ごとにやっており、1日に一人あたり10件程度裁いています。
(しんどいです・・・・・・)

見積書作成

[会社名]・[見積No]・[金額]などの項目を見積書に記入

完成した見積書をPDF形式でダウンロードして指定のフォルダに保存

申込書の作成

申込書に必要な情報記入

EXCEL形式で新しくファイルを指定のフォルダに保存

作成した見積書・申込書・利用規約をメールでクライアントに送る

メール文を作文

見積書・申込書・利用規約をメールに添付

メール送信

クライアントの申込書内容の確認

記載内容が正しいかを確認

確認後、押印してpdfと原本を要求

CRMの情報更新

CRMの明細情報更新

案件フェーズを見積・契約対応に変更

稟議起案

稟議を作成(必要情報の記入)

見積書・申込書の添付

申請

稟議承認後に書類の押印申請用の稟議を申請

稟議押印申請→こちらは担当が別にいるため、担当者に依頼する。

納品対応

納品対応

CRM情報更新

案件フェーズを[商談成立]に変更

納品書・請求書作成対応

納品書・請求書の作成を依頼する。

納品書・請求書等の提出

業務フローのグルーピング化

上の業務フローを見てみると、以下のようにフローをグルーピングできると思います。

資料作成(見積書、申込書の作成等)

メール送信(案内、納品書、請求書提出等)

稟議起案

CRM情報更新

担当者への依頼

納品

上記の機能が一つの画面でボタンぽちぽちすれば実行される・・みたいなことができたら最高です。
また、上記グルーピングした業務の中で、詳細業務をリスト化していきます。

資料作成

見積書作成

申込書作成

メール送信

見積書・申込書・利用規約を送る。

納品後に案内する

納品書・請求書を提出する。

稟議起案

稟議を起案する

CRMの情報を更新する

明細を作成する

案件フェーズを変更する

担当者へ依頼する

稟議(押印申請)を依頼する。

納品書、請求書の作成を依頼する。

納品

納品する

このようにグルーピングすることで、資料作成→見積書→みたいな形で選択できるようにすれば、シンプルな画面設計・フローにすることができます。上記記載のように、大きなフローは全部で６個存在することがわかりました。

モックアップ

※随時更新します。

コード

　※随時更新します。

まとめ

　※随時更新します。

　 Tweet
Qiitaで続きを読む

20210308のHTMLに関する記事は6件です。

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

【CSS】white-spaceの使い方

プログラミング勉強日記

white-spaceとは

white-spaceの使い方

参考文献

laravel asset関数でcssファイルとimgを呼び出す

はじめに

asset関数とは?

asset関数でimgを呼び出す方法?

asset関数をどの様に記述するのか?

最後に

参考文献

laravel asset関数でcssファイルと画像を呼び出す

はじめに

asset関数とは?

asset関数でimgを呼び出す方法?

asset関数をどの様に記述するのか?

最後に

参考文献

アニメーション

チェックボックス

チェックマークがいい感じにつく

ツールチップ

営業の私がGoogle Apps Script【GAS】を使って営業の業務を自動化・効率化していく話。

はじめに

会社で使っているツール一覧

自動化・効率化の前にやるべきこと

業務フローの整理(大枠)

業務フローのグルーピング化

モックアップ

コード

まとめ

日付別

タグ一覧