使用 data-url="@Url.Action" 將 model 中的 id 值傳遞到模態表單中

Question

我有一個顯示人名和姓名的表格。它顯示的內容遠不止這些，但這是我要問的一點。

我有一個人表。

如果用戶想要更改人員詳細信息，是否可以打開一個彈出模式表單，列出人員表中的所有人員，以便用戶可以 select 現有人員，或插入新人員，當用戶關閉彈出窗口，主窗體填充了所選/新人員的詳細信息？

我正在使用 ASP.NET Core MVC 5 和 EF Core 5。

任何幫助或指向教程將是一個很大的幫助，謝謝。

更新 -

我已經嘗試了以下 -

我創建了一個模態局部視圖 -

@model Person

 <div class="modal fade" id="personModal" >
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h4 class="modal-title" id="personModalLabel">Persons</h4>
                 <button type="button" class="close" data-dismiss="modal">
                     <span>x</span>
                 </button>
             </div>

             <div class="modal-body">
                 <form action="Create">

                     <table class="table table-bordered table-striped table-hover">
                         <tbody>
                             @foreach (var pers in ViewBag.PersonList)
                             {
                             <tr>
                                 <td style="display:none">@pers.Id</td>
                                 <td class="text-left">
                                     <a asp-action="details" asp-controller="admin" asp-route-id="@pers.Id" title="Click to select vaccination centre">@pers.Title.Description</a><br />
                                 </td>
                                 <td class="text-left ">
                                     @pers.Forename
                                 </td>
                                 <td class="text-left ">
                                     @pers.Surname
                                 </td>
                             </tr>
                             }
                        </tbody>
                    </table>
                     <br />
                    <div class="form-row">
                        <label asp-for="TitleId" class="control-label col-md-2">Title</label>

                        <div class="col-md-4 mb-2">
                            <select asp-for="TitleId" asp-items="@(new SelectList(ViewBag.TitleList, "Id", "Description"))" style=" width: 363px; height: 37px"></select>
                            <span asp-validation-for="TitleId" class="text-danger"></span>
                        </div>
                    </div>

                    <div class="form-row">
                        <label asp-for="Forename" class="control-label col-md-2">Forename</label>

                        <div class="col-md-4 mb-2">
                            <input asp-for="Forename" class="form-control" maxlength="100" />
                            <span asp-validation-for="Forename" class="text-danger"></span>
                        </div>
                    </div>

                    <div class="form-row">
                        <label asp-for="Surname" class="control-label col-md-2">Surname</label>

                        <div class="col-md-4 mb-2">
                            <input asp-for="Surname" class="form-control" maxlength="100" />
                            <span asp-validation-for="Forename" class="text-danger"></span>
                        </div>
                    </div>
                </form>
            </div>

             <div class="modal-footer">

                 <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                 <button type="button" class="btn btn-primary" data-save="modal">Save</button>
             </div>
         </div>
     </div>
 </div>

我已將以下腳本添加到 site.js -

$(function () {
    var placeHolderElement = $('#PlaceHolderHere');
    $('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function(data) {
            placeHolderElement.html(data);
            placeHolderElement.find('.modal').modal('show');
        })
    })

    placeHolderElement.on('Click', '[data-save="modal"]', function (event) {
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();

        $.post(actionUrl, sendData).done(function (data) {
            placeHolderElement.find('.modal').modal('hide');
        })
    })
})

還有 controller -

       [HttpGet]
        public IActionResult Create()
        {
            List<Person> personList = _personRepository.Persons.ToList();
            ViewBag.PersonList = personList;

            List<Title> titleList = _titleRepository.Titles.ToList();
            ViewBag.TitleList = titleList;

            Person pers = new Person();
            return PartialView("_PersonModalPartial", pers);
        }

        [HttpPost]
        public IActionResult Create(Person pers)
        {
            _personRepository.CreatePerson(pers);

            List<Person> personList = _personRepository.Persons.ToList();
            ViewBag.PersonList = personList;

            List<Title> titleList = _titleRepository.Titles.ToList();
            ViewBag.TitleList = titleList;

            return PartialView("_PersonModalPartial", pers);
        }

我在主要形式中使用以下內容調用模態 -

<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
                        data-url="@Url.Action("Create")"  >Insert</button>

上面的代碼顯示了模式並填充了表格。

但是，當您按保存時沒有任何反應？

更新 2 -

我將模式中的按鈕更改為

input type="submit" value="Submit" name="Submit" class="btn btn-success float-right" id="SubmitForm" />

然后將我的模態表單中的表單標簽更改為 -

<form method="post" asp-controller="Admin" asp-action="Create">

那行得通。

現在我想知道如何使用調用按鈕的 data-url 部分將 model 的 id 值傳遞到模態表單中？

<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
                        data-url="@Url.Action("Create")"  >Insert</button>

Answer 1

您可以使用@Url.Action("Create",new { id=xxx}) ，這是一個演示：

Html（我使用“sss”作為id的樣本數據）：

<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
        data-url="@Url.Action("Create1",new { id="sss"})">
    Insert
</button>

js：

$('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            placeHolderElement.html(data);
            placeHolderElement.find('.modal').modal('show');
        })
    })

Controller：

public IActionResult Create1(string id) {
            return Ok();
        }

結果：

更新：如果你想使用@Model.Id ：

<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#personModal"
        data-url="@Url.Action("Create1",new { id=Model.Id})">
    Insert
</button>