javascript - 如何使用 javascript 警报窗口显示验证消息？

Question

我在索引 View 上使用LogOn部分 View ，并使用MVC3的默认LogOnModel。但是，没有足够的地方可以在 View 中显示验证消息。如何使用 javascript 警报窗口显示验证消息？

[HttpPost]
public ActionResult LogOn( LogOnModel model, string returnUrl )
{
    if ( ModelState.IsValid )
    {
        if ( ( model.UserName != null ) && ( model.Password != null ) )
        {
            if ( Membership.ValidateUser( model.UserName, model.Password ) )
            {
                FormsAuthentication.SetAuthCookie( model.UserName, true );

                if ( Url.IsLocalUrl( returnUrl ) && returnUrl.Length > 1 && returnUrl.StartsWith( "/" )
                    && !returnUrl.StartsWith( "//" ) && !returnUrl.StartsWith( "/\\" ) )
                {
                    return Redirect( returnUrl );
                }
                else
                {
                    return RedirectToAction( "Index", "Home", model );
                }
            }
            else
            {
                return RedirectToAction( "Index", "Home" );
            }
        }
        else return RedirectToAction( "Index", "Home" );
    }
    return RedirectToAction( "Index", "Home" );
}

在索引 View 中:

 @Html.Partial( "LogOn" )   

和登录 View :

@model OnlineMarket.Models.LogOnModel
@using ( Html.BeginForm( "LogOn", "Home", FormMethod.Post ) )
{
    @Html.ValidationSummary( true )
    @Html.Hidden( "RememberMe", "true" )
    <ul class="forms">
        <li class="txt">Username</li>
        <li class="inputfield">
            @Html.TextBoxFor( m => m.UserName, new { @class = "logininputs" } )
        </li>
    </ul>
    <ul class="forms">
        <li class="txt" style="width: 26px;">Password</li>
        <li class="inputfield">
            @Html.TextBoxFor( m => m.Password, new { @class = "logininputs" } )
        </li>
    </ul>
    <ul class="forms">
        <li class="txt" style="width: 50px; margin-top: -5px; margin-left: 4px;">
            <input type="submit" value="Enter" class="buttonforinput" style="height: 23px;" />
        </li>
    </ul>
}

Answer 1

对于不引人注目的客户端验证，您可以订阅 showErrors 回调并按照您想要的方式显示错误(在您的情况下为 alert):

(function ($) {
    $.validator.setDefaults({
        onsubmit: true,
        onkeyup: false,
        onfocusout: false,
        showErrors: function (errorMap, errorList) {
            if (errorList.length > 0) {
                var errors = errorList.map(function (element) {
                    return element.message;
                }).join('\r\n');
                alert(errors);
            }
        }
    });
})(jQuery);

为了在客户端上使用 alert 显示服务器端错误，您不应使用 @Html.ValidationSummary( true ) 帮助程序，因为此帮助程序会输出错误直接在 View 中，你说你没有足够的地方。

因此，您可以在出现错误时动态发出 JavaScript 并将其显示在警报中:

@if (!ViewData.ModelState.IsValid)
{
    <script type="text/javascript">
        var errors = @Html.Raw(
            Json.Encode(
                string.Join(
                    Environment.NewLine, 
                    ViewData.ModelState
                            .Where(x => x.Value.Errors.Count > 0)
                            .SelectMany(x => x.Value.Errors)
                            .Select(error => error.ErrorMessage))
                )
        );
        alert(errors);
    </script>
}