主页 / coding / 问题 / 78872075
Accepted
user20408154
Asked: 2024-08-15 00:39:19 +0800 CST

简单模式弹出窗口在 ASP.NET Core 5 中不起作用

  • 772

我正在尝试制作一个简单的模态弹出窗口来显示新闻文章。这是在主页上。我显示文章，如果文章长度超过 200 个字符，我会用一个按钮替换剩余的字符，该按钮应该会显示完整的文章弹出窗口。

我正在使用 ASP.NET Core 5。

主页：

@{
    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>

我的模态页面（_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>

这是我的HomeController：

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

一切看起来都很好。“更多”按钮按时出现。但按下该按钮时什么也没发生。

有什么原因吗？我不明白为什么它不起作用。请大家给予帮助。

c#

1 个回答

  1. Best Answer

    bootstrap modal 使用 id 与按钮匹配，在您的场景中，我们使用 idforeach来呈现项目列表，因此我们也应该有多个模态内容。使用下面的我的代码。并在部分视图中使用。<div class="modal fade" id="[email protected]">

    @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="#[email protected]"
                            @* 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>

    这会导致页面中添加大量 html 内容。这是我的测试结果。这可能不是您想要的，所以我担心您可以使用部分视图来动态显示内容。

    在此处输入图片描述

    然后代码应该如下所示。我们为按钮添加一个点击事件，然后它将转到控制器获取模态 html 内容。模态内容是动态生成的，然后它将被放置在区域中#popup。然后我们调用modal.show以显示模态内容。

    @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>
}
    • 0

相关问题