jquery - MVC 4を使用したリモートjQuery検証では、locで始まるすべての入力を動的に検証しますか？

Question

説明：

loc1-5という名前の5つのテキストボックスと送信ボタンを持つMVC4アプリケーションの単純なフォームがあります。アプリケーションは、テキストボックスloc1-5で最大5つの住所を取得し、jQueryでBingジオコードサービスを使用して、住所に対していくつかの処理を実行し、道順を含む地図を作成します。

問題は、続行する前にloc1-5テキストボックスを検証して有効なアドレスであることを確認する必要があることです。理にかなっている最善の方法は、jQuery.validateを使用してMVCコントローラー関数をリモート呼び出しすることです。有効なアドレスをチェックするためのビルド済み関数。

今、私はこれらのフィールドを検証するための実用的なソリューションを思いつきましたが、将来、最小限の労力でより多くのテキストボックスを追加できるように、それをより動的にする必要があります。理想的には、「loc」で始まるすべての入力で検証のようなロジックを機能させたいと思います。

実用的な解決策（非常に汚れている）：

単純なフォーム（MVCビュー）

<form action="/Home/ViewResult" method="post" id="ViewResult" name="ViewResult">
<fieldset>
<legend>Enter Route</legend>
<p>
Address 1 (Start & End):
</p>
<p>
<input type="text" id="loc1" name="loc1" value='' />
</p>
<p>
Address 2:
</p>
<p>
<input type="text" id="loc2" name="loc2" value='' />
</p>
<p>
Address 3:
</p>
<p>
<input type="text" id="loc3" name="loc3" value='' />
</p>
<p>
Address 4:
</p>
<p>
<input type="text" id="loc4" name="loc4" value='' />
</p>
<p>
Address 5:
</p>
<p>
<input type="text" id="loc5" name="loc5" value='' />
</p>
<p>
<input type="submit" value="Route"/>
</p>
</fieldset>
</form>

jQuery検証コード（MVCビュー）

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $（document）.ready（function（）{
        $（ "＃ViewResult"）。validate（{
            onfocusout：false、
            onkeyup：false、
            ルール：{
                "loc1"：{
                    必須：true、
                    リモート：{
                        url： "/ Home / IsValidAddress1"、
                        タイムアウト：2000、
                        タイプ：「投稿」
                    }
                }、
                "loc2"：{
                    必須：true、
                    リモート：{
                        url： "/ Home / IsValidAddress2"、
                        タイムアウト：2000、
                        タイプ：「投稿」
                    }
                }、
                "loc3"：{
                    必須：true、
                    リモート：{
                        url： "/ Home / IsValidAddress3"、
                        タイムアウト：2000、
                        タイプ：「投稿」
                    }
                }、
                "loc4"：{
                    リモート：{
                        url： "/ Home / IsValidAddress4"、
                        タイムアウト：2000、
                        タイプ：「投稿」
                    }
                }、
                "loc5"：{
                    リモート：{
                        url： "/ Home / IsValidAddress5"、
                        タイムアウト：2000、
                        タイプ：「投稿」
                    }
                }
            }、
            メッセージ：{
                "loc1"：{
                    必須：「開始/終了場所は必須フィールドです。」、
                    リモート：「有効なアドレスを入力してください。」
                }、
                "loc2"：{
                    必須：「少なくとも3つのアドレスを入力してください。」、
                    リモート：「有効なアドレスを入力してください。」
                }、
                "loc3"：{
                    必須：「少なくとも3つのアドレスを入力してください。」、
                    リモート：「有効なアドレスを入力してください。」
                }、
                "loc4"：{
                    リモート：「有効なアドレスを入力してください。」
                }、
                "loc5"：{
                    リモート：「有効なアドレスを入力してください。」
                }、
            }

        }）;
    }）;

</script>

リモートから参照されるホームコントローラの機能

    //有効なアドレスをチェックする関数
    public Boolean IsValidAddress（string location）
    {{
        //空白でない場合
        if（location！= ""）
        {{
            //ウェイポイントを取得しようとします
            ウェイポイントウェイポイント=getWaypoint（location）;

            //ウェイポイントが返されない場合は、falseを返します
            if（waypoint == null）
            {{
                falseを返します。
            }
        }

        trueを返します。
    }

    public JsonResult isValidAddress1（string loc1）//パラメータはテキストボックス名である必要があります
    {{
        if（！IsValidAddress（loc1））
        {{
            新しいJsonResultを返す{データ=false};
        }
        新しいJsonResultを返す{データ=true};
    }

    public JsonResult isValidAddress2（string loc2）//パラメータはテキストボックス名である必要があります
    {{
        if（！IsValidAddress（loc2））
        {{
            新しいJsonResultを返す{データ=false};
        }
        新しいJsonResultを返す{データ=true};
    }

    public JsonResult isValidAddress3（string loc3）//パラメータはテキストボックス名である必要があります
    {{
        if（！IsValidAddress（loc3））
        {{
            新しいJsonResultを返す{データ=false};
        }
        新しいJsonResultを返す{データ=true};
    }

    public JsonResult isValidAddress4（string loc4）//パラメータはテキストボックス名である必要があります
    {{
        if（！IsValidAddress（loc4））
        {{
            新しいJsonResultを返す{データ=false};
        }
        新しいJsonResultを返す{データ=true};
    }

    public JsonResult isValidAddress5（string loc5）//パラメータはテキストボックス名である必要があります
    {{
        if（！IsValidAddress（loc5））
        {{
            新しいJsonResultを返す{データ=false};
        }
        新しいJsonResultを返す{データ=true};
    }

問題：

繰り返しますが、これは機能しますが、非常に汚れており、まったく動的ではありません。

基本的に私には2つの問題があります。

「loc」で始まるすべてのテキストボックスの検証ルールを作成するためのjQueryの省略形を作成するにはどうすればよいですか？
私が知る限り、リモート呼び出しを処理するMVCコントローラー関数には、テキストボックスの名前が渡されている必要があります。では、1つのMVCコントローラー関数で複数のリモート呼び出しを処理するにはどうすればよいですか？

私はjQueryにあまり強くありませんが、本当に欲しいのは次のようなものなので、最小限の労力で後でテキストボックスを追加できます。

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $（document）.ready（function（）{
        $（ "＃ViewResult"）。validate（{
            onfocusout：false、
            onkeyup：false、
            ルール：{
                "loc1"：{
                    必須：true、
                }、
                "loc2"：{
                    必須：true、
                }、
                "loc3"：{
                    必須：true、
                }、
                $（ "input = text"）。StartsWith（ "loc"）。each（）：{
                    リモート：{
                        url： "/ Home / IsValidAddress"、
                        タイムアウト：2000、
                        タイプ：「投稿」
                    }
                }
            }、
            メッセージ：{
                "loc1"：{
                    必須：「開始/終了場所は必須フィールドです。」、
                }、
                "loc2"：{
                    必須：「少なくとも3つのアドレスを入力してください。」、
                }、
                "loc3"：{
                    必須：「少なくとも3つのアドレスを入力してください。」、
                }、
                $（ "input = text"）。StartsWith（ "loc"）。each（）：{
                    リモート：「有効なアドレスを入力してください。」
                }、
            }

        }）;
    }）;

</script>

そしてホームコントローラーは機能します

    //有効なアドレスをチェックする関数
    public JsonResult IsValidAddress（string loc）// loc変数は動的テキストボックス名に接続しますか？
    {{
        //空白でない場合
        if（loc！= ""）
        {{
            //ウェイポイントを取得しようとします
            ウェイポイントウェイポイント=getWaypoint（loc）;

            //ウェイポイントが返されない場合は、falseを返します
            if（waypoint == null）
            {{
                新しいJsonResultを返す{データ=false};
            }
        }

        新しいJsonResultを返す{データ=true};
    }

最後に、MVCモデルを変更する機能がないことに注意してください。検証ルールとリモート呼び出しをMVCモデルに直接書き込む、これに似た多くのソリューションを見てきましたが、そのようにすることはできません。

改善のための提案は大歓迎です。ご回答いただきありがとうございます。

どこが間違っていたのか、あるいは私が望むことが可能かどうかを教えてください。

score 3 · Accepted Answer

だから私はそれを理解しました。

最終的な解決策：

MVCホームコントローラーの機能：

    //有効なアドレスをチェックする関数
    //注：アドレス変数パラメーターは、リモート呼び出しでデータ属性に接続します
    public JsonResult IsValidAddress（string address）
    {{
        //空白でない場合
        if（address！= ""）
        {{
            //ウェイポイントを取得しようとします
            ウェイポイントウェイポイント=getWaypoint（address）;

            //ウェイポイントが返されない場合は、falseを返します
            if（waypoint.Location == null）
            {{
                新しいJsonResultを返す{データ=false};
            }
        }
        新しいJsonResultを返す{データ=true};
    }

ビューのjQuery関数：

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $（document）.ready（function（）{
        $（ "＃ViewResult"）。validate（{
            onfocusout：false、
            onkeyup：false
        }）;
        $（ "＃loc1"）。rules（ "add"、{
            必須：true、
            メッセージ：{
                必須：「開始/終了場所は必須フィールドです。」、
            }
        }）;
        $（ "＃loc2"）。rules（ "add"、{
            必須：true、
            メッセージ：{
                必須：「少なくとも3つのアドレスを入力してください。」
            }
        }）;
        $（ "＃loc3"）。rules（ "add"、{
            必須：true、
            メッセージ：{
                必須：「少なくとも3つのアドレスを入力してください。」
            }
        }）;
        $（'＃ViewResult [name ^ = "loc"]'）。each（function（）{
            var currentValue = null;
            currentValue = $（this）;
            $（this）.rules（ "add"、{
                リモート：{
                    url： "/ Home / IsValidAddress"、
                    タイムアウト：2000、
                    タイプ：「投稿」、
                    データ：{アドレス：関数（）{return currentValue.val（）; }}
                }、
                メッセージ：{
                    リモート：「有効なアドレスを入力してください。」
                }
            }）;
        }）;
    }）;

</script>

私はこれを理解しようと非常に時間がかかったので、共有したいと思いました。

score 1 · Accepted Answer

そのため、ルール宣言内のリモート呼び出しのデータ属性を使用して「address」という新しいパラメーターを定義し、MVCコントローラー関数でパラメーターとして参照することで、問題の2番目の部分を理解することができました。

HomeコントローラーのMVCコントローラー機能の更新されたコードは次のとおりです。

    //有効なアドレスをチェックする関数
    //注：アドレス変数パラメーターは、リモート呼び出しでデータ属性に接続します
    public JsonResult IsValidAddress（string address）
    {{
        //空白でない場合
        if（address！= ""）
        {{
            //ウェイポイントを取得しようとします
            ウェイポイントウェイポイント=getWaypoint（address）;

            //ウェイポイントが返されない場合は、falseを返します
            if（waypoint.Location == null）
            {{
                新しいJsonResultを返す{データ=false};
            }
        }
        新しいJsonResultを返す{データ=true};
    }

jQueryの場合、2つの方法があり、どちらも機能します。

まず、以前に使用した形式を使用します。

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $（document）.ready（function（）{
        $（ "＃ViewResult"）。validate（{
            onfocusout：false、
            onkeyup：false、
            ルール：{
                "loc1"：{
                    必須：true、
                    リモート：{
                        url： "/ Home / IsValidAddress"、
                        タイムアウト：2000、
                        タイプ：「投稿」、
                        データ：{アドレス：関数（）{return $（ "＃loc1"）。val（）; }}
                    }
                }、
                "loc2"：{
                    必須：true、
                    リモート：{
                        url： "/ Home / IsValidAddress"、
                        タイムアウト：2000、
                        タイプ：「投稿」、
                        データ：{アドレス：関数（）{return $（ "＃loc2"）。val（）; }}
                    }
                }、
                "loc3"：{
                    必須：true、
                    リモート：{
                        url： "/ Home / IsValidAddress"、
                        タイムアウト：2000、
                        タイプ：「投稿」、
                        データ：{アドレス：関数（）{return $（ "＃loc3"）。val（）; }}
                    }
                }、
                "loc4"：{
                    リモート：{
                        url： "/ Home / IsValidAddress"、
                        タイムアウト：2000、
                        タイプ：「投稿」、
                        データ：{アドレス：関数（）{return $（ "＃loc4"）。val（）; }}
                    }
                }、
                "loc5"：{
                    リモート：{
                        url： "/ Home / IsValidAddress"、
                        タイムアウト：2000、
                        タイプ：「投稿」、
                        データ：{アドレス：関数（）{return $（ "＃loc5"）。val（）; }}
                    }
                }
            }、
            メッセージ：{
                "loc1"：{
                    必須：「開始/終了場所は必須フィールドです。」、
                    リモート：「有効なアドレスを入力してください。」
                }、
                "loc2"：{
                    必須：「少なくとも3つのアドレスを入力してください。」、
                    リモート：「有効なアドレスを入力してください。」
                }、
                "loc3"：{
                    必須：「少なくとも3つのアドレスを入力してください。」、
                    リモート：「有効なアドレスを入力してください。」
                }、
                "loc4"：{
                    リモート：「有効なアドレスを入力してください。」
                }、
                "loc5"：{
                    リモート：「有効なアドレスを入力してください。」
                }
            }
        }）;
    }）;

</script>

または、.rules（ "add"）メソッドを使用します。

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $（document）.ready（function（）{
        $（ "＃ViewResult"）。validate（{
            onfocusout：false、
            onkeyup：false
        }）;
        $（ "＃loc1"）。rules（ "add"、{
            必須：true、
            リモート：{
                url： "/ Home / IsValidAddress"、
                タイムアウト：2000、
                タイプ：「投稿」、
                データ：{アドレス：関数（）{return $（ "＃loc1"）。val（）; }}
            }、
            メッセージ：{
                必須：「開始/終了場所は必須フィールドです。」、
                リモート：「有効なアドレスを入力してください。」
            }
        }）;
        $（ "＃loc2"）。rules（ "add"、{
            必須：true、
            リモート：{
                url： "/ Home / IsValidAddress"、
                タイムアウト：2000、
                タイプ：「投稿」、
                データ：{アドレス：関数（）{return $（ "＃loc2"）。val（）; }}
            }、
            メッセージ：{
                必須：「少なくとも3つのアドレスを入力してください。」、
                リモート：「有効なアドレスを入力してください。」
            }
        }）;
        $（ "＃loc3"）。rules（ "add"、{
            必須：true、
            リモート：{
                url： "/ Home / IsValidAddress"、
                タイムアウト：2000、
                タイプ：「投稿」、
                データ：{アドレス：関数（）{return $（ "＃loc3"）。val（）; }}
            }、
            メッセージ：{
                必須：「少なくとも3つのアドレスを入力してください。」、
                リモート：「有効なアドレスを入力してください。」
            }
        }）;
        $（ "＃loc4"）。rules（ "add"、{
            リモート：{
                url： "/ Home / IsValidAddress"、
                タイムアウト：2000、
                タイプ：「投稿」、
                データ：{アドレス：関数（）{return $（ "＃loc4"）。val（）; }}
            }、
            メッセージ：{
                リモート：「有効なアドレスを入力してください。」
            }
        }）;
        $（ "＃loc5"）。rules（ "add"、{
            リモート：{
                url： "/ Home / IsValidAddress"、
                タイムアウト：2000、
                タイプ：「投稿」、
                データ：{アドレス：関数（）{return $（ "＃loc5"）。val（）; }}
            }、
            メッセージ：{
                リモート：「有効なアドレスを入力してください。」
            }
        }）;
    }）;

</script>

jquery - MVC 4を使用したリモートjQuery検証では、locで始まるすべての入力を動的に検証しますか？

2 に答える 2

Related

Reference