I am trying to have a simple modal popup showing news articles. This is on the home page. I show articles, if they are longer than 200 characters I replace the remaining characters with a button that should show a pop up of the full article.

I am using asp.net Core 5.

Home page:

@{
    ViewData["Title"] = "Home Page";
}

@model FNSDNewsViewModel

<div id="ModalPlaceHolder"></div>

<div class="text-center">
    <h1 class="display-4">Welcome to the FNSD system.</h1>


    <p>@DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")</p>

    <h2>Latest News</h2>
    <div class="news-list">
        @foreach (var article in Model.NewsArticles)
        {
            <div class="news-article">
                <h3>@article.Title</h3>
                <p>@article.PublishDate.ToString("dd, MMM, yyyy")</p>
                <p>
                    @if (article.Content.Length > 200)
                    {
                        <p>@article.Content.Substring(0, 200)...</p>
                        <button type="button" class="btn-sm btn-primary float-right"
                                data-toggle="ajax-modal" data-target="#homeNewsModal"
                                data-url="@Url.Action("homeNewsModal", "Home", new { id = article.Id })"
                                title="Click to see full news article.">
                            more
                        </button>
                    }
                    else
                    {
                        <p>@article.Content</p>
                    }
 
            </div>
        }
    </div>

</div>

My modal page (_HomeNewsModal.cshtml):

@model FNSDNewsViewModel

<div class="modal fade" id="homeNewsModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="newsModalLabel">News Article</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span>x</span>
                </button>
            </div>

            <div class="modal-body">
                <form class="form-group">
                    <div class="news-list">
                        <div class="news-article">
                            <h3>model.Title</h3>
                            <p>model.PublishDate.ToString("dd, MMM, yyyy")</p>
                            <p>model.Content</p>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-danger float-left" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

and my controller – (HomeController.cs):

[HttpGet]
public IActionResult HomeNewsModal(int id)
{
    FNSDNewsViewModel viewModel = _FNSDNewsControllerHelper.MapToViewModel(id).Result;
    return PartialView("_HomeNewsModal", viewModel);
}

Every looks fine. The “more” button appears, when it should. But nothing happens when you press that button.

Any reason why? I can’t see why it shouldn’t work. Please, all help appreciated.