0

我在索引视图上使用 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" )

和登录视图：

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

1 回答 1

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在客户端上显示服务器端错误，您不应该使用@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>
}
于 2012-08-20T08:15:03.940 回答