I want to delete a record from table and I sent CategoryId with this code: Main view :

<a data-toggle="modal" data-target="#Deletemodal" onclick="Func_LoadPv('@item.CategoryId')" class="btn btn-danger btn-xs">delete</a>

    function Func_LoadPv(Cid) {
        $.get("/AdminPanel/Category/ShowPartialView?CategoryId="   Cid, function (res) {
            $("div.modal-body").append(res);
        });
        
    }

Controller :

     public IActionResult ShowPartialView(Guid CategoryId)
    {
        return PartialView("_DeleteMainCategory", CategoryId);
    }

How can I get this value that is sent from the controller to the partial Modal?

And the problem I have is that the modal only opens once ?

CodePudding user response：

How can I get this value that is sent from the controller to the partial Modal?

You can specify a model for your partial view _DeleteMainCategory.cshtml, like below.

@model Guid

<h1>DeleteMainCategory Partial View</h1>

@*content here*@

<h2>@Model</h2>

the problem I have is that the modal only opens once

The following sample with testing data work well for me, you can check and compare it with yours.

<table>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td> @rowCount</td>
                <td>@item.CategoryTitle</td>
                <td>@item.IconCategory</td>
                <td>
                    <a data-toggle="modal" data-target="#Deletemodal" title="delete" 
                       class="btn btn-danger btn-xs" onclick="Func_LoadPv('@item.CategoryId')">delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

<div id="Deletemodal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                @*modal body here*@
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

@section scripts{
    <script>
        function Func_LoadPv(Cid) {
            $.get("/AdminPanel/Category/ShowPartialView?CategoryId="   Cid, function (res) {

                $("div.modal-body").html(res);
            });
        }
    </script>
}

Test Result

CodePudding user response：

I solved

Modal :

<div id="deletemodal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">delete category</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div id="bodyModal" class="modal-body">

        </div>
       
    </div>
</div>

JQuery :

  function DeleteCategory(id) {
        $.ajax({
            url: "/AdminPanel/Category/DeleteCategory/"   id,
            type: "Get",
            data: {}
        }).done(function (result) {
            $('#deletemodal').modal('show');
            $('#bodyModal').html(result);
        });
    }

Controller :

  public IActionResult DeleteCategory(Guid? id)
    {
        return View();
    }

    [HttpPost]
    public IActionResult DeleteCategory(Guid id)
    {
        _admin.DeleteMainCategory(id);

        return RedirectToAction("ShowMainCategory", "Category");
    }

Partial View :

<form asp-action="DeleteCategory" class="form-padding">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <h5 class="text-center">Are You Sure ?</h5>
</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-info waves-effect">delete</button>
    <button type="button" class="btn btn-danger waves-effect"
            data-dismiss="modal">
        cancel
    </button>
</div>