【実行環境】
PC：Windows10
開発環境：Visual Studio2019 Community
C#フレームワーク：ASP.Net Core (version 2.1)
第1回目に続き第2回目の記事を公開します。
なぜ同じような記事を投稿するのか？という疑問があると思いますが、回答としてはGetまたはPost通信する方法(AjaxやXMLhttpRequest、fetch APIとか)は複数あるため、それらに対応したコードが書ければある程度の対応力が身に付くと考えたからです。
今回のASP.Net Coreを使ってHTMLフォームからサーバへリクエストパラメータを送信する方法はなかなか見当たりませんでした。
なので私自身の備忘録として読者のみなさんのすこしでも助けになれれば...とおもいシリーズ化しています(^^)
さてさて本題に戻ります。
ASP.Net Core(version 2.1)でのHTMLフォーム画面から登録内容を入力してPost通信してサーバ側に送る、という一連のサンプルコードがなかなか見当たらないので作ってみました。
今回ははHTMLの「form」タグを使ってPost通信する方法を考えてみました。
入力画面と確認画面は以下の通り。
【★入力画面★】
【★確認画面★】
プロジェクトのディレクトリ構造は以下の通り。
【ディレクトリ構造】
Project
├ wwwroot
│ ├ js
│ │ ├ TorokuForm.js
│ │ └ TorokuFormConfirm.js
│ ├ lib
│ │ ├ bootstrap
│ │ │ ├ js
│ │ │ │ └ bootstrap.min.js
│ │ │ └ css
│ │ │ └ bootstrap.min.css
│ │ ├ jquery
│ │ │ └ jquery.min.js
│ │ └
│ └ pages
│ ├ TorokuForm.html
│ └ TorokuFormConfirm.html
├ Controllers
│ └ TorokuFormController.cs
└ Dto
└ TorokuFormEntity.cs
TorokuForm.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/TorokuForm.js"></script></head><body><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>TorokuFormConfirm.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/TorokuFormConfirm.js"></script></head><body><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></body></html>TorokuForm.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");// 値を保存しておきたいフォーム//var formData = 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="TorokuFormConfirm.html";//TorokuFormConfirm.htmlへ遷移する。});});TorokuFormConfirm.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";}functionData(){this.name='';}//DBに登録する処理functiontorokuToDb(){// 新規送信用オブジェクトformDataのインスタンスを生成する。varformData=newFormData();//formタグのパラメーターをそれぞれの変数に格納する。varnameSei=$("#nameSeiInputId").val();//名前(姓)varnameMei=$("#nameMeiInputId").val();//名前(名)varhankakuHuriganaSei=$("#hankakuHuriganaSeiInputId").val();//半角ﾌﾘｶﾞﾅ(姓)varhankakuHuriganaMei=$("#hankakuHuriganaMeiInputId").val();//半角ﾌﾘｶﾞﾅ(姓)varsex=$("#sexId").val();//性別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=$("#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);//POST通信を実行する。$.ajax({url:"../api/TorokuForm/",type:"POST",data:formData,processData:false,// 【★重要ポイント★】jQuery がデータを処理しないよう指定contentType:false,// 【★重要ポイント★】jQuery が contentType を設定しないよう指定cache:false,success:function(data){alert("OK通信");},error:function(xhr){alert(xhr.status);}});}TorokuFormController.cs
usingMicrosoft.AspNetCore.Mvc;usingMicrosoft.Extensions.Options;usingWebApplication5.Dto;usingWebApplication5.Setting;namespaceWebApplication5.Controllers{[Route("/api/TorokuForm")][ApiController]publicclassTorokuFormController:ControllerBase{/// <summary>/// 設定記述オブジェクト/// </summary>privatereadonlyIOptions<DBSetting>options=null;/// <summary>/// インスタンス生成時に設定記述オブジェクトの取り込みを行う。/// </summary>publicTorokuFormController(IOptions<DBSetting>options){//設定記述子this.options=options;}/// <summary>/// クライアント側のformDataからPOST送信されてきたリクエストパラメーターをエンティティクラス/// (コンプレックス型のプロパティ群)とモデンルバインドする。/// </summary>/// <param name="formData"></param>[HttpPost]publicvoidPost([FromForm]TorokuFormEntityformData)//成功：[FromForm] TorokuFormEntity formData{//DB登録等の処理を記述する。}}}TorokuFormEntity.cs
usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Threading.Tasks;namespaceWebApplication5.Dto{publicclassTorokuFormEntity{publicstringnameSeiData{get;set;}publicstringnameMeiData{get;set;}publicstringhankakuHuriganaSeiData{get;set;}publicstringhankakuHuriganaMeiData{get;set;}publicstringsexData{get;set;}publicstringcomnanySchoolNameData{get;set;}publicstringdepartmentNameData{get;set;}publicstringemailAddressData{get;set;}publicstringaddressData{get;set;}publicstringprefectureData{get;set;}publicstringcityNameData{get;set;}publicstringchomeBanchiNameData{get;set;}publicstringphoneData{get;set;}publicstringfaxData{get;set;}publicstringpasswordTwiceData{get;set;}publicstringmailMagagineData{get;set;}}}確認画面の「登録する」ボタンをクリックすると...
無事サーバー側のアクションメソッドにリクエストパラメータを渡すことが出来ました。