4

基本的なクライアントとサーバーの検証に標準のモデル検証属性を使用する MVC 3 アプリケーションを構築しています。ただし、ヘッダーにあり、jQuery 検証プラグインを使用してクライアント検証を実行するフォームもあります。

目立たないライブラリをプロジェクトに追加すると、検証プラグインを使用するヘッダー フォームが実行に失敗し、投稿し続けます。目立たないライブラリが含まれていない場合、ヘッダーは正常に検証されますが、モデルの検証は停止します。

私が間違っていることは何ですか？

編集

基本的に、ヘッダーにログインフォームがあります。また、ログインできるログインページもあります。ログインページはモデルに関連付けられていますが、ヘッダーのフォームは関連付けられておらず、単なる html です。どちらのフォームも、jQuery .ajax を介して同じコントローラー/アクションを呼び出します。

目立たないライブラリを含めたので、呼び出されないように見える .ajax メソッドを使用する能力を失いました。

あなたが含めたコードが機能するようになりましたが、検証が完了した後も投稿したり、アクションを実行したりできません。

私のヘッダーフォームは次のとおりです。

<form id="frmHeaderLogin" action="">
<table id="LoginBox" title="Login">
    <tr>
        <td>UserName</td>
        <td><input type="text" id="Username" name="Username" /></td>
    </tr>
    <tr>
        <td>Password</td>
        <td><input type="password" id="Password" name="Password" /></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit" value="Login" id="btnHeaderLogin" name="btnHeaderLogin" /></td>
    </tr>
</table>
</form>

クライアント入力を検証し、JSON オブジェクトをデータ パラメーターとして作成した後、これをサーバーに送信する送信ボタンのクリック イベントがあります。サーバーからの応答も JSON オブジェクトです。このフォームは、すべてのページに配置されるため、レイアウト ファイルにあります。

メインのログイン ページ/ビューには、次のような単純なフォームがあります。

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "MainLoginForm" }))
{
<div>
    <fieldset>
       <p style="color:Red;font-size:medium">@ViewData["Message"]</p>
        <legend>Login</legend>
        <div class="editor-label">
        @Html.LabelFor(m => m.UserName, "EmailId")
        </div>
        <div class="editor-field">
        @Html.TextBoxFor(m => m.UserName)
        @Html.ValidationMessageFor(m => m.UserName)
        </div>
        <div class="editor-label">
        @Html.LabelFor(m => m.Password, "Password")  
        </div>
        <div class="editor-field">         
        @Html.PasswordFor(m => m.Password)
        @Html.ValidationMessageFor(m => m.Password)
        </div>
        <p>
        <input type="submit" id="btnMainLogin" value="Login" />
        </p>
     </fieldset>
</div>
}

これには、.ajax メソッドを起動し、上記のように JSON オブジェクトをサーバーに送信する jQuery クリック イベントもあります。どちらのインスタンスも JSON オブジェクトを返します。

この時点で、クライアントとサーバーの検証を利用できるようにするレイアウト ファイルにあるヘッダー ログインに同じモデルを使用できるかという疑問が生じる可能性があると思います。

以下は、検証に合格した後に使用していた submitHandler の例です (jquery.validate を使用)。

    $("#formname").validate( {
     // .....
         // .....
         submitHandler: function () {
            var JSONData = new Object();
            $(':text, :password', $("table[id$='LoginBox']")).each(function () {
                JSONData[$(this).attr("id")] = $(this).val();
            });

            $.ajax({
                type: "POST",
                url: "/Controller/Action",
                data: "{'Login': '" + JSON.stringify(JSONData) + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var response = $.parseJSON(result);
                    alert("Header Login Success!");
                },
                error: function (xhr, status, error) {
                    alert(xhr.statusText + " - ReadyState:" + xhr.readyState + "\n" + "Status: " + xhr.status);
                }
            });
         }
    )};
4

1 に答える 1

6

Microsoft の目立たない検証スクリプトと、同じページに記述したカスタム jquery 検証ルールを混在させたい場合は、jquery 検証ルールを既存のフォーム要素に追加する必要があります。例を見てみましょう：

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }

    public string Bar { get; set; }
}

コントローラ：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

意見：

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#Bar').rules('add', {
            required: true,
            messages: {
                required: 'Bar is required'
            }
        });
    });
</script>

@using (Html.BeginForm())
{
    <div>
        @Html.EditorFor(x => x.Foo)
        @Html.ValidationMessageFor(x => x.Foo)
    </div>

    <div>
        @Html.EditorFor(x => x.Bar)
        @Html.ValidationMessageFor(x => x.Bar)
    </div>

    <button type="submit">OK</button>
}

Foo フィールドの Required 属性によってそれが必須になっていることに注意してください。また、Bar フィールドのカスタム jquery 検証ルールを定義しました。

フォームが送信され、2 つのフィールドが空のままになっている場合の結果は次のとおりです。

ここに画像の説明を入力

もちろん、任意のフィールドに任意の数のカスタム ルールを定義できます。

于 2012-06-25T10:38:31.913 に答える