نمایش فرم مودال (Modal) در بوت استرپ 5 در Asp.net Core

من یک مودال با استفاده از پارشیال ویو برای Header , Footer, Body ایجاد کردم . اما متاسفانه به خطا برخورد کردم و صفحه مودال به درستی نمایش داده نمیشه 

جهت بررسی شما بخشی از کد های صفحات را در زیر قرار میدم  (البته قسمتهای غیر ضروری را حذف کردم ) :

صفحه Index :

<a class="btn btn-success " style="margin-bottom:10px" id="showaddRole" data-toggle="modal" asp-action ="AddRole" data-target="#modal-action-application-role">
                <span class="fal fa-layer-plus " style="margin-left:5px"></span>
                افزودن نقش کاربر

            </a>
.

@Html.Partial("modal/_Modal", new BootstrapModel {ID= "modal-action-application-role", Size = ModalSize.Medium } )

<script src="~/js/Modal-js/application-role-index.js"></script>

فایل _AddEditApplicationRole :

<form asp-action="AddEditApplicationRole" role="form">
    @*header  *@
    @await Html.PartialAsync("_ModalHeader", new ModalHeader { Heading = "افزودن نقش سیستمی" })

    @* Body *@
    <div class="modal-body row">
        <div class="row">
            <div class="col-form-label">
                <label asp-for="RoleName" class="col-lg-3 col-sm-3"></label>
            </div>
            <div class="col-lg-6">
                <input asp-for="RoleName" class="form-control" />
            </div>
            <div class="col-form-label">
                <label asp-for="RoleDiscription" class="col-lg-3 col-sm-3"></label>
            </div>
            <div class="col-lg-6">
                <input asp-for="RoleDiscription" class="form-control" />
            </div>
        </div>

    </div>

    @*footer  *@
    @await Html.PartialAsync("_ModalFooter", new ModalFooter { SubmitButtenText = "افزودن نقش" })
</form>

فایل جاوا  application-role-index:

(function ($) {
    function ApplicationRole() {
        var $this = this;

        function initilizeModel() {
            $("#modal-action-application-role").on('loaded.bs.modal', function (e) {

            }).on('hidden.bs.modal', function (e) {
                $(this).removeData('bs.modal');
            });
        }
        $this.init = function () {
            initilizeModel();
        }
    }
    $(function () {
        var self = new ApplicationRole();
        self.init();
    })
}(jQuery))

صفحه کنترل ApplicationRole: اکشن مربوط به دکمه مودال :

[HttpGet]
public IActionResult AddRole()
{
   return PartialView("_AddEditApplicationRole");
}

صفحات مودال  Header-Footer-Modal:

<div class="modal-header">
    <button class="close str" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">@Model.Heading</h4>
</div>

<div class="modal-footer">
    <button class="btn btn-warning" type="button" data-dismiss="modal" id="@Model.CancelButtenId">
        @Model.CancelButtenText
    </button>
    @if (!Model.OnlyCancelButten)
    {
        <button class="btn btn-success" type="button"  id="@Model.SubmitButtenId">
            @Model.SubmitButtenText
        </button>
    }
</div>

<div aria-hidden="true" aria-labelledby="@Model.AreaLabeledId" role="dialog" tabindex="-1" id="@Model.ID" class="modal fade">
    <div class="modal-dialog @Model.ModalSizeClass">
        <div class="modal-content">

        </div>
    </div>
</div>

مدل های مربوطه - که فضای نام اونها هم درست هستش :

public class BootstrapModel
{
        public string ID { get; set; }
        public string AreaLabeledId { get; set; } 
        public ModalSize Size { get; set; }
        public string Message { get; set; }
        public string ModalSizeClass
        {
            get
            {
                switch (this.Size)
                {
                    case ModalSize.Small:
                        return "modal-sm";
                    case ModalSize.Large:
                        return "modal-lg";
                    case ModalSize.Medium:
                    default:
                        return "";
                }
            }
        }        
    }
--------------
public class ModalFooter
{
   public string SubmitButtenText { get; set; } = "Submit";
   public string CancelButtenText { get; set; } = "Cancel";
   public string SubmitButtenId { get; set; } = "btn-submit";
   public string CancelButtenId { get; set; } = "btn-cancel";
   public bool OnlyCancelButten { get; set; }
}
---------------
public class ModalHeader
{
   public string Heading { get; set; }
}
---------------
public enum ModalSize
{
   Small,
   Large,
   Medium
}

نتیجه ای که می گیرم :

که در اون دیده میشه که سایز medium برای مودال ایجاد شده اما load  نمی شود .

الگوی آدرس های سایت هم به ترتیب زیر هست که بنظر میاد درست آدرس دهی شده :

نکات قابل توجه :

-بوت استرپ و AspNetCore من ویرایش 5 هستش 

و