- 開発技術
ASP.NET Core MVC – HTMLフォームデータを送信する
- VB.NET
ASP.NET Core MVCでHTMLフォームデータを送信する方法には複合型と単純型の二つがあります。ここではごくごく簡単なサンプルコードを用いて動きを確認していきます。
Controller
【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc. 詳細はこちらから＞
サブミットされたHTMLフォームデータを受け取るControllerを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
namespace WebApplication1.Controllers { public class Update { public string Status { get; set; } public DateTime Date { get; set; } } public class JsonController : Controller { [HttpGet] public IActionResult Index() { return View(); } [HttpPost] public IActionResult Complex(Update update) { return Ok(); } [HttpPost] public IActionResult Simple(string value) { return Ok(); } [HttpPost] public IActionResult SimpleArray(string[] value) { return Ok(); } } } |
複合型－HTMLフォームでサブミットする
サブミットするHTMLフォームを記述したViewを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form id="form" asp-controller="Json" asp-action="Complex" method="post" enctype="application/x-www-form-urlencoded"> <div> <label for="status">状態</label> </div> <div> <input name="status" type="text" /> </div> <div> <label for="date">日付</label> </div> <div> <input name="date" type="text" /> </div> <div> <input type="submit" value="送信" /> </div> </form> |
「送信」ボタンを押すと<form>に定義したasp-controllerとasp-actionにもとづいてHTMLフォームのデータがサーバーにサブミットされます。この例ではasp-controllerにJson、asp-actionにComplexがそれぞれ定義されているので、HTMLフォームのデータは/Json/ComplexにPOSTします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
namespace WebApplication1.Controllers { public class Update { public string Status { get; set; } public DateTime Date { get; set; } } public class JsonController : Controller { [HttpPost] public IActionResult Complex(Update update) { return Ok(); } } } |
JsonControllerのComplexメソッドは引数にUpdateクラスが定義されています。HTMLフォームでサブミットされたデータは自動的にUpdateクラスにバインドされます。
複合型－Ajaxでフォームを送信する
HTMLフォームではなくAjaxでフォームデータをサブミットするにはどのようにすればいいでしょうか。ここではポピュラーであるjQueryを使って試していきます。
まずは<form>の属性を次のように修正します。
|
1 2 3 |
<form id="form"> ～ 省略 ～ </form> |
次にサブミットが行われたときの処理をJavaScriptで記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $("#form").submit(function () { $.ajax({ type: 'POST', url: '@Url.Action("Complex", "Json")', data: $('#form').serialize(), }).done(function (msg) { ; }); }); </script> |
Url.Actionメソッドでフォームのデータを送るURLを生成しています。この例では、シリアライズしたフォームデータを/Json/ComplexにPOSTしています。
JsonControllerのComplexメソッドは引数でUpdateクラスが定義されていることを思い出してください。<form>でサブミットしたときとおなじように、Ajaxでフォームデータを送信してもUpdateクラスにバインドされます。
単純型
フォームのデータをクラスにバインドさせずに文字列や配列として処理したいこともあるのではないでしょうか。このようなときは、名前（Key）と値（Value）のうち名前を空文字列にしてPOSTします。
次のフォームを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<form id="form"> <div> <label for="status">状態</label> </div> <div> <input id="status" type="text" /> </div> <div> <input type="submit" value="送信" /> </div> </form> |
次にサブミットが行われたときの処理をJavaScriptで記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $('#form').submit(function () { $.ajax({ type: 'POST', url: '@Url.Action("Simple", "Json")', data: { "": $('#status').val() }, }).done(function (msg) { ; }); }); </script> |
dataが$(‘#form’).serialize()から{ “”: $(‘#status’).val() }に変わっていることに気がついたでしょうか。Controllerでクラスにバインドさせずに文字列として処理を行いたい場合は名前（Key）を空文字列にします。
JavaScriptを実行すると、JsonControllerのSimpleに定義されているvalue変数にフォームで入力した状態（id=“status”）が代入されていることがわかります。
|
1 2 3 4 5 |
[HttpPost] public IActionResult Simple(string value) { return Ok(); } |
文字列ではなく配列を扱いたいときも名前（Key）を空文字列にします。次の例では一次元配列にAとBとCの文字を格納しています。
|
1 2 3 4 5 6 7 8 9 |
<script> $.ajax({ type: 'POST', url: '@Url.Action("SimpleArray", "Json")', data: { "": ["A", "B", "C"] }, }).done(function (msg) { ; }); </script> |
JavaScriptを実行すると、JsonControllerのSimpleArrayに定義されているvalues配列にAとBとCの文字がそれぞれ格納されいてることがわかります。
|
1 2 3 4 5 |
[HttpPost] public IActionResult SimpleArray(string[] values) { return Ok(); } |
【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc. 詳細はこちらから＞
