JavaScript 库在使用 ajax 调用时没有继承到模态

Question

我正在使用 Asp.net 核心 MVC，我正在尝试在引导模式中使用 ajax。 我的问题是当我使用 ajax 调用引导模式时，主布局中存在的库在模式中不起作用。 我有一个日期时间选择器和文件上传器，它们都不起作用。

主视图

@model BusinessViewModel

@{ ViewBag.Title = "اعـمـال الشركـة"; }

<div id="view-all">
    @await Html.PartialAsync("_ViewAllCompanyWork", Model)
</div>

局部视图中的按钮调用模式

<button type="button" onclick="showInPopup('@Url.Action("CreateOrEdit","CompanyWork",null,Context.Request.Scheme)','اضافة عمل')" class="btn bg-blue-400 btn-labeled btn-labeled-left rounded-round"><b><i class="icon-plus2"></i></b> إضافة عمل</button>

动作

[HttpGet]
        [NoDirectAccess]
        [Authorize(Permissions.Business.Create), Authorize(Permissions.Business.Edit)]
        public async Task<ActionResult> CreateOrEdit(Guid id)
        {
            if (id == Guid.Empty)
                return View(new BusinessViewModel());
            else
            {
                var model = await _business.Entity.GetAll().Include(a => a.BusinessPicVideos).Where(a => a.Id == id).AsNoTracking().FirstOrDefaultAsync();
                if (model == null)
                {
                    return NotFound();
                }

                var vm = new BusinessViewModel
                {
                    Business = model
                };
                return View(vm);
            }
        }

jQuery ajax

showInPopup = (url, title) => {
debugger;
$.ajax({
    type: 'GET',
    url: url,
    success: function (res) {
        $('#form-modal .modal-body').html(res);
        $('#form-modal .modal-title').html(title);
        $('#form-modal').modal('show');
        // to make popup draggable
        $('.modal-dialog').draggable({
            handle: ".modal-header"
        });
    }
})

}

创建或编辑视图

    @model BusinessViewModel

@{ Layout = null; }

<div class="row">
    <div class="col-md-12">
        <form asp-action="CreateOrEdit" asp-controller="CompanyWork" onsubmit="return AjaxPost(this);">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <input type="hidden" asp-for="Id" />

            <div class="col-lg-12">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-8 col-form-label input__label"> العنوان</label>
                            <input class="form-control mr-sm-2" asp-for="Business.Title" name="Title" type="text">
                            <span asp-validation-for="Business.Title" class="text-danger"></span>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="col-sm-8 col-form-label input__label">الوصف </label>
                            <input class="form-control mr-sm-2" asp-for="Business.Describ" name="Description" type="text">
                            <span asp-validation-for="Business.Describ" class="text-danger"></span>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <label class="col-sm-8 col-form-label input__label">تاريخ النشر </label>
                        <div class="form-group form-group-feedback form-group-feedback-left">
                            <input type="text" asp-for="Business.PublishDate" name="PublishDate" class="form-control datepicker">
                            <span asp-validation-for="Business.PublishDate" class="text-danger"></span>
                            <div class="form-control-feedback form-control-feedback-lg">
                                <i class="icon-calendar"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12">
                        <input type="file" asp-for="Pics" multiple class="file-input-custom form-control-sm" data-show-caption="true" data-show-upload="false" accept="image/*" data-fouc>
                    </div>

                    <button name="submit" value="Add" type="submit" class="btn btn-primary">حفظ</button>
                    <button type="button" class="btn btn-default">إلغاء</button>
                </div>
            </div>
        </form>
    </div>
</div>

@section Scripts{
    <partial name="_Validate" />
}

Answer 1

在将动态 html 添加到 DOM 后，您需要再次实例化 datepicker。您可以在 bootstrap modal 显示的事件中调用它：

$('.modal').on('shown.bs.modal', function () {
    $('#Business_PublishDate').datepicker();
});

这是整个工作演示：

型号：

public class BusinessViewModel
{
    public Guid Id { get; set; }
    public Business Business { get; set; }
    public IFormFile Pics { get; set; }
}
public class Business
{
    public string Title { get; set; }
    public string Describ { get; set; }
    public DateTime PublishDate { get; set; }
}

Index.cshtml：

@model BusinessViewModel

@{ ViewBag.Title = "اعـمـال الشركـة"; }

<div id="view-all">
    @await Html.PartialAsync("_ViewAllCompanyWork", Model)
</div>

@section Scripts
{
    <script>
        function showInPopup(url, title) {
            debugger;
            $.ajax({
                type: 'GET',
                url: url,
                success: function (res) {
                    $('#form-modal .modal-body').html(res);
                    $('#form-modal .modal-title').html(title);
                    $('#form-modal').modal('show');
                    $('.modal-dialog').draggable({
                        handle: ".modal-header"
                    });
                }
            })
        };

        $('.modal').on('shown.bs.modal', function () {
            $('#Business_PublishDate').datepicker();
        });
    </script>
}

_ViewAllCompanyWork.cshtml：

<button type="button" onclick="showInPopup('@Url.Action("CreateOrEdit","CompanyWork",null,Context.Request.Scheme)','اضافة عمل')" class="btn bg-blue-400 btn-labeled btn-labeled-left rounded-round">
 إضافة عمل</button>
<div class="modal fade" id="form-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Modal Body Start-->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" >Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            </div>   
            <div class="modal-body form-horizontal">
            </div>          
        </div>
    </div>
</div>

_Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Dotnetcore5</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
       //...
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody() 
        </main>
    </div>    
    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - Dotnetcore5 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>    

  //add datepicker reference....
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    @await RenderSectionAsync("Scripts", required: false)

</body>
</html>

Answer 2

如果您使用 Entity Framework Core，请查看 EasyData 开源库。它将以最少的工作量和几行代码处理您的所有 CRUD 操作。