ASP.NET MVC中CSHTML调用JS方法赋值Model属性异常问题

首先得说，你这里犯了一个很常见的新手错误——把服务器端Razor代码和客户端JavaScript代码的执行时机搞混了，这也是功能失效的核心原因。

为什么原来的代码不工作？ #

1. 执行时机错配：@Model.Category是服务器渲染页面时生成的静态值，页面一旦发送到浏览器，服务器端的Model就和前端没关系了。你在onclick里写@Model.Category = play()，Razor会把它渲染成类似onclick="= play()"的无效JS代码，浏览器执行时直接报错，根本不会调用你的play函数。
2. 表单参数是静态的：Html.BeginForm里的category = Model.Category是渲染时就固定在URL里的，点击按钮时这个参数不会因为JS的返回值而更新。
3. JS函数逻辑有漏洞：如果hideSpin为true，你的play()函数没有返回值，会默认返回undefined，即使逻辑正常，也没法把值传给服务器端的Model。

解决方案：用隐藏字段传递动态值 #

最稳妥的方式是用隐藏字段存储Category的值，点击按钮时用JS更新这个隐藏字段，提交表单时自动把值传给服务器。

修改后的CSHTML代码：

@using (Html.BeginForm("PlayGameRound", "Games", new { id = Model.GameId })) 
{ 
    @Html.AntiForgeryToken() 
    <!-- 添加隐藏字段绑定Category -->
    @Html.HiddenFor(m => m.Category, new { id = "categoryHidden" })
    <div class="form-group"> 
        <!-- onclick调用JS更新隐藏字段，不要混写服务器端代码 -->
        <input type="submit" value="Play" style="float: left" id="play" onclick="updateCategory()"/> 
    </div> 
}

对应的JavaScript代码：

function updateCategory() { 
    // 这里调整逻辑：如果hideSpin为false，才设置Category值（根据你的业务需求调整）
    if (!hideSpin) { 
        // 更新隐藏字段的值
        document.getElementById('categoryHidden').value = category;
    } 
    // 如果需要阻止表单提交（比如某些条件不满足），可以返回false
    // return false;
}

另一种方案：动态修改表单的Action URL #

如果你不想用隐藏字段，也可以动态修改表单的action属性，把category参数更新后再提交：

修改后的CSHTML：

@using (Html.BeginForm("PlayGameRound", "Games", new { id = Model.GameId }, new { id = "playForm" })) 
{ 
    @Html.AntiForgeryToken() 
    <div class="form-group"> 
        <input type="submit" value="Play" style="float: left" id="play" onclick="updateFormAction()"/> 
    </div> 
}

JavaScript代码：

function updateFormAction() { 
    if (!hideSpin) {
        const form = document.getElementById('playForm');
        // 替换URL中的category参数，注意编码特殊字符
        const newAction = form.action.replace(/category=[^&]+/, `category=${encodeURIComponent(category)}`);
        form.action = newAction;
    }
}

排查小技巧 #

以后遇到前端问题，第一时间打开浏览器的开发者工具控制台（F12），里面会显示JS语法错误或执行错误，能帮你快速定位问题。

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