如何在Razor视图中使用JavaScript拆分'@'字符？

在Razor视图里直接写JavaScript处理@字符时要特别注意——Razor会把@当作服务器端代码的起始标记，直接写split('@')会触发Razor解析错误，这里给你两种实用的解决方法：

方法1：用Razor转义符@@输出单个@ #

Razor规则里，连续两个@会被解析为客户端的单个@字符，所以你可以直接在JS代码里这么写：

// 获取输入框中的内容
const username = document.getElementById('txtUsername').value;
// 用@@让Razor最终输出单个@，实现拆分逻辑
const splitParts = username.split('@@'); // 客户端实际执行的是split('@')
console.log(splitParts); // 比如输入user@example.com会得到["user", "example.com"]

方法2：通过Razor变量传递@字符 #

如果觉得转义符不够直观，也可以在服务器端定义一个包含@的变量，再输出到JS中：

@{
    // 服务器端定义存储@字符的变量
    string atSymbol = "@";
}

<script>
const username = document.getElementById('txtUsername').value;
// 用Html.Raw确保Razor直接输出字符，不做额外转义
const splitParts = username.split('@Html.Raw(atSymbol)');
console.log(splitParts);
</script>

结合你的视图代码的完整示例 #

我还帮你调整了原始视图里标签顺序错误的问题（原代码把</head>和<body>写在了<html>前面），整合后的完整片段如下：

@{ ViewBag.Title = "Index"; Layout = null; }
<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewBag.Title</title>
    <!-- 这里可以添加你的CSS引用 -->
</head>
<body>
<div id="login-page">
    <div class="container">
        <div class="form-login">
            <h2 class="form-login-heading">sign in now</h2>
            <div class="login-wrap">
                <input type="text" id="txtUsername" class="form-control" placeholder="User ID" autofocus>
                <br />
                <input type="password" id="txtPassword" class="form-control" placeholder="Pass...">
                <button onclick="handleSplitUsername()" class="btn btn-primary mt-2">测试拆分</button>
            </div>
        </div>
    </div>
</div>

<script>
function handleSplitUsername() {
    const username = document.getElementById('txtUsername').value;
    // 使用转义符的方式实现拆分
    const splitParts = username.split('@@');
    if (splitParts.length === 2) {
        alert(`用户名: ${splitParts[0]}\n域名: ${splitParts[1]}`);
    } else {
        alert("输入内容中未包含@字符");
    }
}
</script>
</body>
</html>

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