2

asp.netのMVC3を使用して大規模なWebサイトを構築しています。ログインページでは、控えめなJavaScript検証のための組み込み関数を使用しています。すべて問題ありませんが、検証メッセージの表示方法にいくつかの効果を追加したいと思います。（エラーの下に赤いボックスをスライドさせたい）。

どうすればよいですか？私はjquery.validate.unobtrusive.jsがどのように機能するかを理解しようとしていますが、それはすべて私にとって黒魔術であり、実際にメッセージを画面に追加するコードを見つけることができないようです。

助けていただければ幸いです。私はこれでかなり緑です。

ありがとう、

ニースカ

4

1 に答える 1

0

これValidationSummaryは、サーバー側のエラーが発生した後に表示されるようにページにエラーを追加するものです。ValidationFor要素はクライアント側のエラーを提供します。

どちらもHTMLヘルパーです。エラーをビューに戻すか、エラーをオーバーライドしてカスタムUI要素を表示する独自の形式を実装する必要があります。

初心者向けのjQueryUIをご覧ください。

真実は、私たち全員が実装するための完全に異なるシナリオを提供する可能性が最も高いということです。しかし、そのすべての重要な要素はjQuery / Ajax/JSONです

たとえば、私にとっては、作成または更新のために投稿する各ビューにjavascript参照を含めます

<script src="@Url.Content("~/Scripts/AjaxFormSubmission.js")" type="text/javascript"></script>

そのスクリプトは次のようになります。

/// <reference path="jquery-1.7.2.js" />

$("document").ready(function () {

    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                dataType: "json",
                cache: false,
                type: 'POST',
                data: $(this).serialize(),
                beforeSubmit: showProgressStarted(),
                success: function (result) {
                    showSuccessError(result);                             
                }
            });
        }
        return false;
    });
});

フォームが送信されると、「リクエストが処理されるまでお待ちください...」というメッセージが少しポップアップ表示されdiv、完了時に非表示になり、JSONの成功またはエラーメッセージが表示されます。

JQueryUI Dialogを使用すると、この種の目標をかなり達成できます。

上記のスクリプトが投稿する私のアクションの1つのサンプルを次に示します。

public JsonResult UpdateRequestStatus(RequestViewModel model) {
    try {
        AttemptUpdateRequestStatus(model);
        return Json(new { Success = true, ResultMessage = "Successfully saved" }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex) {

        ModelState.AddModelError("", ModelStateErrorUtility.WrapResultMessageForList(ex.Message));
    }
    // this custom function evaluates my ModelState and strips out all the error messages so that I can send them all back as part of my JSON response
    return Json(new { Success = false, ResultMessage = ModelStateErrorUtility.GetModelStateErrors(ModelState) }, JsonRequestBehavior.AllowGet);
}

これは私のカスタムエラーを表示する私のjavascript/jQueryコードです

function showSuccessError(result) {
    $('#resultSpan').html('');
    var headerText;
    if (result.Success) {
        headerText = "Action was successful!";
        $('#resultSpan').append($("<ul id='successMsg' style='list-style: none;' />").append(result.ResultMessage));
    }
    else {
        headerText = "Ooops! There is an Error";
        $('#resultSpan').append($("<ul id='errorMsg' style='list-style: none;' />").append(result.ResultMessage)).addClass("AjaxErrorText").removeClass("AjaxSuccessText");
    }
    showProgressComplete(headerText);
}

これにより、「お待ちください......」のテキストが実際の成功またはエラーメッセージに変更されます

function showProgressComplete(headerText) {
    $('#ajaxResultPopUpHeaderText').html(headerText);
}

私が言ったように、これはただ一人の男の例です。ここにいる全員が、これを異なる方法で実装している可能性があります。本当に好みです。

于 2012-05-28T14:47:07.890 に答える