asp.net-core - 使用 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" />
}
解决方案
如果您使用 Entity Framework Core,请查看EasyData开源库。它将以最少的努力和几行代码来处理您的所有 CRUD 操作。
推荐阅读
- javascript - 如何替换javascript中的空格?
- angularjs - AngularJS - 带有数字/长度的过滤复选框
- java - 现有事务中的程序化弹簧事务
- javascript - 如何用 JS 改变滚动条的形状
- javascript - 如何使用javascript获取特定值之前的所有内容
- c# - 如何使用 AJAX 更新每个评论 - MVC
- python - 使用该登录名我想在其他文件中存储一些值,例如名称、电子邮件地址
- vue.js - Vue CLI:将默认样式语言设置为 scss
- ubuntu - 调用 freeze_bdev() 会导致内核错误
- python - setup.py:添加安装所需的依赖项