ASP.NET Core MVC局部视图显示/隐藏切换的最佳实践

你的问题核心在于客户端交互的动态显示控制，用服务器端的ViewBag确实不合适——因为ViewBag是页面渲染时一次性生成的，没法响应页面加载后用户的点击操作。最直接高效的方案是用前端JavaScript控制DOM的显示隐藏，下面给你具体实现步骤：

步骤1：给编辑按钮添加标识 #

在你的_PartialPreview局部视图里，给编辑按钮加上唯一ID（或者类名），方便JS定位：

<button id="toggleEditBtn" class="btn btn-primary">编辑联系人</button>

步骤2：编写切换逻辑 #

在主页面Contact/Index的底部（或者单独的JS文件里）添加脚本，监听按钮点击事件，切换两个区域的显示状态：

原生JavaScript版本（无需依赖库）

document.addEventListener('DOMContentLoaded', function() {
    const toggleBtn = document.getElementById('toggleEditBtn');
    const previewSection = document.getElementById('sectionPreview');
    const editSection = document.getElementById('sectionEdit');

    toggleBtn.addEventListener('click', function() {
        // 切换显示/隐藏
        const isPreviewVisible = previewSection.style.display !== 'none';
        previewSection.style.display = isPreviewVisible ? 'none' : 'block';
        editSection.style.display = isPreviewVisible ? 'block' : 'none';
        
        // 更新按钮文字
        toggleBtn.textContent = isPreviewVisible ? '取消编辑' : '编辑联系人';
    });
});

jQuery版本（如果项目已引入jQuery）

如果你的项目已经用了jQuery，代码可以更简洁：

$(document).ready(function() {
    $('#toggleEditBtn').on('click', function() {
        // 切换两个区域的显示状态
        $('#sectionPreview, #sectionEdit').toggle();
        // 切换按钮文字
        $(this).text($(this).text() === '编辑联系人' ? '取消编辑' : '编辑联系人');
    });
});

进阶：编辑完成后刷新预览（可选） #

如果希望编辑提交后自动切换回预览并更新内容，可以给编辑表单添加AJAX提交逻辑：

// 假设编辑表单的ID是contactEditForm
$('#contactEditForm').on('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交
    const formData = $(this).serialize();
    
    $.post($(this).attr('action'), formData)
        .done(function(updatedPreviewHtml) {
            // 用返回的新预览内容替换旧的
            $('#sectionPreview').html(updatedPreviewHtml);
            // 切换回预览模式
            $('#sectionPreview').show();
            $('#sectionEdit').hide();
            $('#toggleEditBtn').text('编辑联系人');
        })
        .fail(function() {
            alert('保存失败，请稍后重试');
        });
});

这里需要你的控制器Edit Action在保存成功后，返回_PartialPreview局部视图的HTML内容。

为什么ViewBag不行？ #

简单来说：ViewBag是服务器端渲染阶段生成的，页面一旦加载完成，它的值就固定了。而用户点击编辑按钮是客户端交互阶段的操作，服务器端没法实时感知并修改已渲染的页面样式——这种场景下，前端JS才是正确的解决方案。

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