Post ID to Action in modal

miladel

Member
Joined
Aug 16, 2020
Messages
14
Programming Experience
Beginner
Dear All,
I'm almost new to Razor pages and what I need to do is to set a bool value in a database after the user confirms operation on a modal.
The table model uses Dapper to query the SQL database. The problem is that, when I click on Close in the table, I can get MotorServiceId in the modal but I can't send it to OnPostConfirmCloseAsync Task to update the database and close the service.
ModelState validation goes false and operation fails.
Here is the code ralated parts:
After the user click on Close button, a modal will be shown:
Table row Service Close:
                    <td>
                        <button type="button" class="btn btn-sm btn-outline-secondary CloseService" data-id="@item.MotorServiceId" data-bs-toggle="modal" data-bs-target="#Modal2">
                            Close
                        </button>
                    </td>

And this is the modal:

Modal:
    <div class="modal fade" id="Modal2" tabindex="-1" aria-labelledby="Modal2Label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="Modal2Label">Close service</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>You are about to close this motor service. Are you sure?</p>
                    <form method="Post">
                        <input type="hidden" asp-for="MotorService.MotorServiceId" id="eventId"/>
                        <span id="idHolder"></span>
                        <div class="row mt-5">
                            <div class="row">
                                <div class="col-6">
                                    <input type="submit" asp-page-handler="ConfirmClose" class="btn btn-outline-primary form-control" value="Yes"/>
                                </div>
                                <div class="col-6">
                                    <a asp-page="Index" class="btn btn-outline-dark form-control">No</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


Scripts for pass data to modal:
@section scripts{
    <script>
        $(document).on("click", ".CloseService", function () {
            var eventId = $(this).data('id');
            $('#idHolder').html( eventId );
        });
    </script>
}


Task for update database:
        public async Task<IActionResult> OnPostConfirmCloseAsync()
        {
            if (ModelState.IsValid)
            {
                MotorService.IsClosed = true;
                await _motorServiceRepository.UpdateCloseAsync(MotorService);
            }
            return RedirectToPage("Details", new { id = Motor.MotorId });
        }
 
Back
Top Bottom