is it possible to pass Model to Partial View using JavaScript?

Question

I need to pass a Model to a partial view. I first pass a value of ID, then I get the Model I need based on that ID.

The scenario: I have a table with a delete button in each row. I need to display a confirmation bootstrap modal that includes a Model.

The problem, it's not working and I don't know if there another way to do that or not

In the section of javascript BPCategoriesId not recognized

Here is my code attempt.

Delete Button

@foreach (var item in Model.BPCategories)
{
...
   <button type="button" data-id="@item.Id" class="btn btn-outline-danger w-50" data-bs-toggle="modal" data-bs-target="#exampleModal">
       Delete
   </button>
...
}

Bootstrap Modal

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">


                    <div id="ModelLoad">
                         <!--here I need to load my partial view with a model using JS-->
                    </div>

                    <!--<partial name="Delete" model="@Model.BPCategories.Where(id => id.Id == returnID()).FirstOrDefault()" />-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <form asp-action="Delete">
                        <input type="hidden" asp-for="Id" />
                    </form>
                </div>
            </div>
        </div>
    </div>

JavaScript

<script>
    $(document).ready(function () {
        var btns = document.querySelectorAll('[data-id]');

        for (let btn of btns) {
            btn.addEventListener('click', () => {

                let BPCategoriesId = btn.dataset['id'];
                var jsonModel = @Html.Raw(Json.Serialize(@Model.BPCategories.Where(id => id.Id == BPCategoriesId).FirstOrDefault()));
                $("#ModelLoad").load('@Url.Action("Delete", "BootstrapCategories")', jsonModel);

            });
        }

    });

</script>

You can submit a model via JavaScript AJAX to your server side application which renders a partial view using that model data. Here's one example https://stackoverflow.com/a/1570138/2030565 and here's another https://stackoverflow.com/a/11947606/2030565 — Jasen, Jun 30 '21 at 01:43

score 0 · Accepted Answer · answered Jul 02 '21 at 04:53

@model LoadPartialView.Models.TestViewModel

@foreach (var item in Model.BPCategories)
{
    <p>
        <button type="button" data-id="@item.Id" class="btn btn-outline-danger w-50" data-toggle="modal" data-target="#exampleModal">
            Delete
        </button>
    </p>
}

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div id="modelLoad">
                    <!--here I need to load my partial view with a model using JS-->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <form asp-action="Delete">
                    <input type="hidden" asp-for="Id" />
                </form>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
    $(function () {
        var btns = document.querySelectorAll('[data-id]');

        for (let btn of btns) {
            btn.addEventListener('click', () => {
                let bpCategoryId = btn.dataset['id'];
                $("#modelLoad")
                    .load('@Url.Action("Delete", "BootstrapCategories")', {
                        bpCategories: JSON.parse('@Html.Raw(Json.Encode(Model.BPCategories))'),
                        bpCategoryId: bpCategoryId
                    });
            });
        }
    });
    </script>

}

Demo is pushed to GitHub.

is it possible to pass Model to Partial View using JavaScript?

1 Answers1