refactor: 移除 Modal Toast 等组件移动代码

This commit is contained in:
Argo Zhang 2020-03-03 15:58:30 +08:00
parent 5c3aaea05d
commit bd2c4823ae
No known key found for this signature in database
GPG Key ID: 152E398953DDF19F
13 changed files with 206 additions and 258 deletions

View File

@ -64,18 +64,6 @@ namespace Bootstrap.Admin.Pages.Components
[Parameter] [Parameter]
public bool ShowFooter { get; set; } = true; public bool ShowFooter { get; set; } = true;
/// <summary>
/// OnAfterRender 方法
/// </summary>
/// <param name="firstRender"></param>
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
JSRuntime.InitModal(Id);
}
}
/// <summary> /// <summary>
/// SetParametersAsync 方法 /// SetParametersAsync 方法
/// </summary> /// </summary>

View File

@ -63,10 +63,6 @@ namespace Bootstrap.Admin.Pages.Components
/// <param name="firstRender"></param> /// <param name="firstRender"></param>
protected override void OnAfterRender(bool firstRender) protected override void OnAfterRender(bool firstRender)
{ {
if (firstRender)
{
JSRuntime.InitToast(Id);
}
if (_show) if (_show)
{ {
_show = false; _show = false;

View File

@ -46,20 +46,6 @@ namespace Microsoft.JSInterop
/// <param name="jSRuntime"></param> /// <param name="jSRuntime"></param>
public static void InitDocument(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.initDocument"); public static void InitDocument(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.initDocument");
/// <summary>
/// 修复 Modal 组件
/// </summary>
/// <param name="jSRuntime"></param>
/// <param name="id"></param>
public static void InitModal(this IJSRuntime? jSRuntime, string id) => jSRuntime.InvokeVoidAsync("$.initModal", id);
/// <summary>
/// 修复 Modal 组件
/// </summary>
/// <param name="jSRuntime"></param>
/// <param name="id"></param>
public static void InitToast(this IJSRuntime? jSRuntime, string id) => jSRuntime.InvokeVoidAsync("$.initToast", id);
/// <summary> /// <summary>
/// 弹出 Modal 组件 /// 弹出 Modal 组件
/// </summary> /// </summary>

View File

@ -52,91 +52,89 @@
<table></table> <table></table>
</div> </div>
</div> </div>
@section modal { <div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="errorList" class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div id="errorList" class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content">
<div class="modal-content"> <div class="modal-header">
<div class="modal-header"> <h5 class="modal-title" id="myModalLabel">程序异常日志窗口</h5>
<h5 class="modal-title" id="myModalLabel">程序异常日志窗口</h5> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div>
</div> <div class="modal-body">
<div class="modal-body"> <form class="form-inline" id="dataForm" name="dataForm"><div class="form-row"></div></form>
<form class="form-inline" id="dataForm" name="dataForm"><div class="form-row"></div></form> </div>
</div> <div class="modal-footer">
<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> <i class="fa fa-times"></i>
<i class="fa fa-times"></i> <span>关闭</span>
<span>关闭</span> </button>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="errorDetail" class="modal-content icon-content"> </div>
<div class="modal-header"> <div id="errorDetail" class="modal-content icon-content">
<h5 class="modal-title" id="myDetailModalLabel">程序异常日志窗口</h5> <div class="modal-header">
<button type="button" class="close" aria-hidden="true">&times;</button> <h5 class="modal-title" id="myDetailModalLabel">程序异常日志窗口</h5>
</div> <button type="button" class="close" aria-hidden="true">&times;</button>
<div class="modal-body"> </div>
<div class="iconview"> <div class="modal-body">
<i id="fa-top" class="fa-target"></i> <div class="iconview">
<div class="affix"> <i id="fa-top" class="fa-target"></i>
<div><a href="#fa-top" class="fa fa-arrow-circle-up"></a></div> <div class="affix">
<div><a href="#fa-bottom" class="fa fa-arrow-circle-down"></a></div> <div><a href="#fa-top" class="fa fa-arrow-circle-up"></a></div>
</div> <div><a href="#fa-bottom" class="fa fa-arrow-circle-down"></a></div>
<div id="dataFormDetail" class="ex-content"><div class="text-center"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div></div>
<i id="fa-bottom" class="fa-target"></i>
</div> </div>
</div> <div id="dataFormDetail" class="ex-content"><div class="text-center"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div></div>
<div class="modal-footer"> <i id="fa-bottom" class="fa-target"></i>
<button type="button" class="btn btn-secondary">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
</div> </div>
</div> </div>
<div class="modal fade" id="dialogAdvancedSearch" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="mySearchModalLabel" aria-hidden="true"> <div class="modal-footer">
<div class="modal-dialog modal-dialog-centered" role="document"> <button type="button" class="btn btn-secondary">
<div class="modal-content"> <i class="fa fa-times"></i>
<div class="modal-header"> <span>关闭</span>
<h5 class="modal-title" id="mySearchModalLabel">查询条件</h5> </button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div>
</div> </div>
<div class="modal-body modal-query"> <div class="modal fade" id="dialogAdvancedSearch" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="mySearchModalLabel" aria-hidden="true">
<form class="form-inline"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="row"> <div class="modal-content">
<div class="form-group col-12"> <div class="modal-header">
<label class="control-label" for="txt_operate_start">起始时间</label> <h5 class="modal-title" id="mySearchModalLabel">查询条件</h5>
<div class="input-group date"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<input id="txt_operate_start" class="form-control" size="16" type="text" value="" readonly> </div>
<div class="input-group-append input-group-addon"> <div class="modal-body modal-query">
<div class="input-group-text"><span class="fa fa-times"></span></div> <form class="form-inline">
</div> <div class="row">
<div class="input-group-append input-group-addon"> <div class="form-group col-12">
<div class="input-group-text"><span class="fa fa-calendar"></span></div> <label class="control-label" for="txt_operate_start">起始时间</label>
</div> <div class="input-group date">
<input id="txt_operate_start" class="form-control" size="16" type="text" value="" readonly>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-times"></span></div>
</div> </div>
</div> <div class="input-group-append input-group-addon">
<div class="form-group col-12"> <div class="input-group-text"><span class="fa fa-calendar"></span></div>
<label class="control-label" for="txt_operate_end">终止时间</label>
<div class="input-group date">
<input id="txt_operate_end" class="form-control" size="16" type="text" value="" readonly>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-times"></span></div>
</div>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-calendar"></span></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</form> <div class="form-group col-12">
</div> <label class="control-label" for="txt_operate_end">终止时间</label>
<div class="modal-footer"> <div class="input-group date">
<button type="button" id="btn_reset" class="btn btn-info btn-fill"><i class="fa fa-trash-o" aria-hidden="true"></i><span>重置</span></button> <input id="txt_operate_end" class="form-control" size="16" type="text" value="" readonly>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button> <div class="input-group-append input-group-addon">
</div> <div class="input-group-text"><span class="fa fa-times"></span></div>
</div>
<div class="input-group-append input-group-addon">
<div class="input-group-text"><span class="fa fa-calendar"></span></div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btn_reset" class="btn btn-info btn-fill"><i class="fa fa-trash-o" aria-hidden="true"></i><span>重置</span></button>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div> </div>
</div> </div>
</div> </div>
} </div>

View File

@ -37,27 +37,25 @@
</environment> </environment>
<script src="~/js/healths.js" asp-append-version="true"></script> <script src="~/js/healths.js" asp-append-version="true"></script>
} }
@section modal { <div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content">
<div class="modal-content"> <div class="modal-header">
<div class="modal-header"> <h5 class="modal-title" id="myModalLabel">健康检查明细窗口</h5>
<h5 class="modal-title" id="myModalLabel">健康检查明细窗口</h5> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div>
</div> <div class="modal-body nobar">
<div class="modal-body nobar"> <table id="checkDetail"></table>
<table id="checkDetail"></table> </div>
</div> <div class="modal-footer">
<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">
<button type="button" class="btn btn-secondary" data-dismiss="modal"> <i class="fa fa-times"></i>
<i class="fa fa-times"></i> <span>关闭</span>
<span>关闭</span> </button>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
} </div>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
健康检查结果 健康检查结果

View File

@ -78,30 +78,28 @@
<table></table> <table></table>
</div> </div>
</div> </div>
@section modal { <div class="modal fade" id="dialogRequestData" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="dialogRequestData" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content">
<div class="modal-content"> <div class="modal-header">
<div class="modal-header"> <h5 class="modal-title" id="myModalLabel">请求数据明细窗口</h5>
<h5 class="modal-title" id="myModalLabel">请求数据明细窗口</h5> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div>
</div> <div class="modal-body">
<div class="modal-body"> <form class="form-inline">
<form class="form-inline"> <div class="form-row">
<div class="form-row"> <div class="form-group col-12">
<div class="form-group col-12"> <pre id="requestData"></pre>
<pre id="requestData"></pre>
</div>
</div> </div>
</form> </div>
</div> </form>
<div class="modal-footer"> </div>
<button type="button" class="btn btn-secondary" data-dismiss="modal"> <div class="modal-footer">
<i class="fa fa-times"></i> <button type="button" class="btn btn-secondary" data-dismiss="modal">
<span>关闭</span> <i class="fa fa-times"></i>
</button> <span>关闭</span>
</div> </button>
</div> </div>
</div> </div>
</div> </div>
} </div>

View File

@ -25,47 +25,6 @@
<script src="~/lib/longbow/longbow.validate.js"></script> <script src="~/lib/longbow/longbow.validate.js"></script>
<script src="~/js/settings.js" asp-append-version="true"></script> <script src="~/js/settings.js" asp-append-version="true"></script>
} }
@section modal {
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="[data-method='saveNewApp']" data-valid-modal="#dialogNew">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">前台应用设置</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="row">
<div class="form-group col-sm-6">
<label class="control-label" for="appKey">应用ID</label>
<input type="text" class="form-control" id="appKey" placeholder="不可为空50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<input type="hidden" id="roleID" />
<label class="control-label" for="appName">应用名称</label>
<input type="text" class="form-control" id="appName" placeholder="不可为空50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-12">
<label class="control-label" for="appUrl">应用首页</label>
<input type="text" class="form-control flex-fill" id="appUrl" placeholder="不可为空2000字以内" maxlength="2000" data-valid="true" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" data-method="saveNewApp">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
</div>
</div>
</div>
</div>
}
<div class="card" asp-auth="saveTitle"> <div class="card" asp-auth="saveTitle">
<div class="card-header">网站名称设置</div> <div class="card-header">网站名称设置</div>
<div class="card-body" data-toggle="LgbValidate" data-valid-button="[data-method='title']"> <div class="card-body" data-toggle="LgbValidate" data-valid-button="[data-method='title']">
@ -356,4 +315,43 @@
</div> </div>
<div class="card-body" id="sortable"> <div class="card-body" id="sortable">
</div> </div>
</div>
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="[data-method='saveNewApp']" data-valid-modal="#dialogNew">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">前台应用设置</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="row">
<div class="form-group col-sm-6">
<label class="control-label" for="appKey">应用ID</label>
<input type="text" class="form-control" id="appKey" placeholder="不可为空50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-6">
<input type="hidden" id="roleID" />
<label class="control-label" for="appName">应用名称</label>
<input type="text" class="form-control" id="appName" placeholder="不可为空50字以内" maxlength="50" data-valid="true" />
</div>
<div class="form-group col-sm-12">
<label class="control-label" for="appUrl">应用首页</label>
<input type="text" class="form-control flex-fill" id="appUrl" placeholder="不可为空2000字以内" maxlength="2000" data-valid="true" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" data-method="saveNewApp">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
</div>
</div>
</div>
</div> </div>

View File

@ -78,30 +78,28 @@
<table></table> <table></table>
</div> </div>
</div> </div>
@section modal { <div class="modal fade" id="dialogRequestData" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="dialogRequestData" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content">
<div class="modal-content"> <div class="modal-header">
<div class="modal-header"> <h5 class="modal-title" id="myModalLabel">请求数据明细窗口</h5>
<h5 class="modal-title" id="myModalLabel">请求数据明细窗口</h5> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div>
</div> <div class="modal-body">
<div class="modal-body"> <form class="form-inline">
<form class="form-inline"> <div class="form-row">
<div class="form-row"> <div class="form-group col-12">
<div class="form-group col-12"> <pre id="requestData"></pre>
<pre id="requestData"></pre>
</div>
</div> </div>
</form> </div>
</div> </form>
<div class="modal-footer"> </div>
<button type="button" class="btn btn-secondary" data-dismiss="modal"> <div class="modal-footer">
<i class="fa fa-times"></i> <button type="button" class="btn btn-secondary" data-dismiss="modal">
<span>关闭</span> <i class="fa fa-times"></i>
</button> <span>关闭</span>
</div> </button>
</div> </div>
</div> </div>
</div> </div>
} </div>

View File

@ -46,6 +46,3 @@
</div> </div>
@RenderBody() @RenderBody()
</section> </section>
@section modal {
@RenderSection("modal", false)
}

View File

@ -34,4 +34,3 @@
@await Html.PartialAsync("Header") @await Html.PartialAsync("Header")
@RenderBody() @RenderBody()
@await Html.PartialAsync("Footer") @await Html.PartialAsync("Footer")
@RenderSection("modal", false)

View File

@ -34,43 +34,6 @@
<script src="~/lib/longbow/longbow.validate.js" asp-append-version="true"></script> <script src="~/lib/longbow/longbow.validate.js" asp-append-version="true"></script>
@RenderSection("javascript", false) @RenderSection("javascript", false)
} }
@section modal {
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="#btnSubmit" data-valid-modal="#dialogNew">
@RenderSection("modal", false)
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" id="btnSubmit">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="dialogAdvancedSearch" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="mySearchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mySearchModalLabel">查询条件</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body modal-query">
@RenderSection("query", false)
</div>
<div class="modal-footer">
<button type="button" id="btn_reset" class="btn btn-info btn-fill"><i class="fa fa-trash-o" aria-hidden="true"></i><span>重置</span></button>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div>
</div>
</div>
</div>
@RenderSection("customModal", false)
}
<div id="toolbar" class="d-none"> <div id="toolbar" class="d-none">
<div class="gear btn-group"> <div class="gear btn-group">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-gear"></i></button> <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-gear"></i></button>
@ -105,3 +68,38 @@
</div> </div>
</div> </div>
@await RenderSectionAsync("body", false) @await RenderSectionAsync("body", false)
<div class="modal fade" id="dialogNew" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content" data-toggle="LgbValidate" data-valid-button="#btnSubmit" data-valid-modal="#dialogNew">
@RenderSection("modal", false)
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
<i class="fa fa-times"></i>
<span>关闭</span>
</button>
<button type="button" class="btn btn-primary" id="btnSubmit">
<i class="fa fa-save"></i>
<span>保存</span>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="dialogAdvancedSearch" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="mySearchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mySearchModalLabel">查询条件</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body modal-query">
@RenderSection("query", false)
</div>
<div class="modal-footer">
<button type="button" id="btn_reset" class="btn btn-info btn-fill"><i class="fa fa-trash-o" aria-hidden="true"></i><span>重置</span></button>
<button type="button" id="btn_query" class="btn btn-primary btn-fill"><i class="fa fa-search" aria-hidden="true"></i><span>查询</span></button>
</div>
</div>
</div>
</div>
@RenderSection("customModal", false)

View File

@ -25,7 +25,7 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.main-content { .main-content {
position: fixed; position: absolute;
overflow: auto; overflow: auto;
-ms-overflow-style: auto; -ms-overflow-style: auto;
} }

View File

@ -108,12 +108,6 @@
$('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').tooltip();
$('.sidebar').addNiceScroll().autoScrollSidebar(); $('.sidebar').addNiceScroll().autoScrollSidebar();
}, },
initModal: function (id) {
$('#' + id).appendTo($('body'));
},
initToast: function (id) {
$('#' + id).appendTo($('body'));
},
toggleModal: function (modalId) { toggleModal: function (modalId) {
$(modalId).modal('toggle'); $(modalId).modal('toggle');
}, },