Asp.net 核心控制器功能 return 带有 select2 的局部视图不工作，远程功能验证未在模态弹出窗口中触发

Question

Select2 不工作并且不触发远程验证，只有当我将代码转换为模式弹出窗口时才会发生这种情况，但如果不是一切正常的话。我的代码中缺少什么？非常感谢任何建议或帮助。谢谢

这是我的模态代码：

$('#tbProducts tbody').on('click', 'button', function () {
            var data = productsTable.row($(this).parents('tr')).data();
            //alert(data.id);
            $.ajax({
                url: '@Url.Action("Edit", "Products")',
                type: 'GET',
                data: { id: data.id },
                success: function (result) {
                    $('#EditUnitModal .modal-content').html(result);
                    $('#EditUnitModal').modal()
                }
            });
        });

这里是控制器edit代码：

public async Task<IActionResult> Edit(int? id)
    {
        //code here
        return PartialView("__Edit", product);
    }

这是我的局部视图 __Edit 代码：

    @model intPOS.Models.Master.ViewModel.ProductViewModel


//code here

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">

    $(function () {

        $('#Unit').select2({
            theme: 'bootstrap4',
            dropdownParent: $('#EditUnitModal')
        })

        $('#Category').select2({
            theme: 'bootstrap4',
            dropdownParent: $('#EditUnitModal')
        })

    })

</script>
}

并查看模型代码：

[Display(Name = "Product Code"), Required]
    [Remote("CheckProduct", "Products", AdditionalFields = "Id", ErrorMessage = "Product already exists.")]
    public string ProductCode
    {
        get
        {
            return _productcode;
        }
        set
        {
            _productcode = value.Trim();
        }
    }

Sample screen for not firing validation and select2 is not working:

Answer 1

局部视图中不允许

sections。您仍然可以使用 modals 和通过 Ajax 的部分视图来编辑表单，但是您需要做一些小的修改才能使其工作：

在页面中包含所有必要的脚本（这是强制性的，因为部分视图中不允许使用部分）。
在您的 javascript 代码中添加这些行，以便通过 jquery 验证不显眼地解析新表单，并通过 Select2 解析您的 select 元素。

$('#tbProducts tbody').on('click', 'button', function () {
            var data = productsTable.row($(this).parents('tr')).data();
            //alert(data.id);
            $.ajax({
                url: '@Url.Action("Edit", "Products")',
                type: 'GET',
                data: { id: data.id },
                success: function (result) {
                    $('#EditUnitModal .modal-content').html(result);
                    //Here we parse the new form via jquery validation unobtrusive.
                    $.validator.unobtrusive.parse($('#EditUnitModal .modal-content form')[0]);
                    //Here we initialize select2 for the selected elements.
                    $(".yourSelect2ElementClass").select2({//options...});
                    //Now we launch the modal.
                    $('#EditUnitModal').modal()
                }
            });
        });

不要忘记从局部视图中删除 section 并将脚本包含在包含视图中。

Asp.net 核心控制器功能 return 带有 select2 的局部视图不工作，远程功能验证未在模态弹出窗口中触发

Asp.net core controller function with return partial view with select2 not working and remote function validation is not firing in modal popup

ajax

asp.net-mvc

bootstrap-modal

asp.net-core

bootstrap-4