2

基本的なウェブサイトのいくつかのアクセシビリティ標準に取り組んでおり、モデルで定義されている検証に失敗した場合は、ユーザー名フィールドにフォーカスを戻す必要があります。これが存在する動作であることを示すいくつかの投稿を読みました。しかし、これは私たちが見ている行動ではありません。私はmvcnatice機能（かみそりでmvc 3を使用しています）またはjqueryを開いています）

4

1 に答える 1

3

これが存在する動作であることを示すいくつかの投稿を読みました

奇妙なことに、それらの投稿はどこにありましたか? そのような投稿の作成者に、これが既定の動作ではないことを通知することをお勧めします。

もちろん、何かがデフォルトの動作ではない場合、それを達成したい場合は、それを実装する必要があります。たとえば、複数のエラーが発生した場合にどのように動作するかを正確に指定していません。どのフィールドにフォーカスする必要がありますか? 最初？第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));
    }
}
于 2012-05-22T22:47:21.563 に答える