MVC 5中如何将ViewBag值传递给JavaScript函数？

嘿，折腾7小时肯定够闹心的！你的问题其实出在JavaScript获取隐藏元素的方式上——你拿到了元素对象，但没取它的value属性，咱们马上改好：

方法1：修正隐藏元素的JS获取逻辑 #

你的隐藏元素写法是没问题的：

@Html.Hidden("Superman", (string)ViewBag.c1)

但原来的JS函数只拿到了DOM元素本身，不是里面存的值，修改成这样：

function getValue1() {
    // 先获取隐藏元素
    const hiddenInput = document.getElementById("Superman");
    // 先判断元素是否存在，再取value转成浮点数，避免报错
    return hiddenInput ? parseFloat(hiddenInput.value) : 0;
}

为什么要加.value？因为document.getElementById("Superman")返回的是整个<input> DOM对象，只有通过.value才能访问到它存储的"0.30"字符串，之后用parseFloat转成数字就没问题了。

方法2：直接在JS中引用ViewBag（更简单） #

如果不需要用隐藏元素存值，其实可以直接把ViewBag的值注入到JS里，省去DOM操作的步骤：

function getValue1() {
    // 直接把ViewBag的值注入到JS中
    return parseFloat("@ViewBag.c1");
}

要是你的ViewBag值可能包含特殊字符（比如引号、换行），为了避免JS语法错误，建议用Json.Encode转义一下：

function getValue1() {
    return parseFloat(@Html.Raw(Json.Encode(ViewBag.c1)));
}

这个方法更直接，适合静态传递值的场景。

两种方法选哪个？如果后续需要动态修改这个值（比如用户操作后更新隐藏元素），用方法1；如果只是把ViewBag的静态值传给JS，方法2更省心。

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