Pass an id value from the model into a modal form using data-url="@Url.Action"

Question

I have a form that displays a persons title and name.It shows a lot more than that, but this is the bit I am asking about.

I have a person table.

If the user wants to change the person details, is it possible to open up a pop up modal form that lists all the persons in the person table, so that the user can either select an existing person, or insert a new person and when the user closes the pop up, the main form is populated with the selected/new persons details?

I am using ASP.NET Core MVC 5 and EF Core 5.

Any help or pointing to a tutorial would be a great help, thanks.

UPDATE -

I have tried the following -

I have created a modal partial view -

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

I have added the following script to 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');
        })
    })
})

And the 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);
        }

I call the modal with the the following in my main form -

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

The above code shows the modal and populates the table.

However nothing happens when you press save??

UPDATE 2 -

I changed the button in the modal for to

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

And then changed the form tag in my modal form to -

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

That worked.

Now I am wondering how you can pass the id value of the model into the Modal form using the data-url part of the calling button?

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

Answer 1

You can use @Url.Action("Create",new { id=xxx}) ,here is a demo:

Html(I use "sss" as a sample data of 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();
        }

result:

Update: If you want to use @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>