How to pass a model value to popup window in ASP.NET MVC

Question

In ASP.NET MVC, you can pass values from a view to a controller. However in my case I don't want a new page. What I wish is, when I click to a button a popup window shows up and I would like to delete the record whenever I click the delete button on the popup window.

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td width="50%">
                @item.TeamName
            </td>
            <td>
                @item.TeamLeaderId
            </td>
            <td>
                @item.TeamEstablished
            </td>
            <td>
                <a asp-controller="Team" asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary"><i class="bi bi-pencil">Edit</i></a>
            </td>
            <td>
                <a data-bs-toggle="modal" data-bs-target="#myModal" class="btn btn-danger">
                    <i class="bi bi-pencil">Remove</i>
                </a>
            </td>
        </tr>
    }
</tbody>

Above, there is how I get the value in a foreach loop from the model. In Remove part, whenever user clicks on the button a popup windows shows up in the screen like this:

I need two things in here. First, instead of "Do you really want to remove This Team" it should be the exact team name which is 'mobileTeam' so the result should be 'Do you really want to remove mobileTeam'.

Second, when remove button is clicked it should trigger the post action method in controller and remove the record from database. It should pass the id of the team to the post action method. Here is how my post method is.

public IActionResult Delete(int? id)
{
        if (id == null)
        {
            return NotFound();
        }

        var obj = applicationDbContext.Teams.FirstOrDefault(u => u.Id == id);

        if (obj == null)
        {
            return NotFound();
        }

        return View(obj);
}

This is my model popup:

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            @*<button type="button" class="close" data-bs-dismiss="modal">&times;</button>*@
            <h4 class="modal-title">Delete Record</h4>
        </div>
        <div class="modal-body">
            <p>Do you really want to remove this team?</p>
        </div>
        <div class="modal-footer">
            <div class="container">
                <button type="button" class="btn btn-danger"><i class="bi bi-pencil">Remove</i></button>
                <button type="button" class="btn btn-secondary " data-bs-dismiss="modal" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
  </div>
</div>

Stalidald · Accepted Answer · 2023-02-23T18:19:23.980

Try to check this question. It solves the first part of yours. First, you should add

data-id="@item.TeamName"

Then, you have to add extra Javascript to your code.

$('#myModal').on('show.bs.modal', function(e) {
    var teamName = $(e.relatedTarget).data('teamName');
    $(e.currentTarget).find('input[name="teamName"]').val(teamName);
});

As for the API call, try this

In your case it would look something like this:

onClick='return DeleteTeam()'

At JS, do something like this:

function deleteTeam() {
            $.ajax({          
                type: "DELETE",            
                URL: "/api/{ControllerName}/{Endpoint}",
                data: { id: $('#TeamId').val() },
                contentType: "data/json; charset=utf-8",  
                success: function (result) {
                    window.location.href = "{yourApiAddress}" + $('#AkontasId').val();
                },
                error: function () {
                    alert("error");
                }
            });
        }

How to pass a model value to popup window in ASP.NET MVC

1 Answers1