Simple Modal Popup not working ASP.NET Core 5

Question

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 this is my HomeController:

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

Answer 1

bootstrap modal uses id to match with button, in your scenario, we are using foreach to render a list of items so that we should also have multiple modal contents. With my codes below. And use <div class="modal fade" id="homeNewsModal_@Model.Id"> in partial view.

@using WebAppMvc.Controllers
@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>
                    @if (article.Content.Length > 10)
                    {
                    <p>@article.Content.Substring(0, 10)...</p>
                    <button type="button" class="btn-sm btn-primary float-right"
                            data-bs-toggle="modal" data-bs-target="#homeNewsModal_@article.Id"
                            @* data-url="@Url.Action("homeNewsModal", "Modal", new { id = article.Id })" *@
                            title="Click to see full news article.">
                        more
                    </button>
                        @await Html.PartialAsync("_HomeNewsModal", article)
                    }
                    else
                    {
                    <p>@article.Content</p>
                    }

            </div>
        }
    </div>
</div>

This will cause much html content added into the page. Here's my test result. This might not be what you want, so that I'm afraid that you could use partial view to display content dynamically.

Then the code should look like below. We add a click event for the button, then it will go to the controller to get the modal html content. The modal content is generated dynamically, then it will be placed in the #popup area. Then we call modal.show to show the modal content.

@using WebAppMvc.Controllers
@model FNSDNewsViewModel

<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>
                    @if (article.Content.Length > 10)
                    {
                    <p>@article.Content.Substring(0, 10)...</p>
                    <button type="button" class="btn-sm btn-primary float-right"
                            data-toggle="ajax-modal"
                            data-url="@Url.Action("homeNewsModal", "Modal", new { id = article.Id })"
                            title="Click to see full news article.">
                        more
                    </button>
                        @* @await Html.PartialAsync("_HomeNewsModal", article) *@
                    }
                    else
                    {
                    <p>@article.Content</p>
                    }

            </div>
        }
    </div>
</div>

<div id="popup"></div>

@section Scripts{
    <script>
        $('button[data-toggle="ajax-modal"]').click(function (event) {
            var url = $(this).data('url');
            $.get(url).done(function (data) {
                $("#popup").html(data);
                $('#homeNewsModal').modal('show');
            })
        })
    </script>
}