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

时间:2012-08-19 18:16:08

标签: javascript jquery asp.net-mvc-3 validation jquery-validate

我在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>
}

1 个答案:

答案 0 :(得分:2)

对于不显眼的客户端验证,您可以订阅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>
}