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