Модальная форма С Bootstrap 4 - PullRequest
Новая
       10

Модальная форма С Bootstrap 4

0 голосов
/ 02 апреля 2020

У меня есть 3 cs html файла в общей папке: _Modal.cs html

   @model Lms.Application.PublicModel.BootstrapModel

<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>

_ModalHeader.cs html

   @model Lms.Application.PublicModel.ModalHeader


<div class="modal-header">
    <h5 class="modal-title" id="staticBackdropLabel">@Model.Heading</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

_ModalFooter.cs html

    @model Lms.Application.PublicModel.ModalFooter

<div class="modal-footer">
    <button class="btn btn-default" type="button" data-dismiss="modal" id="@Model.CancelButtonID">@Model.CancelButtonText</button>

    @if (!Model.OnlyCancelButton)
    {
        <button class="btn btn-success" type="submit" id="@Model.SubmitButtonID">
            @Model.SubmitButtonText
        </button>
    }
</div>

, где каждый файл является частью модальной формы. также у меня есть ViewGroup.cs html, который имеет ссылку: 

@model IEnumerable<Lms.Domain.Models.Group>
@using Lms.Application.PublicModel

@{
    ViewData["Title"] = "ViewGroup";
    Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}

<h1>گروه های اعضا</h1>

<p>
    <a asp-action="AddGroup">گروه جدید</a>
</p>
<div>
    <button type="button" class="btn btn-primary" data-remote="_AddEditGroup" data-toggle="modal" data-target="#GrModal">
        Launch  backdrop modal
    </button>
</div>
<table class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th>
                <span>نام گروه</span>
            </th>
            <th>
                <span>کتابخانه</span>
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.GroupName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LibraryId)
                </td>
                <td>
                    <a class="btn btn-primary" asp-action="Edit" asp-route-id="@item.Id">ویرایش</a> |
                    <a class="btn btn-info" asp-action="Details" asp-route-id="@item.Id">جزئیات</a> |
                    <a class="btn btn-danger" asp-action="Delete" asp-route-id="@item.Id">حذف</a>
                </td>
            </tr>
        }
    </tbody>
</table>
@await Html.PartialAsync("_Modal", new BootstrapModel { ID = "GrModal", Size = ModalSize.Small })


@section Scripts{
    <script src="~/js/modal-js/group.js"></script>
}

Также у меня есть jQuery файл с именем group. js: 

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

        function initilizeModel() {
            $("#GrModal").on('show.bs.modal', function (e) {
            }).on('hidden.bs.modal', function (e) {
                $(this).removeData('bs.modal');

            });
        }
        $this.init = function () {
            initilizeModel();
        }
    }
    $(function () {
        var self = new Group();


        self.init();

    })
}(jQuery))

также я иметь частичное представление _AddEditGroup для модального содержимого _AddEditGroup.cs html

@model Lms.Domain.Models.Group
@using Lms.Application.PublicModel
<!-- Modal -->

<form asp-controller="Group" asp-action="AddGroup" id="addeditauthor" data-ajax="true"
      data-ajax-method="POST" data-ajax-update="#addeditauthor" data-ajax-mode="replace">

     @await Html.PartialAsync("_Modalheader", new ModalHeader { Heading = "افزودن گروه" })

    <div class="modal-body form-horizontal">
        <div class="row">
            <div class="form-group">
                <label asp-for="GroupName" class="col-lg-3 col-sm-3 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="GroupName" class="form-control" />
                    <span asp-validation-for="GroupName" class="text-danger"></span>
                </div>
            </div>

            <div class="form-group">
                <label asp-for="LibraryId" class="col-lg-3 col-sm-3 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="LibraryId" class="form-control" />
                    <span asp-validation-for="LibraryId" class="text-danger"></span>
                </div>
            </div>

            <div class="form-group">
                <label asp-for="Id" class="col-lg-3 col-sm-3 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="Id" class="form-control" />
                </div>
            </div>

            <input type="hidden" name="redirectUrl" value="@Url.Action("Group","ViewGroup")" />
        </div>
    </div>

    @await Html.PartialAsync("_Modalfooter", new ModalFooter { SubmitButtonText = "افزودن گروه" })

</form>

Метод Контроллера следующий: 

       [HttpGet]
        public IActionResult AddGroup()
        {
            Group model = new Group();
            return PartialView("_AddEditGroup", model);
        }

при нажатии кнопки в ViewGroup.cs * Файл 1035 * должен отображать модальную форму с верхним и нижним колонтитулами. на самом деле модальное тело _AddEditGroup.cs html

Но проблема в следующем: мой код работает с bootstrap 3.3.4, но не работает с bootstrap 4.4.1, и только фон будет быть темным пожалуйста, помогите мне ...

...