Razor页面：将JavaScript参数转换为C#参数

问题场景 #

当前代码中，@Url.Action是服务器端C#代码，运行时会生成固定参数idOfSubsub=3的请求地址，但需要传入JavaScript函数的参数idOfSubsub的值：

function AddSubSub(idOfSubsub) {
    $('#mainForm').dirtyForms('setClean');
    var mainForm = document.getElementById('mainForm');
    mainForm.action = '@Url.Action("AddSubSub", "GlobalTagging", new { idOfSubsub = 3})';
    mainForm.submit();
}

解决方案 #

方案1：拼接基础URL与参数

先通过Url.Action生成不带参数的基础请求地址，再在客户端用JavaScript拼接参数：

function AddSubSub(idOfSubsub) {
    $('#mainForm').dirtyForms('setClean');
    var mainForm = document.getElementById('mainForm');
    // 生成无参数的基础Action地址
    var baseUrl = '@Url.Action("AddSubSub", "GlobalTagging")';
    // 拼接参数，用encodeURIComponent处理特殊字符避免URL错误
    mainForm.action = `${baseUrl}?idOfSubsub=${encodeURIComponent(idOfSubsub)}`;
    mainForm.submit();
}

方案2：替换URL占位符

先让服务器生成带占位符的地址，再用JavaScript替换为实际参数值，适配REST风格等路由规则：

function AddSubSub(idOfSubsub) {
    $('#mainForm').dirtyForms('setClean');
    var mainForm = document.getElementById('mainForm');
    // 生成带占位符的路由地址
    var templateUrl = '@Url.Action("AddSubSub", "GlobalTagging", new { idOfSubsub = "PLACEHOLDER"})';
    // 替换占位符为实际参数
    mainForm.action = templateUrl.replace('PLACEHOLDER', encodeURIComponent(idOfSubsub));
    mainForm.submit();
}

方案3：使用表单隐藏字段传递

在表单中添加隐藏字段，提交前赋值参数，无需修改Action地址：

<!-- 在mainForm表单内添加隐藏字段 -->
<input type="hidden" name="idOfSubsub" id="hdnIdOfSubsub" />

function AddSubSub(idOfSubsub) {
    $('#mainForm').dirtyForms('setClean');
    // 给隐藏字段赋值
    document.getElementById('hdnIdOfSubsub').value = idOfSubsub;
    var mainForm = document.getElementById('mainForm');
    // 使用无参数的Action地址
    mainForm.action = '@Url.Action("AddSubSub", "GlobalTagging")';
    mainForm.submit();
}

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