Asp.Net 6 MVC中JS获取粘贴URL并点击按钮测试链接的问题

你的问题核心在于JavaScript的取值逻辑错误：document.getElementById('videolink1')获取的是DOM输入元素对象，而非输入框内的文本值，这和asp-for绑定没有关系——未提交的输入框完全可以通过前端JS直接获取值，不需要经过控制器中转。

基础修复：正确获取URL并打开 #

修改你的JavaScript代码，直接读取输入框的value属性即可：

function ViewURL() {
    // 获取输入框元素
    const urlInput = document.getElementById('videolink1');
    // 提取输入框的实际值并去除首尾空格
    const url = urlInput.value.trim();
    
    // 简单验证：确保URL不为空且符合浏览器的URL格式验证
    if (url && urlInput.validity.valid) {
        window.open(url, "_blank");
    } else {
        alert("请输入有效的视频链接");
    }
}

进阶优化：前端检测链接可用性 #

如果需要真正验证链接是否可访问（而非单纯打开预览），可以用fetch API在前端发起轻量请求检测，无需控制器介入：

async function TestVideoLink() {
    const urlInput = document.getElementById('videolink1');
    const url = urlInput.value.trim();
    
    if (!url || !urlInput.validity.valid) {
        alert("请输入有效的视频链接");
        return;
    }

    try {
        // 用HEAD请求检测（比GET更节省带宽）
        const response = await fetch(url, { method: 'HEAD' });
        if (response.ok) {
            alert("链接可用，即将打开预览");
            window.open(url, "_blank");
        } else {
            alert(`链接不可用，HTTP状态码：${response.status}`);
        }
    } catch (error) {
        // 跨域限制或网络错误时，降级为直接打开链接
        alert("无法直接检测链接有效性，将尝试打开预览");
        window.open(url, "_blank");
    }
}

注意：这种检测方式受**跨域资源共享（CORS）**限制，如果视频托管平台不允许跨域HEAD请求，会触发错误，此时降级为直接打开链接是合理的 fallback 方案。

如果使用进阶检测函数，只需修改按钮的onclick事件：

<input name="testvideolink" class="btn btn-group-sm btn-info" id="testvideolink" style="font-size:smaller" value="Test Video Link" onclick="TestVideoLink()">

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