首页 > 解决方案 > 使用 ajax 调用 JavaScript 库时,它没有继承到 modal

问题描述

我正在使用 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的阿贾克斯

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" />
}

标签: asp.net-coreinheritanceasp.net-ajax

解决方案


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


推荐阅读