Question

我在Index视图上使用LogOn局部视图，并使用MVC3的默认LogOnModel。但是，没有足够的地方在视图中显示验证消息。如何使用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" );
}

在索引视图中：

 @Html.Partial( "LogOn" )

和LogOn视图：

@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的{{1}}服务器端错误，您不应该使用@Html.ValidationSummary( true )帮助程序，因为此帮助程序直接在视图中输出错误，并且您说您没有没有足够的地方。

因此，您可以在出现错误时动态发出javascript并将其显示在alert：

中

@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>
}

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

1 个答案: