How do I load a partial View (modal popup) in MVC Areas I'm using Visual Studio 2022 .NET 7

Question

Here is what I have tried

The code runs perfectly until I try to implement it in my ÄdminPortal MVC Area, then the Partial View doesn't popup at all. I'm sure I've missed something simply but being new to this I have been unable to find the answer. TIA for your help

My Controller

                using Microsoft.AspNetCore.Mvc;
                using Quotemaster.Areas.AdminPortal.Models;
                using Quotemaster.data;


                namespace Quotemaster.Areas.AdminPortal.Controllers
                {
                    [Area("AdminPortal")]
                    public class MakesController : Controller
                    {
                        private readonly QMContext _context;

                        public MakesController(QMContext context)
                        {
                            _context = context;
                        }
     
                        public IActionResult Index()
                        {
                            var makesList = _context.Makes.ToList();
                            return View(makesList);
                        }
                        [HttpGet]
                        public IActionResult Create()
                        {

                            Makes makes = new Makes();
                            return PartialView("_MakesPartial", makes);
                        }
                        [HttpPost]
                        public IActionResult Create(Makes makes)
                        {
                            _context.Makes.Add(makes);
                            _context.SaveChanges(); 
                            var makesList = _context.Makes.ToList();

                            return View(makesList);
                        }
                    }
                }

My Index page

            @model IEnumerable<Quotemaster.Areas.AdminPortal.Models.Makes>

            @{
                ViewData["Title"] = "Index";
                Layout = "~/Views/Shared/_AdminLayout.cshtml";
            }
            <div id="AddMake"></div>

            <button type="button" class="btn btn-warning" data-bs-toggle="ajax-modal" data-bs-target="#AddMakes"
                    data-url="@Url.Action("Create")">
                Add Make
            </button>



            <table class="table table-hover">
                <thead style="background-color:orange">
                    <tr>
                        <th>
                          Make
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
            @foreach (var item in Model) {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Make)
                        </td>
                        <td>
                            <a asp-action="Edit" asp-route-id="@item.MakeId">Edit</a> |
                            <a asp-action="Details" asp-route-id="@item.MakeId">Details</a> |
                            <a asp-action="Delete" asp-route-id="@item.MakeId">Delete</a>
                        </td>
                    </tr>
            }
                </tbody>
            </table>

            <script type="text/javascript">
    
                //Show Add Make Modal
                $(function () {
                    var AddMakesElement = $('#AddMakes');

                    $('button[data-bs-toggle="ajax-modal"]').click(function (event) {
                        var url = $(this).data('url');
                        $.get(url).done(function (data) {
                            AddMakesElement.html(data);
                            AddMakesElement.find('.modal').modal('show');
                        })
                    })

                    //Save Add Makeform data
                    AddMakesElement.on('click', '[data-bs-save="modal"]', function (event) {

                        var form = $(this).parents('.modal').find('form');
                        var actionUrl = form.attr("action");
                        var sendData = form.serialize();
                        $.post(actionUrl, sendData).done(function (data) {
                            AddMakesElement.find('.modal').modal('hide');
                            location.reload(true);
                        })
                    })

                })

            </script>

My partial View

@model Quotemaster.Areas.AdminPortal.Models.Makes
            //partial View
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <title>Add Makes</title>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
            </head>

            <body>

                <!-- The Modal -->
                <div class="modal fade" id="AddMakes" name="AddMakes">
                    <div class="modal-dialog">
                        <div class="modal-content">

                            <!-- Modal Header -->
                            <div class="modal-header" style="background-color:orange">
                                <h4 class="modal-title">Add Makes</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>

                            <!-- Modal body -->
                            <div class="modal-body">
                                <form asp-action="Create" enctype="multipart/form-data" method="post">
                                    <div class="form-group">
                                        <label asp-for="Make"></label>
                                        <input asp-for="Make" class="form-control form-control-sm">
                                        <span asp-validation-for="Make" class="text-danger"></span>
                                    </div>
                                </form>
                            </div>

                            <!-- Modal footer -->
                            <div class="modal-footer">
                                <button class="btn btn-warning">Add Make</button>
                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>

                                @*<div input typeof="hidden" id="urlMakesData"value="@Url.Action("AddMakes","Ajax")"></div>*@
                            </div>
                        </div>
                    </div>
                </div>
            </body>

            </html>

Answer 1

1.You want to call the Create action and render the html to the following div:

<div id="AddMake"></div>

But you get the wrong element in js herevar AddMakesElement = $('#AddMakes');, it should be AddMake instead of AddMakes.Change to:

var AddMakesElement = $('#AddMake');

2.Be sure your partial view located in one of the following location:

/Areas/AdminPortal/Views/Makes/_MakesPartial.cshtml
/Areas/AdminPortal/Views/Shared/_MakesPartial.cshtml
/Views/Shared/_MakesPartial.cshtml