javascript - 使用 Javascript 在 EditorFor MVC 中获得焦点

Question

您有一个执行模式窗口的按钮

    <a data-dialog="AgregarProducto" href="@Url.Action("AgregarProducto", "Salidas")" id="agregarproducto" class="dialog-window btn btn-success">Agregar Producto <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> </a>     

<div class="modal fade" id="AgregarProducto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h2 class="modal-title"></h2>
            </div>
            <div class="modal-body"><div class="te">Espere Porfavor...</div></div>
        </div>
    </div>
</div>    

 <script type="text/javascript">
$(document).ready(function () {
    $('#agregarproducto').click(function (e) {
        e.preventDefault();
        var $link = $(this);
        var title = $link.text();
        $('#AgregarProducto.modal-title').html(title);
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0) {
            $('#AgregarProducto').modal('show');
        }
        else {
            $.get(url, function (data) {
                $('#AgregarProducto .te').html(data);
                $('#AgregarProducto').modal();
            }).success(function () { $('input:text:visible:first').focus(); });

        }
    });
});
</script>

这是在浏览器中运行的 View ...

我附上部分 View “AgregarProducto.cshtml”:

            <div class="form-group">
                @Html.LabelFor(model => model.Kn_CodigoProducto, "Producto", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Kn_CodigoProducto, new { htmlAttributes = new { @class = "form-control", @autofocus = "true", @required = "true" , id = "editorfocus" } })
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <button class="btn btn-success" type="submit">
                        Agregar Producto
                        <i class="glyphicon glyphicon-ok"></i>
                    </button>
                </div>
            </div>
        </div>    


    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")

<script>
  $(function(){
   $('#AgregarProducto').on('shown.bs.modal', function () {
      $('#editorfocus').focus()
   });
});

   </script>

    }

你想要的是集中在箭头指示的EditorFor上，这个焦点必须在模态视图打开后立即执行，但我没有得到预期的结果，我的代码没有做任何事情，任何帮我吗？如何仅打开部分 View “AddProduct.cshtml”即可获得焦点？

Answer 1

部分 View 中不支持部分(这对于您的情况来说可能是幸运的，因为您将加载 jquery 的另一个副本)。从您的部分中删除脚本并将焦点设置在主脚本中。

$('#agregarproducto').click(function (e) {
    e.preventDefault();
    ....
    if (url.indexOf('#') == 0) {
        $('#AgregarProducto').modal('show');
        $('#editorfocus').focus(); // set focus
    }
    else {
        $.get(url, function (data) {
            $('#AgregarProducto .te').html(data);
            $('#AgregarProducto').modal();
            $('#editorfocus').focus() // set focus
        });
    }
});

请注意，您对 if/else block 的使用不清楚，因为 url 的值始终为 "/Salidas/AgregarProducto"因此 else block 中的代码只会被执行，因此脚本可以是

$('#agregarproducto').click(function (e) {
    e.preventDefault();
    ....
    $.get(url, function (data) {
        $('#AgregarProducto .te').html(data);
        $('#AgregarProducto').modal();
        $('#editorfocus').focus() // set focus
    });
});

但是，如果您想避免进行 ajax 调用以再次获取相同的部分(如果它已经加载)，那么您可以使用一个标志来指示它是否已加载，例如

var isModalLoaded = false;
$('#agregarproducto').click(function (e) {
    e.preventDefault();
    if (isModalLoaded) {
        // Just show the modal
        $('#AgregarProducto').modal('show');
        $('#editorfocus').focus() // set focus
    } else {
        // Make ajax call
        $.get(url, function (data) {
            ....
        });
        isModalLoaded = true; // prevent further ajax calls
    }
});