入力チェックが行われない

前提・実現したいこと

入力された内容に対して入力チェックを行った後にDB問合せを行いたいが自分のコードだと入力チェックを行わずそのままコントローラのコードに移動してしまいます。
ソースコードは現在学習として作成している画面でDB問合せを行い商品を登録・削除・更新を行うといったものです。下記コードは新規登録に関してのコードです。お聞きしたいことは
・JavaScriptの入力チェックを呼び出した後にcontrollerのコードに移動できるのか、またそれを行うにはどういった手段があるのか
・上記手段がダメとするならどのような手段があるのか
です。宜しくお願い致します。

該当のソースコード

csHTML
1@model ProductManage.Models.Insert
2
3@{
4    Layout = null;
5}
6
7<!DOCTYPE html>
8
9<html>
10<head>
11    <meta name="viewport" content="width=device-width" />
12    <title>商品情報登録</title>
13    <link href="@Url.Content("~/Content/add.css")" rel="stylesheet" type="text/css" />
14</head>
15<body>
16    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
17    <script src="@Url.Content("~/Scripts/add.js")" type="text/javascript"></script>
18    @using (Html.BeginForm("add", "Home", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
19    {
20        <table>
21            <tr>
22                <td><span>商品名</span></td>
23                <td><input type="text" size="20" autocomplete="off" name="productName"></td>
24            </tr>
25            <tr>
26                <td><span>種類</span></td>
27                <td>
28                    <select name="option">
29                        <option value="0"></option>
30                        <option value="1">本体</option>
31                        <option value="2">オプション</option>
32                        <option value="3">その他</option>
33                    </select>
34                </td>
35            </tr>
36            <tr>
37                <td><span>価格</span></td>
38                <td><input type="text" size="10" autocomplete="off" name="price"></td>
39            </tr>
40            <tr>
41                <td></td>
42                <td>
43                    <input type="submit" value="新規登録" onclick="return check();" class="submit">
44                </td>
45            </tr>
46        </table>
47    }
48</body>
49</html>
50

JavaScript
1const errorTitle = "入力チェックエラー";
2const Null = "全項目入力必須です";
3const productNameCheck = "商品名は16文字以下です";
4
5function check() {
6    var productName = addCheckForm.productName.value;
7    var option = addCheckForm.option.value;
8    var price = addCheckForm.price.value;
9
10    if (productName == "" || option == 0 || productPrice == ""){
11        swal(errorTitle,Null);
12        return false;
13    }
14
15    if (productName.length > 16){
16        swal(errorTitle,productNameCheck);
17        return false;
18    }
19
20    return true;
21}

C#(MVCのcontroller)
1using ProductManage.Models;
2using System.Web.Mvc;
3
4namespace ProductManage.Controllers
5{
6    public class HomeController : Controller
7    {
8        [HttpGet]
9        public ActionResult login()
10        {
11            return View();
12        }
13
14        [HttpGet]
15        public ActionResult list()
16        {
17            return View();
18        }
19
20        [HttpPost]
21        public ActionResult list(ListDisplay model)
22        {
23            DBaccess result = new DBaccess();
24            var ResultList = result.Serch(model);
25            return View(ResultList);
26        }
27
28        [HttpGet]
29        public ActionResult add()
30        {
31            return View();
32        }
33
34        [HttpPost]
35        public ActionResult add(Insert model)
36        {
37            DBaccess result = new DBaccess();
38            var ResultList = result.Insert(model);
39            return View();
40        }
41    }
42}
43

試したこと

@using(html.beginform)ではなくhtmlのformで対処する
↓
入力チェックは行われたがcontroller側が反応しなかった恐らく
[HttpGet]
public ActionResult add()
{
return View();
}
の方に行ってしまっていると考えています。
根拠としては足りないですがブレイクポイントを上記コードの下の本来行くはずの所につけて反応しなかったからです。

上記以外で出来そうな手段を考えて検索しましたが該当するものが見つかりませんでした。
考えた手段として
・controller側でjavascriptの関数を呼び出せるのではないか
・Ajax通信等の手段を使って行えないか

補足情報（FW/ツールのバージョンなど）

vmware14 windows10
asp.net WebApplication　mvc
VisualStudio2015

解決方法　modelにDataAnnotationsを追加する

C#
1using System;
2using System.Collections.Generic;
3using System.ComponentModel.DataAnnotations;
4using System.ComponentModel;
5
6namespace ProductManage.Models
7{
8    public class Insert
9    {
10        [Required(ErrorMessage = "商品名は必須入力です")]
11        [StringLength(16, ErrorMessage = "16文字以内で入力してください")]
12        public string productName { get; set; }
13
14        [Range(1, 3, ErrorMessage = "オプションは入力必須です")]
15        public int option { get; set; }
16
17        [RegularExpression(@"[0-9]+", ErrorMessage = "半角数字のみ入力できます")]
18        public int price { get; set; }
19    }
20}

対象のcontrollerで下記を追加

C#
1if (ModelState.IsValid)
2{
3//ここに正常時のコードを記載
4}

HTMLで

HTML
1 @Html.ValidationMessageFor(model => model.productName)

を追加して無事表示されるようになりました。

退会済みユーザー

2020/09/18 05:50

Visual Studio 2015 のテンプレートを使って作成した .NET Framework ベース版の（Core 版ではない）ASP.NET MVC5 アプリの話と理解してますが、間違いないですか？ユーザー入力の検証はモデルのプロパティにデータアノテーション属性を付与して行うのが普通ですが、質問のコードにはそれが見当たりません。使わない理由があるのでしょうか？

syugaaburesu

2020/09/18 06:05

コメントありがとうございます。テンプレートはEmptyでMVCにチェックを入れて使用しております。ASP.NET　MVC５です。＞ユーザー入力の検証はモデルのプロパティにデータアノテーション属性を付与して行うのが普通ですが、質問のコードにはそれが見当たりません。使わない理由があるのでしょうか？完全に把握しておりませんでした...ご指摘ありがとうございます。こちら適用すればJavaScript使用しなくても今回の問題は解決しますでしょうか？

退会済みユーザー

2020/09/18 06:14

> こちら適用すればJavaScript使用しなくても今回の問題は解決しますでしょうか？必須入力と文字数制限を行いたいようですが、それだけあればプログラマが JavaScript のコードを書かなくてもクライアント側で検証がかかるようになります。

syugaaburesu

2020/09/18 06:17

なるほど、ありがとうございます。データアノテーション属性を付与で解決できそうなので少し作業してみます。

退会済みユーザー

2020/09/18 06:18

回答欄に参考になりそうな記事を紹介しておきます。

行動規範の内容に同意します

回答1件

ベストアンサー

ASP.NET MVC Web アプリケーションでユーザー入力の検証を行う場合、MVC2 以降ではデータアノテーション検証を標準で使用することができます。

使い方は以下の記事が参考になると思います。

第3回　モデル・バインドとアノテーション検証の実装
https://www.atmarkit.co.jp/fdotnet/aspnetmvc3/aspnetmvc3_04/aspnetmvc3_04_02.html

質問者さんのコードを見ると検証したいのは、一つのユーザー入力に対して以下の 2 項目のようですが、であれば上の記事に書いてある Required, StringLength 属性を付与すれば OK です。

const Null = "全項目入力必須です";
const productNameCheck = "商品名は16文字以下です";

上の紹介した記事は MVC3 とちょっと古いのですが基本はほぼ同じです。ただし、クライアント側の検証用のスクリプトを取り込む方法が VS2015 のテンプレートで MVC5 アプリを作った場合とは違っているので注意してください。

分からなければコメント欄で質問してください。

なお、もし、DB ファーストで既存のデータベースから Visual Studio の ADO.NET Entity Data Model ウィザードを使って EDM を作った場合、生成されたモデルに検証のためのデータアノテーション属性を付与するのは NG です。

その場合は以下の記事のようにすることをお勧めします。

EDM にデータアノテーション属性を付与
http://surferonwww.info/BlogEngine/post/2017/05/21/how-to-add-dataannotation-attributes-to-edm-generated-by-visual-studio.aspx

【追記】

検証用のスクリプトを取り込まないといけないのですね、お手数おかけしてしまうのですがどういったことをすればよろしいのでしょうか。

質問者さんの使ったテンプレートは「EmptyでMVCにチェック」ということで、その結果がどうなるかやったことがないのでわかりませんが、App_Start フォルダに BundleConfig.cs というファイルはありますか？　また、Scriptｓフォルダに jquery-x.xx.x.js, jquery.unobtrusive-ajax.js, jquery.validate.js という JavaScript ファイルはありますか？

もし無ければ、それらが含まれるようなテンプレートを使ってプロジェクトを作り直してください。

BundleConfig.cs は以下のようになっているはずです。"~~/bundles/jquery" と "~~/bundles/jqueryval" の 2 つをその順番で View に取り込む必要があります。

_Layout.cshtml を使っていれば以下の通り "~/bundles/jquery" は取り込まれます。

"~~/bundles/jqueryval" の方は View で以下のようにして取り込みます。（画像の "~~/bundles/inarry" の方は関係なのので気にしないでください）

結果、html ソースは以下のようになり必要な検証用のスクリプトは取り込まれています。

投稿2020/09/18 06:28

編集2020/09/18 08:07

退会済みユーザー

総合スコア0

syugaaburesu

2020/09/18 07:02

ありがとうございます。無事完了致しました。

退会済みユーザー

2020/09/18 07:18

検証用のスクリプトが取り込まれているでしょうか？　それがないとクライアント側での検証はかかりません。もしそうだとすると、「無事表示されるようになりました」というのは、サーバー側の検証結果ではないかと思われます。コントローラーの if (ModelState.IsValid) にブレークポイントを設定してみてください。クライアント側の検証が有効になっていれば、クライアント側の検証で NG になるとそこには制御は飛んでこないのでわかります。

syugaaburesu

2020/09/18 07:27

ブレークポイントで止まってしまいました。エラーメッセージもproductName しか正しく表示されずそれ以外は「option フィールドが必要です。price フィールドが必要です。」が出てきてしまいます。検証用のスクリプトを取り込まないといけないのですね、お手数おかけしてしまうのですがどういったことをすればよろしいのでしょうか。

退会済みユーザー

2020/09/18 07:42

> エラーメッセージもproductName しか正しく表示されずそれ以外は「option フィールドが必要です。price フィールドが必要です。」が出てきてしまいます。 int 型の場合にデフォルトで設定される未入力の検証に引っかかってます。Required 属性を付与して質問者さんが表示したいエラーメッセージをそれに設定してください。詳しくは以下の記事を見てください。 int 型プロパティの検証、エラーメッセージ http://surferonwww.info/BlogEngine/post/2019/03/24/validation-and-error-message-of-int-type-property.aspx > 検証用のスクリプトを取り込まないといけないのですね、お手数おかけしてしまうのですがどういったことをすればよろしいのでしょうか。回答欄に追記します。

syugaaburesu

2020/09/18 08:12

追記ありがとうございます。全体的に確認した感じこちらで対応できると思うので作業してみます。問題があり次第報告致します。

行動規範の内容に同意します