在MVC应用的.cshtml中无需Bootstrap及NuGet包实现自定义带表单弹窗可行吗？

当然可以！完全不用依赖Bootstrap或者NuGet包，你自己用原生JS、CSS就能在.cshtml里实现带表单的对话框，和你在普通.html里的思路其实差不多，只是要稍微适配下MVC的环境~ 我给你一个完整的可复用示例，你可以直接参考：

你可以直接把这段代码放在视图文件里，和普通HTML写法一致，也可以结合Razor语法（比如绑定模型字段）：

<!-- 触发对话框的按钮 -->
<button id="openDialogBtn">打开表单对话框</button>

<!-- 对话框遮罩层（半透明背景） -->
<div id="dialogOverlay" class="dialog-overlay"></div>

<!-- 带表单的对话框主体 -->
<div id="formDialog" class="dialog-container">
    <div class="dialog-header">
        <h3>提交用户信息</h3>
        <button id="closeDialogBtn" class="close-btn">&times;</button>
    </div>
    <div class="dialog-body">
        <form id="userForm">
            @* MVC防CSRF验证令牌，必须加上 *@
            @Html.AntiForgeryToken()
            
            <div class="form-group">
                <label for="userName">姓名:</label>
                <input type="text" id="userName" name="userName" required>
            </div>
            <div class="form-group">
                <label for="userEmail">邮箱:</label>
                <input type="email" id="userEmail" name="userEmail" required>
            </div>
            <div class="form-actions">
                <button type="submit" class="submit-btn">提交</button>
                <button type="button" id="cancelBtn" class="cancel-btn">取消</button>
            </div>
        </form>
    </div>
</div>

把这段样式放在<style>标签里，或者单独的.css文件中（推荐后者，方便复用）：

/* 遮罩层：覆盖整个页面，半透明 */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* 默认隐藏 */
    z-index: 999;
}

/* 对话框容器：居中显示，带阴影 */
.dialog-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    display: none; /* 默认隐藏 */
    z-index: 1000;
}

.dialog-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.dialog-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.submit-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.cancel-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

这段代码负责对话框的打开、关闭，以及表单提交的AJAX请求（适配MVC后端）：

// 获取页面元素
const openDialogBtn = document.getElementById('openDialogBtn');
const closeDialogBtn = document.getElementById('closeDialogBtn');
const cancelBtn = document.getElementById('cancelBtn');
const dialogOverlay = document.getElementById('dialogOverlay');
const formDialog = document.getElementById('formDialog');
const userForm = document.getElementById('userForm');

// 打开对话框函数
function openDialog() {
    dialogOverlay.style.display = 'block';
    formDialog.style.display = 'block';
}

// 关闭对话框函数（复用逻辑）
function closeDialog() {
    dialogOverlay.style.display = 'none';
    formDialog.style.display = 'none';
    userForm.reset(); // 重置表单内容
}

// 绑定打开按钮事件
openDialogBtn.addEventListener('click', openDialog);

// 绑定关闭、取消按钮事件
closeDialogBtn.addEventListener('click', closeDialog);
cancelBtn.addEventListener('click', closeDialog);

// 点击遮罩层关闭对话框
dialogOverlay.addEventListener('click', closeDialog);

// 表单提交处理（AJAX发送到MVC控制器）
userForm.addEventListener('submit', async (e) => {
    e.preventDefault(); // 阻止默认表单跳转

    // 收集表单数据
    const formData = new FormData(userForm);
    const submitData = Object.fromEntries(formData);

    try {
        // 发送POST请求到MVC控制器的Action
        const response = await fetch('/Home/SubmitUserInfo', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 带上CSRF验证令牌
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            },
            body: JSON.stringify(submitData)
        });

        if (response.ok) {
            alert('提交成功！');
            closeDialog();
        } else {
            alert('提交失败，请重试！');
        }
    } catch (error) {
        console.error('提交出错:', error);
        alert('提交出错，请检查网络连接！');
    }
});

在你的控制器（比如HomeController）里添加处理表单提交的方法：

[HttpPost]
[ValidateAntiForgeryToken] // 验证CSRF令牌
public IActionResult SubmitUserInfo(string userName, string userEmail)
{
    // 这里写你的业务逻辑，比如保存到数据库
    // 示例：打印提交的数据
    Console.WriteLine($"姓名：{userName}，邮箱：{userEmail}");

    return Ok(); // 返回成功响应
}

这个示例完全用原生技术实现，没有依赖任何第三方包，和你在普通.html里写的逻辑几乎一致，只是适配了MVC的CSRF验证和后端请求。你可以根据自己的需求修改表单字段、样式和提交逻辑~

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