Quantcast
Channel: C#タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9366

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

$
0
0

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

第2回に続いてです。
今回のASP.Net Coreを使ってHTMLフォームからサーバへリクエストパラメータを送信する方法を書きます。
第2回よりも短く・スッキリとした方法がありましたので紹介します。

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

【★確認画面★】
画像2(第3回).png

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

Project
├ wwwroot
│ ├ js
│ │ ├ TorokuForm1.js
│ │ └ TorokuFormConfirm1.js
│ ├ lib
│ │ ├ bootstrap
│ │ │ ├ js
│ │ │ │ └ bootstrap.min.js
│ │ │ └ css
│ │ │   └ bootstrap.min.css
│ │ ├ jquery
│ │ │ └ jquery.min.js
│ │ └     
│ └ pages
│   ├ TorokuForm1.html
│   └ TorokuFormConfirm1.html
├ Controllers
│ └ TorokuForm1Controller.cs
└ Dto
  └ TorokuForm1Entity.cs

TorokuForm1.html
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>登録フォーム</title><!--共通ライブラリ--><linkrel="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/TorokuForm1.js"></script></head><body>登録フォーム1
    <formclass="tourokuForm"id="form-element"enctype="multipart/form-data"><!--名前(姓)--><divclass="nameSeiArea"><divclass="nameSeiLabelTitle">名前(姓)<br/>First Name
            </div><divclass="nameSeiInputTitle"><inputtype="text"class="nameSeiInputClass"name="nameSei"id="nameSeiInputId"data-toggle="tooltip"title="名前(姓)を入力してください"required/></div></div><!--名前(名)--><divclass="nameMeiArea"><divclass="nameMeiLabelTitle">名前(名)<br/>Last Name
            </div><divclass="nameMeiInputTitle"><inputtype="text"class="nameMeiInputClass"name="nameMei"id="nameMeiInputId"data-toggle="tooltip"title="名前(名)を入力してください"required/></div></div><!--半角フリガナ(姓)--><divclass="hankakuHuriganaSeiArea"><divclass="hankakuHuriganaSeiLabelTitle">半角フリガナ(姓)<br/>Half-Width Kana(First Name)
            </div><divclass="hankakuHuriganaSeiInputTitle"><inputtype="text"class="hankakuHuriganaSeiInputClass"name="hankakuHuriganaSei"id="hankakuHuriganaSeiInputId"data-toggle="tooltip"title="半角フリガナ(姓)を入力してください"required/></div></div><!--半角フリガナ(名)--><divclass="hankakuHuriganaMeiArea"><divclass="hankakuHuriganaMeiLabelTitle">半角フリガナ(名)<br/>Half-Width Kana(Last Name)
            </div><divclass="hankakuHuriganaMeiInputTitle"><inputtype="text"class="hankakuHuriganaMeiInputClass"name="hankakuHuriganaMei"id="hankakuHuriganaMeiInputId"data-toggle="tooltip"title="半角フリガナ(姓)を入力してください"required/></div></div><!--性別--><divclass="sexArea"><divclass="sexLabelTitle">性別<br/>Sex
            </div><divclass="sexInputTitle"><labelclass="radioBtnClass"id="radioBtnClassId"><inputtype="radio"name="sex"class="sexClass"value="男性"id="sexMen"checked/>男性 Men
                    <inputtype="radio"name="sex"class="sexClass"value="女性"id="sexWomen"/>女性 Women
                </label></div></div><!--会社名または学校名--><divclass="comnanySchoolNameArea"><divclass="comnanySchoolNameLabelTitle">会社名または学校名<br/>Your Company or school Name
            </div><divclass="comnanySchoolNameInputTitle"><inputtype="text"class="comnanySchoolNameInputClass"name="comnanySchoolName"id="comnanySchoolNameInputId"data-toggle="tooltip"title="会社名または学校名を入力してください"required/></div></div><!--所属先名--><divclass="departmentNameArea"><divclass="departmentNameLabelTitle">所属先名<br/>Your Department Name
            </div><divclass="departmentNameInputTitle"><inputtype="text"class="departmentNameInputClass"name="departmentName"id="departmentNameInputId"data-toggle="tooltip"title="所属先名を入力してください"required/></div></div><!--メールアドレス--><divclass="emailAddressArea"><divclass="emailAddressLabelTitle">メールアドレス<br/>E-mail Address
            </div><divclass="emailAddressInputTitle"><inputtype="text"class="emailAddressInputClass"name="emailAddress"id="emailAddressInputId"data-toggle="tooltip"title="メールアドレスを入力してください"required/></div></div><!--郵便番号--><divclass="addressArea"><divclass="addressLabelTitle">郵便番号<br/>Post Address
            </div><divclass="addressInputTitle"><inputtype="text"class="addressInputClass"name="address"id="addressInputId"data-toggle="tooltip"title="郵便番号を入力してください"required/></div><divclass="addressBtnArea"><buttonclass="btn btn-primary"id="addressBtnId">自動検索</button></div></div><!--都道府県名--><divclass="prefectureArea"><divclass="prefectureLabelTitle">都道府県名<br/>Prefecture
            </div><divclass="prefectureInputTitle"><inputtype="text"class="prefectureInputClass"name="prefecture"id="prefectureInputId"/></div></div><!--市区町村名--><divclass="cityNameArea"><divclass="cityNameLabelTitle">市区町村名<br/>City Name
            </div><divclass="cityNameInputTitle"><inputtype="text"class="cityNameInputClass"name="cityName"id="cityNameInputId"/></div></div><!--町名・番地名--><divclass="chomeBanchiNameArea"><divclass="chomeBanchiNameLabelTitle">町名・番地名<br/>Chome Banchi Name
            </div><divclass="chomeBanchiNameInputTitle"><inputtype="text"class="chomeBanchiNameInputClass"name="chomeBanchiName"id="chomeBanchiNameInputId"/></div></div><!--電話番号--><divclass="phoneArea"><divclass="phoneLabelTitle">電話番号<br/>Phone
            </div><divclass="phoneInputTitle"><inputtype="text"class="phoneInputClass"name="phone"id="phoneInputId"data-toggle="tooltip"title="電話番号を入力してください"required/></div></div><!--FAX--><divclass="faxArea"><divclass="faxLabelTitle">
                Fax番号<br/>Fax
            </div><divclass="faxInputTitle"><inputtype="text"class="faxInputClass"name="fax"id="faxInputId"/></div></div><!--パスワード--><divclass="passwordArea"><divclass="passwordLabelTitle">パスワード<br/>Password
            </div><divclass="passwordInputTitle"><inputtype="password"class="passwordOneceInputClass"name="password"id="passwordOneceInputId"data-toggle="tooltip"title="パスワードを入力してください"required/><inputtype="password"class="passwordTwiceInputClass"name="password"id="passwordTwiceInputId"data-toggle="tooltip"title="パスワードをもう一度入力してください"required/></div></div><!--メルマガ購読--><divclass="mailMagagineArea"><divclass="mailMagagineLabelTitle">メルマガ購読する<br/>Mail Magagine Subscribe
            </div><divclass="mailMagagineInputTitle"><labelclass="mailMagagineLabel"><inputtype="checkbox"class="mailMagagineInputClass"name="mailMagagine"id="mailMagagineInputId"/>購読する
                </label></div></div></form><divclass="contentsCheckBtnArea"><buttonclass="btn contentsCheckBtnClass"id="contentsCheckBtnId">内容確認</button></div></body></html>
TorokuFormConfirm1.html
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>登録フォーム(確認画面)</title><!--共通ライブラリ--><linkrel="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/TorokuFormConfirm1.js"></script></head><body>登録フォーム1
    <formclass="tourokuForm"method="post"id="form-element"enctype="application/x-www-form-urlencoded"><!--名前(姓)--><divclass="nameSeiArea"><divclass="nameSeiLabelTitle">名前(姓)<br/>First Name
            </div><divclass="nameSeiInputTitle"><inputtype="text"class="nameSeiInputClass"name="nameSei"id="nameSeiInputId"data-toggle="tooltip"title="名前(姓)を入力してください"required/></div></div><!--名前(名)--><divclass="nameMeiArea"><divclass="nameMeiLabelTitle">名前(名)<br/>Last Name
            </div><divclass="nameMeiInputTitle"><inputtype="text"class="nameMeiInputClass"name="nameMei"id="nameMeiInputId"data-toggle="tooltip"title="名前(名)を入力してください"required/></div></div><!--半角フリガナ(姓)--><divclass="hankakuHuriganaSeiArea"><divclass="hankakuHuriganaSeiLabelTitle">半角フリガナ(姓)<br/>Half-Width Kana(First Name)
            </div><divclass="hankakuHuriganaSeiInputTitle"><inputtype="text"class="hankakuHuriganaSeiInputClass"name="hankakuHuriganaSei"id="hankakuHuriganaSeiInputId"data-toggle="tooltip"title="半角フリガナ(姓)を入力してください"required/></div></div><!--半角フリガナ(名)--><divclass="hankakuHuriganaMeiArea"><divclass="hankakuHuriganaMeiLabelTitle">半角フリガナ(名)<br/>Half-Width Kana(Last Name)
            </div><divclass="hankakuHuriganaMeiInputTitle"><inputtype="text"class="hankakuHuriganaMeiInputClass"name="hankakuHuriganaMei"id="hankakuHuriganaMeiInputId"data-toggle="tooltip"title="半角フリガナ(姓)を入力してください"required/></div></div><!--性別--><divclass="sexArea"><divclass="sexLabelTitle">性別<br/>Sex
            </div><divclass="sexInputTitle"><inputtype="text"class="sexClass"name="sex"id="sexId"/></div></div><!--会社名または学校名--><divclass="comnanySchoolNameArea"><divclass="comnanySchoolNameLabelTitle">会社名または学校名<br/>Your Company or school Name
            </div><divclass="comnanySchoolNameInputTitle"><inputtype="text"class="comnanySchoolNameInputClass"name="comnanySchoolName"id="comnanySchoolNameInputId"data-toggle="tooltip"title="会社名または学校名を入力してください"required/></div></div><!--所属先名--><divclass="departmentNameArea"><divclass="departmentNameLabelTitle">所属先名<br/>Your Department Name
            </div><divclass="departmentNameInputTitle"><inputtype="text"class="departmentNameInputClass"name="departmentName"id="departmentNameInputId"data-toggle="tooltip"title="所属先名を入力してください"required/></div></div><!--メールアドレス--><divclass="emailAddressArea"><divclass="emailAddressLabelTitle">メールアドレス<br/>E-mail Address
            </div><divclass="emailAddressInputTitle"><inputtype="text"class="emailAddressInputClass"name="emailAddress"id="emailAddressInputId"data-toggle="tooltip"title="メールアドレスを入力してください"required/></div></div><!--郵便番号--><divclass="addressArea"><divclass="addressLabelTitle">郵便番号<br/>Post Address
            </div><divclass="addressInputTitle"><inputtype="text"class="addressInputClass"name="address"id="addressInputId"data-toggle="tooltip"title="郵便番号を入力してください"required/></div><divclass="addressBtnArea"><buttonclass="btn btn-primary"id="addressBtnId">自動検索</button></div></div><!--都道府県名--><divclass="prefectureArea"><divclass="prefectureLabelTitle">都道府県名<br/>Prefecture
            </div><divclass="prefectureInputTitle"><inputtype="text"class="prefectureInputClass"name="prefecture"id="prefectureInputId"/></div></div><!--市区町村名--><divclass="cityNameArea"><divclass="cityNameLabelTitle">市区町村名<br/>City Name
            </div><divclass="cityNameInputTitle"><inputtype="text"class="cityNameInputClass"name="cityName"id="cityNameInputId"/></div></div><!--町名・番地名--><divclass="chomeBanchiNameArea"><divclass="chomeBanchiNameLabelTitle">町名・番地名<br/>Chome Banchi Name
            </div><divclass="chomeBanchiNameInputTitle"><inputtype="text"class="chomeBanchiNameInputClass"name="chomeBanchiName"id="chomeBanchiNameInputId"/></div></div><!--電話番号--><divclass="phoneArea"><divclass="phoneLabelTitle">電話番号<br/>Phone
            </div><divclass="phoneInputTitle"><inputtype="text"class="phoneInputClass"name="phone"id="phoneInputId"data-toggle="tooltip"title="電話番号を入力してください"required/></div></div><!--FAX--><divclass="faxArea"><divclass="faxLabelTitle">
                Fax番号<br/>Fax
            </div><divclass="faxInputTitle"><inputtype="text"class="faxInputClass"name="fax"id="faxInputId"/></div></div><!--パスワード--><divclass="passwordArea"><divclass="passwordLabelTitle">パスワード<br/>Password
            </div><divclass="passwordInputTitle"><inputtype="text"class="passwordOneceInputClass"name="password"id="passwordOneceInputId"data-toggle="tooltip"title="パスワードを入力してください"required/></div></div><!--メルマガ購読--><divclass="mailMagagineArea"><divclass="mailMagagineLabelTitle">メルマガ購読する<br/>Mail Magagine Subscribe
            </div><divclass="mailMagagineInputTitle"><inputtype="text"class="mailMagagineInputClass"name="mailMagagine"id="mailMagagineInputId"/>購読する
            </div></div><divclass="backToPrePage"><buttonclass="btn btn-dark backToPrePageClass"id="backToPrePageId">前画面に戻る</button></div><divclass="tourokuToDb"><buttontype="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>
TorokuForm1.js
$(document).ready(function(){//確認画面から戻ってきたときの処理varlocalData=localStorage.getItem('form_data');//ローカルストレージから値を取得する。localData=JSON.parse(localData);//ローカルストレージから取得した値をオブジェクトデータに戻す。if(localData!==null){for(varindexinlocalData){vardata=localData[index];varformName=data['name'];varformVal=data['value'];//もう一度値をセットする。$('[name='+formName+']').val(formVal);}}//内容確認ボタンが押下された時の処理$("#contentsCheckBtnId").click(function(){varnameSei=$("#nameSeiInputId").val();//名前(姓)varnameMei=$("#nameMeiInputId").val();//名前(名)varhankakuHuriganaSei=$("#hankakuHuriganaSeiInputId").val();//半角フリガナ(姓)varhankakuHuriganaMei=$("#hankakuHuriganaMeiInputId").val();//半角フリガナ(姓)varsex=$("input[name='sex']:checked").val();//性別 var sex = $("input[name='sex']:checked").parent().text();varcomnanySchoolName=$("#comnanySchoolNameInputId").val();//会社名または学校名vardepartmentName=$("#departmentNameInputId").val();//所属先varemailAddress=$("#emailAddressInputId").val();//E-mailvaraddress=$("#addressInputId").val();//郵便番号varprefecture=$("#prefectureInputId").val();//都道府県名varcityName=$("#cityNameInputId").val();//市区町村名varchomeBanchiName=$("#chomeBanchiNameInputId").val();//町名・番地名varphone=$("#phoneInputId").val();//電話番号varfax=$("#faxInputId").val();//Fax番号varpasswordTwice=$("#passwordTwiceInputId").val();//パスワードvarmailMagagine="";//メルマガの購読希望の判定if($("#mailMagagineInputId").prop("checked")===true){mailMagagine="購読希望する";}else{mailMagagine="購読希望しない";}varsendData={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データで一括取得するコードvarform=$(".tourokuForm");// 値を保存しておきたいフォームvarformData=form.serializeArray();//serializeArray()でフォームの内容をオブジェクト化//var formJson = JSON.stringify(formData); //JSON.stringifyメソッドでそのデータをJSON化させるvarformJson=JSON.stringify(sendData);//JSON.stringifyメソッドでそのデータをJSON化させるlocalStorage.setItem('form_data',formJson);//Jsonデータをローカルストレージに保存する。location.href="TorokuFormConfirm1.html";//TorokuFormConfirm1.htmlへ遷移する。});});
TorokuFormConfirm1.js
//import { parseJSON } from "jquery";$(document).ready(function(){varlocalData=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("お客様が入力したパスワード");//パスワードvarinputPassWord=localData.passwordTwiceData;//パスワードは確認画面で表示せず、変数inputPassWordに格納する。$("#mailMagagineInputId").val(localData.mailMagagineData);//メルマガ購読確認//一連の処理が終わったタイミングなどで、ローカルストレージの情報を削除する。localStorage.removeItem('form_data');}//前画面に戻る時の処理$("#backToPrePageId").click(function(){//前画面に戻るボタンを押下したときの処理backToPrePageSetLocalStorage();});//DBに登録するときの処理$("#tourokuToDbId").click(function(){torokuToDb();});});//前画面に戻るボタンを押下したときの処理functionbackToPrePageSetLocalStorage(){//フォームの内容をJSONデータで一括取得するコードvarform=$(".tourokuForm");varformData=form.serializeArray();//serializeArray()でフォームの内容をオブジェクト化varformJson=JSON.stringify(formData);//JSON.stringifyメソッドでそのデータをJSON化させるlocalStorage.setItem('form_data',formJson);//ローカルストレージに保存する。location.href="TorokuForm.html";}//DBに登録する処理functiontorokuToDb(){//フォームの内容をJSONデータで一括取得する。varform=$(".tourokuForm");//配列オブジェクトobjectを宣言する。varobject={};// フォームの内容を取得// serializeArrayの戻り値は[{key: 'キーの名前', value: '値'}]という形式になっている$(form.serializeArray()).each(function(i,v){object[v.name]=v.value;});varjsonData=JSON.stringify(object);console.log(jsonData);//POST通信を実行する。$.ajax({url:"../api/TorokuForm1/postTorokuData1",type:"POST",data:jsonData,contentType:"application/json; charset=utf-8",success:function(data){alert("OK通信");},error:function(xhr){alert(xhr.status);}});}
TorokuForm1Controller.cs
usingMicrosoft.AspNetCore.Mvc;usingMicrosoft.Extensions.Options;usingWebApplication8.Dto;usingWebApplication8.Setting;namespaceWebApplication8.Controllers{[Route("api/[controller]")][ApiController]publicclassTorokuForm1Controller:ControllerBase{/// <summary>/// 設定記述オブジェクト/// </summary>privatereadonlyIOptions<DBSetting>options=null;/// <summary>/// インスタンス生成時に設定記述オブジェクトの取り込みを行う。/// </summary>publicTorokuForm1Controller(IOptions<DBSetting>options){//設定記述子this.options=options;}/// <summary>/// HTMLフォームからのリクエストパラメータとエンティティクラスのプロパティとを/// モデルバインドして引数にTorokuForm1Entity型の変数jsonDataを渡す。/// </summary>/// <param name="jsonData"></param>/// <returns></returns>[HttpPost("postTorokuData1")]publicvoidpostTorokuData1([FromBody]TorokuForm1EntityjsonData){//データベース接続処理等を記述する。}}}
TorokuForm1Entity.cs
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Threading.Tasks;namespaceWebApplication8.Dto{publicclassTorokuForm1Entity{//【ポイント】HTMLのFormタグのID名とEntityのプロパティ名を揃えること。publicstringnameSei{get;set;}publicstringnameMei{get;set;}publicstringhankakuHuriganaSei{get;set;}publicstringhankakuHuriganaMei{get;set;}publicstringsex{get;set;}publicstringcomnanySchoolName{get;set;}publicstringdepartmentName{get;set;}publicstringemailAddress{get;set;}publicstringaddress{get;set;}publicstringprefecture{get;set;}publicstringcityName{get;set;}publicstringchomeBanchiName{get;set;}publicstringphone{get;set;}publicstringfax{get;set;}publicstringpasswordTwice{get;set;}publicstringmailMagagine{get;set;}}}

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


Viewing all articles
Browse latest Browse all 9366

Latest Images

Trending Articles