2

我正在使用 asp.net 的 MVC3 构建一个大型网站。在登录页面上，我使用内置函数进行不显眼的 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 可以让您实现这种目标。

这是上述脚本发布到的我的一项操作的示例

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 回答