Bootstrap 4模态与动态内容

Question

我正在为自己创建一个简单的单个Crud Web项目。问题是我希望所有内容（创建/更新/删除）都在单个页面中发生，但我不知道该怎么办。我尝试了一些我搜索过的解决方案，但没有找到背后的主意。

我正在尝试在模式内部的asp.net mvc中打开一个视图，它们都在同一控制器中。现在，我的内容重定向到另一个页面，但是当我单击“新建记录”按钮时，我希望我的内容以模式弹出。

我的索引是Bug / Index

@model IEnumerable<Egem_v3.Models.Bug>

@{
ViewBag.Title = "Index";
}

<p>
<a href="~/Bug/Create" class="btn btn-outline-info btn-sm">New Record</a>
</p>
<table id="myTable" class="table table-striped table-bordered table-hover">
<thead class="text-black-50 text-uppercase">
    <tr>
        <th>
            <p>Başlık</p>
        </th>
        <th>
            <p>Domain</p>
        </th>
        <th>
            <p>Açıklama</p>
        </th>
        <th>
            <p>Oluşturan</p>
        </th>
        <th>
            <p>Oluşturulma Tarihi</p>
        </th>
        <th>
            <p>Çözüm</p>
        </th>
        <th>
            <p>İşlemler</p>
        </th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                <p class="col-form-label">@item.Heading</p>
            </td>
            <td>
                <p class="col-form-label">@item.Domain.DomainName</p>
            </td>
            <td>
                <p class="col-form-label">@item.Description</p>
            </td>
            <td>
                <p class="col-form-label">@item.Author.Name</p>
            </td>
            <td>
                <p class="col-form-label">@item.CreationDate</p>
            </td>
            <td>
                <p class="col-form-label">@item.Solution</p>
            </td>

            <td>

                <a href="~/Bug/Edit/@item.BugID" class="btn btn-outline-warning btn-sm">Düzenle</a>
                <a href="~/Bug/Delete/@item.BugID" class="btn btn-outline-danger btn-sm">Sil</a>
            </td>
        </tr>
    }
</tbody>
</table>

我的创建视图是Bug / Create

@model Egem_v3.Models.Bug

@{
            /**/

            ViewBag.Title = "Oluştur";

 }
 <form role="form" method="post" action="/Bug/Create">
<div class="row">
    <div class="container py-3">
        <div class="row">
            <div class="mx-auto col-sm-6">

                <div class="card">
                    <div class="card-header bg-info">
                        <h4 class="mb-0">Hata Bilgileri</h4>
                    </div>
                    <div class="card-body">


                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label form-control-label">Başlık</label>
                            <div class="col-lg-9">
                                <input class="form-control" type="text" name="Heading" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label form-control-label">Açıklama</label>
                            <div class="col-lg-9">
                                <textarea class="form-control" name="Description" required></textarea>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label form-control-label">Çözüm</label>
                            <div class="col-lg-9">
                                <textarea class="form-control" name="Solution" required></textarea>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label form-control-label">Oluşturan</label>
                            <div class="col-lg-9">
                                <select class="form-control" name="AuthorID" required>
                                    @foreach (var item in ViewData["Author"] as IEnumerable<Egem_v3.Models.Author>)
                                    {
                                        <option value="@item.AuthorID">@item.Name</option>
                                    }
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label form-control-label">Domain</label>
                            <div class="col-lg-9">
                                <select class="form-control" name="DomainID" required>
                                    @foreach (var item in ViewData["Domain"] as IEnumerable<Egem_v3.Models.Domain>)
                                    {
                                        <option value="@item.DomainID">@item.DomainName</option>
                                    }
                                </select>
                            </div>
                        </div>



                    </div>
                    <div class="card-footer">
                        <input type="submit" class="btn btn-outline-success btn-sm" value="Kaydet" style="float:right;">
                        <a href="~/Bug/Index" class="btn btn-outline-secondary btn-sm mr-1" style="float:right;">Geri</a>
                    </div>
                </div>

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