javascript - 将自定义 JavaScript/jQuery 效果添加到 MVC 3 表单验证

Question

我正在使用 asp.net 的 MVC3 构建一个大型网站。在登录页面上，我使用内置函数进行不显眼的 javascript 验证。一切都很好，但我想对验证消息的显示方式添加一些效果。 (我想要一个红色框向下滑动到错误下方)。

我该怎么做？我一直在试图弄清楚 jquery.validate.unobtrusive.js 是如何工作的，但这对我来说都是黑魔法，我似乎无法找到实际上将消息添加到屏幕上的代码。

如有任何帮助，我将不胜感激!我对此很陌生。

谢谢，

尼兹卡

Answer 1

ValidationSummary 是将错误添加到页面以在发生服务器端错误后显示的内容。 ValidationFor 元素提供客户端错误。

两者都是 HTML 助手。您将需要实现自己的形式，将错误返回到 View 或覆盖这些错误并显示自定义 UI 元素。

先看看 jQueryUI。

事实是，我们每个人很可能会给您一个完全不同的方案来实现。但其中的关键元素是 jQuery/Ajax/JSON

例如，对我来说，我在创建或更新的每个 View 中包含一个 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 可以帮助您实现这种目标。

这是上面脚本发布到的我的一个 Action 的示例

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);
}

就像我说的，这只是一个人的例子。这里的每个人很可能会以不同的方式实现这一点。这真的是偏好。