需求：点击面板列表项/标题时根据Survey状态跳转对应页面

嗨，我帮你梳理一下实现思路和代码，刚好我之前处理过类似的Bootstrap列表项跳转需求～

核心思路是：给可点击的元素（列表组项和蓝色标题）绑定点击事件，通过数据属性存储Survey的状态和ID，然后根据状态判断跳转的目标页面，同时要处理好原来的弹窗触发逻辑冲突问题。

1. 调整Razor HTML结构 #

先给列表组项div和蓝色标题加上用于识别的类名，以及存储关键信息的data-*属性，这样JS能轻松拿到需要的状态和ID：

<div class="panel-body">
    @foreach (var item in Model.PreviousPollSurveyDetails)
    {
        <!-- 给整个列表项div加点击钩子和数据属性 -->
        <div class="list-group-item survey-clickable" 
             data-survey-id="@item.SurveyId" 
             data-survey-status="@item.Status">
            <!-- 蓝色标题也加上相同的标识，确保点击标题也能触发跳转 -->
            <h4 class="list-group-item-heading survey-title" 
                data-survey-id="@item.SurveyId" 
                data-survey-status="@item.Status">
                @item.SurveyName
            </h4>
            <!-- 原来的内容保留，比如状态显示、弹窗触发按钮 -->
            <p class="list-group-item-text">
                Status: @item.Status
                <!-- 保留原来的弹窗触发链接，但要加个类名用于后续阻止事件冒泡 -->
                <a href="#" data-toggle="modal" data-target="#surveyModal" class="survey-modal-trigger">View Details</a>
            </p>
        </div>
    }
</div>

2. 编写JavaScript逻辑 #

监听点击事件，读取状态后跳转，同时处理弹窗按钮的事件冲突：

// 等DOM加载完成再绑定事件
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有可触发跳转的元素
    const clickableElements = document.querySelectorAll('.survey-clickable, .survey-title');
    
    clickableElements.forEach(el => {
        el.addEventListener('click', function(e) {
            // 阻止事件冒泡，避免触发父元素或其他绑定的事件
            e.stopPropagation();
            
            // 从数据属性里拿Survey的ID和状态
            const surveyId = this.dataset.surveyId;
            const status = this.dataset.surveyStatus;
            
            // 根据状态确定跳转地址
            let targetUrl;
            if (status === 'Completed') {
                // 替换成你项目里的Show Result页面路由
                targetUrl = `/Surveys/ShowResult/${surveyId}`;
            } else if (status === 'Incomplete') {
                // 替换成你项目里的Complete Survey页面路由
                targetUrl = `/Surveys/CompleteSurvey/${surveyId}`;
            }
            
            // 有目标地址就跳转
            if (targetUrl) {
                window.location.href = targetUrl;
            }
        });
    });
    
    // 处理弹窗触发按钮，防止点击弹窗按钮时触发跳转逻辑
    const modalTriggers = document.querySelectorAll('.survey-modal-trigger');
    modalTriggers.forEach(trigger => {
        trigger.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });
});

几个关键点说明 #

• 数据属性的使用：用data-*存储Survey的ID和状态，比硬编码到JS里更灵活，也符合HTML语义化规范。
• 事件冒泡处理：必须加e.stopPropagation()，否则点击弹窗按钮时，会触发父元素的跳转逻辑，导致弹窗刚弹出来就跳走了。
• 路由替换：记得把代码里的/Surveys/ShowResult/${surveyId}和/Surveys/CompleteSurvey/${surveyId}替换成你项目实际的控制器和路由路径，比如如果是ASP.NET Core的话，也可以用@Url.Action()生成路由，确保路径正确。

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