ASP.Net Core 3.1 - passing value to partial view Modal with Ajax?

Question

I want to delete a record from table and I have to send the ID of that record to the modal, how I do this?

main View :

<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" asp-route- 
                   category="@item.CategoryId" title="delete" class="btn btn-danger btn- 
                   xs">delete</a>
                 </td>
            </tr>
                       
         }
  </tbody>

Partial view as a Modal:

@await Html.PartialAsync("_CreateMainCategory")

You can try to dynamically load partial view in modal in ajax success callback function. — Fei Han
– Fei Han, Commented Apr 5, 2021 at 5:07
can u help me with code? I'm not good in ajax Hi @AliKhansari, you can check the sample code that I shared. — Fei Han
– Fei Han, Commented Apr 5, 2021 at 5:19

Fei Han · Accepted Answer · 2021-04-05 05:18:28Z

2

I want to delete a record from table and I have to send the ID of that record to the modal, how I do this?

To achieve your requirement, you can try to dynamically load partial view in your modal, like below.

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

Html code of modal popup

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

JS function

<script>
    function Func_LoadPv(Cid) {
        $.get("/Home/ShowPartialView?CategoryId=" + Cid, function (res) {
            $("div.modal-body").append(res);
        });
    }
</script>

Action method

public IActionResult ShowPartialView(int CategoryId)
{
    return PartialView("_CreateMainCategory", CategoryId);
}

answered Apr 5, 2021 at 5:18

Fei Han

28k1 gold badge35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

AliKhansari Over a year ago

The modal opens but does not enter the controller

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

AdminPanel is area

AliKhansari Over a year ago

there is error in Console : Uncaught SyntaxError: Invalid or unexpected token

Fei Han Over a year ago

Uncaught SyntaxError: Invalid or unexpected token In Console tab, you can try to find which code snippet cause the error.

AliKhansari Over a year ago

Displays the

<a data-toggle="modal" data-target="#Deletemodal" onclick="Func_LoadPv(59ccfd4a-39cd-4c1a-813b-0405b05d0eb4)" class="btn btn-danger btn-xs">delete</a>

tag as an error

Fei Han Over a year ago

Ok, it seems that the CategoryId you passed would be a Guid, you can try to modify the code as onclick="Func_LoadPv('@item.CategoryId')". And modify your action method accept a Guid-type parameter.

|

Collectives™ on Stack Overflow

ASP.Net Core 3.1 - passing value to partial view Modal with Ajax?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related