Modal Popup Not working when i use it in Area

Question

I am Using Area in .Net Core . And the same code works when it is not in Area. I believe i am using everything correctly, but is it because i use Area. and it doesnt work in area. or is it because i have a @Html.Partial tag used . Please help me out .

The Modal Popup doesnt show up in this project. In this project I use Areas. Since it wasn't working with areas, I created a separate project to test it, which doesn't have an Area, and there it worked. So the AddNewLink Action is in LinksController under the area Creator, the Url is going to be Creator/Links/AddNewLink. But it doesnt popup at all when run in an Area.

Controller :

public IActionResult AddNewLink()
        {
            Links link = new Links();  
            return PartialView("_LinksPartial", link);
        }

** _LinksPartial.cshtml **

@model Links

<div class="modal fade" id="addNewLink">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addLinkLabel">Create New Link</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>x</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" action="AddNewLink">
                    <div class="form-group">
                        <label asp-for="linkName">Link Name</label>
                        <input asp-for="linkName" type="text" class="form-control" id="link-name"/>
                        <span asp-validation-for="linkName" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="LinkUrl" class="col-form-label">URL</label>
                        <input asp-for="LinkUrl" class="form-control" id="link-url"/>
                        <span asp-validation-for="LinkUrl" class="text-danger"></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-save="modal">Add</button>
            </div>
        </div>
    </div>
</div>

JS:

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

    PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var url = "/Links/" + actionUrl;
        var sendData = form.serialize();
        $.post(url, sendData).done(function (data) {
            PlaceHolderElement.find('.modal').modal('hide');
        })
    })
})

Index.Cshtml

@model IEnumerable<Links>
@Html.Partial("_Nav-tabPartial")
@{
    ViewData["Title"] = "Links";
}
<div>
    <h1>Links</h1>
</div>
<div id="PlaceHolderHere"></div>

@{
    string[] className = { "border-success", "border-danger", "border-info", "border-light", "border-dark" };
    Random RD = new Random();
}

<div class="container p-3">
    <div class="col">
        @if (Model.Count() > 0)
        {
            @foreach (var obj in Model)
            {
                <div class="card text-dark @(className[RD.Next(0,2)]) mb-3" style="max-width: 40rem;          max-height: 10rem">
                    <div class="card-header">
                        <div class="text-end col">
                            <button class="btn btn-outline-secondary" data-toggle="ajax-modal" data-target="#addNewLink" 
                                    data-url="@Url.Action($"EditLink/{obj.id}")"><i class="bi bi-pencil"></i></button>
                            <button class="btn btn-outline-danger" data-toggle="ajax-modal" data-target="#addNewLink"
                                    data-url="@Url.Action($"DeleteLink/{obj.id}")"><i class="bi bi-x-lg">
                                </i>
                            </button>
                        </div>
                        <div class="text-start col-6">
                            <a class="text-start" [email protected] style="text-decoration:none"> <img [email protected] width="28" />&nbsp; @obj.linkName</a>
                        </div>                        
                    </div>
                    <div class="card-body">
                        <a class="card-text text-dark" [email protected]>@obj.LinkUrl</a>
                    </div>
                </div>


            }
        }
        else
        {
            <h3 class="text text-danger">Opps!!! You dont have any links Added</h3>
        }
        <div class="col pt-6 text-center">
            <button type="button" class="btn btn-outline-primary" data-toggle="ajax-modal" 
            data-target="#addNewLink" data-url="@Url.Action("AddNewLink")"><img width="48px" src="~/images/icons8-add-link-64.png" alt="" /></button>
        </div>
    </div>
</div>

Any thoughts on how to fix this so that it runs when in an area?

Answer 1

Here are whole working steps you could follow:

1.Model

public class Links
{
    public int id { get; set; }
    public string LinkUrl { get; set; }
    public string ImageUrl { get; set; }
    public string linkName { get; set; }
}

2.View(Areas/Creator/Views/Links/Index.cshtml)

Note: JS code exists in @section Scripts{} in the Index.cshtml

@model IEnumerable<Links>
<div id="PlaceHolderHere"></div>
@{
    string[] className = { "border-success", "border-danger", "border-info", "border-light", "border-dark" };
    Random RD = new Random();
}
<div class="container p-3">
    <div class="col">
        //.....
        <div class="col pt-6 text-center">
            <button type="button" class="btn btn-outline-primary" data-toggle="ajax-modal"
                    data-target="#addNewLink" data-url="@Url.Action("AddNewLink")">
                <img width="48px" src="~/images/icons8-add-link-64.png" alt="" />
            </button>
        </div>
    </div>
</div>    
@section Scripts
{
    <script>
        $(function () {
            var PlaceHolderElement = $('#PlaceHolderHere');
            $('button[data-toggle="ajax-modal"]').click(function (event) {
                var url = $(this).data('url');
                $.get(url).done(function (data) {
                    PlaceHolderElement.html(data);
                    PlaceHolderElement.find('.modal').modal('show');
                })
            })

            PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
                var form = $(this).parents('.modal').find('form');
                var actionUrl = form.attr('action');
                var url = "/Links/" + actionUrl;
                var sendData = form.serialize();
                $.post(url, sendData).done(function (data) {
                    PlaceHolderElement.find('.modal').modal('hide');
                })
            })
        })
    </script>
}

3.Partial View locates in

/Areas/Creator/Views/Links/_LinksPartial.cshtml  
/Areas/Creator/Views/Shared/_LinksPartial.cshtml
/Views/Shared/_LinksPartial.cshtml

If your file does not located in these folders, you need change your returned partial view in controller action with detailed location. For example:

return PartialView("/Views/Home/_LinksPartial.cshtml", link);

4.Controller

[Area("Creator")]
public class LinksController : Controller
{
    public IActionResult Index()
    {   
        //hard coded the model for easy testing....
        var model = new List<Links>()
        {
            new Links(){id=1,ImageUrl="xx",linkName="link1",LinkUrl="xx"},
            new Links(){id=2,ImageUrl="xx",linkName="link2",LinkUrl="xx"},
            new Links(){id=3,ImageUrl="xx",linkName="link3",LinkUrl="xx"}
        };
        return View(model);
    }
    public IActionResult AddNewLink()
    {
        Links link = new Links();
        return PartialView("_LinksPartial", link);
    }
}

Sample Location: