ASP.NET MVC中如何在jQuery与模型间传递int属性及int数组属性

1. 将Model属性值赋值给jQuery变量 #

方法一：直接在Razor视图中输出Model值 #

利用Razor语法直接把Model值注入到脚本中，注意数组需要转成未转义的JSON格式：

<script>
    // 赋值单个int属性
    let denomValue = @Model.DenomValue;
    // 赋值int数组属性，使用Html.Raw避免JSON被转义
    let denomSlips = @Html.Raw(Json.Encode(Model.DenomSlips));
</script>

方法二：通过隐藏域存储+jQuery读取 #

先在视图中添加对应隐藏域存储Model值，再用jQuery读取：

<!-- 存储单个属性 -->
<input type="hidden" id="hdnDenomValue" value="@Model.DenomValue" />
<!-- 存储数组属性 -->
<input type="hidden" id="hdnDenomSlips" value="@Html.Raw(Json.Encode(Model.DenomSlips))" />

<script>
    $(function() {
        // 读取单个值，转成int类型
        let denomValue = parseInt($("#hdnDenomValue").val());
        // 读取数组，解析JSON字符串
        let denomSlips = JSON.parse($("#hdnDenomSlips").val());
    });
</script>

2. 修改jQuery变量后回传给Model #

方式一：表单同步提交 #

依赖ASP.NET MVC的模型绑定规则，表单控件name需与Model属性名完全匹配：

<form id="denomForm" action="/YourController/YourAction" method="post">
    <!-- 单个属性隐藏域 -->
    <input type="hidden" name="DenomValue" id="hdnDenomValue" />
    <!-- 数组属性用索引式命名，确保模型绑定识别 -->
    @for (int i = 0; i < Model.DenomSlips.Length; i++)
    {
        <input type="hidden" name="DenomSlips[@i]" id="hdnDenomSlips_@i" />
    }
    <button type="button" onclick="DataTest()">提交</button>
</form>

<script>
function DataTest() {
    // 模拟修改后的变量值
    let updatedDenomValue = 20;
    let updatedDenomSlips = [5, 10, 15];

    // 更新单个属性隐藏域
    $("#hdnDenomValue").val(updatedDenomValue);
    // 更新数组对应的隐藏域
    updatedDenomSlips.forEach((val, index) => {
        $(`#hdnDenomSlips_${index}`).val(val);
    });

    // 提交表单
    $("#denomForm").submit();
}
</script>

控制器接收代码：

[HttpPost]
public ActionResult YourAction(DenominationModel model)
{
    // 此处可获取修改后的model属性值
    return View(model);
}

方式二：AJAX异步提交 #

无需隐藏域，直接将jQuery变量序列化为JSON传递：

<script>
function DataTest() {
    // 模拟修改后的变量值
    let updatedDenomValue = 20;
    let updatedDenomSlips = [5, 10, 15];

    $.ajax({
        url: "/YourController/YourAction",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
            DenomValue: updatedDenomValue,
            DenomSlips: updatedDenomSlips
        }),
        success: function() {
            console.log("数据提交成功");
        },
        error: function(xhr) {
            console.error("提交失败：" + xhr.responseText);
        }
    });
}
</script>

控制器接收代码（需添加[FromBody]特性）：

[HttpPost]
public ActionResult YourAction([FromBody] DenominationModel model)
{
    // 处理接收的model数据
    return Json(new { success = true });
}

关键注意事项 #

• 确保DenominationModel的属性为public，否则模型绑定无法识别。
• 数组传递时，表单提交需用DenomSlips[@i]的索引式命名；AJAX提交需严格匹配JSON结构。
• 输出JSON时必须使用Html.Raw，避免Razor自动转义JSON字符串导致解析失败。

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