问题描述
我正在使用 Asp.net 核心 MVC,并且我正在尝试在引导模式中使用 ajax 进行 crud。 我的问题是当我使用 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" />
}
解决方法
动态html添加到DOM后需要再次实例化datepicker
。您可以在引导模式显示的事件上调用它:
$('.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">
© 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>
,
如果您使用 Entity Framework Core,请查看 EasyData 开源库。它将以最少的工作量和几行代码处理您所有的 CRUD 操作。