MVC 3现场验证始终关注失败

时间:2012-05-22 19:59:04

标签: asp.net-mvc-3 razor validation

我们正在为基本网站制定一些可访问性标准,如果模型中定义的验证失败,则需要将焦点返回到用户名字段。我已阅读了几篇帖子,表明这是存在的行为。但是,这不是我们所看到的行为。我对mvc natice功能开放(我们使用带剃刀的mvc 3)或jquery)

1 个答案:

答案 0 :(得分:3)

  

我已阅读了几篇帖子,表明这是行为存在

很奇怪,那些帖子在哪里?我建议你通知这些帖子的作者这不是默认行为。

当然,当某些东西不是默认行为时,如果你想实现它,你将不得不实现它。例如,如果存在多个错误,您没有准确指出它应该如何表现:应该关注哪个字段?首先?第三?第七个?

让我们假设您想要关注第一个。假设您使用的是jQuery,可以在视图中添加以下内容:

@if (!ViewData.ModelState.IsValid)
{
    var key = ViewData
        .ModelState
        .Where(x => x.Value.Errors.Count > 0)
        .Select(x => x.Key)
        .FirstOrDefault();

    if (!string.IsNullOrEmpty(key))
    {
        <script type="text/javascript">
            $(function () {
                $(':input[name=@Html.Raw(Json.Encode(key))]').focus();
            });
        </script>
    }
}

你已经完成了。好吧,差不多,这个代码的进一步改进当然是将它外部化为可重用的HTML帮助器,以避免将你的视图转换成绝对可怕的东西。例如,您可以使用自定义帮助程序来实现此行为,您只需将以下内容添加到_Layout

@Html.FocusOnFirstError()

可以通过以下方式实施:

public static class HtmlExtensions
{
    public static IHtmlString FocusOnFirstError(this HtmlHelper htmlHelper)
    {
        if (htmlHelper.ViewData.ModelState.IsValid)
        {
            return MvcHtmlString.Empty;
        }

        var key = htmlHelper
            .ViewData
            .ModelState
            .Where(x => x.Value.Errors.Count > 0)
            .Select(x => x.Key)
            .FirstOrDefault();

        if (string.IsNullOrEmpty(key))
        {
            return MvcHtmlString.Empty;
        }

        var script = new TagBuilder("script");
        script.Attributes["type"] = "text/javascript";
        script.InnerHtml = string.Format(
            "$(function() {{ $(':input[name={0}]').focus(); }});", 
            Json.Encode(key)
        );
        return new HtmlString(script.ToString(TagRenderMode.Normal));
    }
}