使用Javascript

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>

这是在浏览器中运行的视图...

我附上部分视图“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，这个焦点必须在模态视图打开后立即执行，但我没有得到预期的结果，我的代码没有做任何事情，任何帮帮我？如何才能获得焦点只需打开局部视图“AddProduct.cshtml”？

Answer 1

部分视图中不支持节（在您的情况下可能很幸运，因为您将加载另一个jquery副本）。从部分删除scropts并在主脚本中设置焦点。

$('#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块的使用不清楚，因为url的值始终为"/Salidas/AgregarProducto"，因此else块中的代码只会被执行因此脚本可以只是

$('#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
    }
});