ASP.NET Core 5简易模态弹窗无法触发问题求助

问题概述 #

在ASP.NET Core 5项目首页实现新闻展示功能：新闻内容超过200字符时截断并显示「more」按钮，点击按钮弹出模态框展示完整文章。目前「more」按钮正常显示，但点击后无任何反应。

问题排查与修复步骤 #

1. 缺少AJAX加载模态框的JavaScript逻辑 #

data-toggle="ajax-modal"是自定义属性，Bootstrap本身不支持这个触发方式，需要编写JavaScript代码监听按钮点击事件，通过AJAX加载部分视图并渲染模态框。

在首页视图底部（或布局页的@section Scripts区块）添加以下脚本：

$(function () {
    $('button[data-toggle="ajax-modal"]').click(function () {
        var url = $(this).data('url');
        var targetModal = $(this).data('target');
        
        $.get(url)
            .done(function (modalContent) {
                $('#ModalPlaceHolder').html(modalContent);
                $(targetModal).modal('show');
            })
            .fail(function () {
                alert('加载新闻详情失败，请稍后重试');
            });
    });
});

2. 部分视图模型引用错误 #

模态框部分视图（_HomeNewsModal.cshtml）中直接使用model.Title等写法，Razor视图无法识别模型属性，必须添加@符号：

修复后的部分视图代码：

@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">@Model.Title</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="news-article">
                    <p>@Model.PublishDate.ToString("dd, MMM, yyyy")</p>
                    <p>@Model.Content</p>
                </div>
            </div>

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

注：移除了不必要的<form>标签，模态框仅用于展示内容，无需表单结构

3. 首页视图HTML结构无效 #

首页视图中存在<p>标签嵌套<p>的问题，会导致HTML结构异常，影响事件绑定：

原代码错误片段：

<p>
    @if (article.Content.Length > 200)
    {
        <p>@article.Content.Substring(0, 200)...</p>
        <!-- 按钮代码 -->
    }
    else
    {
        <p>@article.Content</p>
    }
</p>

修改为：

<div class="news-content">
    @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>

4. 确认依赖库正确引入 #

确保项目中已正确引入jQuery和Bootstrap的资源（CSS和JS），模态框功能依赖这两个库：

<!-- 布局页<head>中引入Bootstrap CSS -->
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />

<!-- 布局页<body>末尾引入jQuery和Bootstrap JS -->
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js"></script>

修复后验证 #

1. 启动项目访问首页
2. 点击长内容新闻的「more」按钮，确认模态框正常弹出并显示完整新闻
3. 检查短内容新闻是否正常展示全部内容

内容的提问来源于stack exchange，提问作者user20408154