Question

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

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

我会非常感谢任何帮助！我在这里很绿。

谢谢，

Nieszka

Answer 1

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可以帮助您实现这一目标。

以下是上述脚本发布到

的其中一个操作的示例

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

像我说的那样，这只是一个男人的榜样。这里的每个人都很可能以不同的方式实现这一点。这是首选。

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

1 个答案: