如何在MVC中传递含JSON字符串属性的常规Model至视图？

你的方案完全可行，这是MVC场景下处理前端动态库存逻辑的常规思路之一，下面给你具体实现步骤和需要规避的误区：

首先确保后端赋值的ShirtAvailbality是合法的JSON数组字符串，推荐用序列化工具生成而非手动拼接，避免格式错误：

// 后端示例代码
using Newtonsoft.Json;
using System.Collections.Generic;

public class Shirt
{
    [StringLength(120)]
    public string Name { get; set; }
    public string ShirtAvailbality { get; set; }
}

// 构造模型并赋值
var stockList = new List<object>
{
    new { Color = "蓝色", Size = "S", InStock = true },
    new { Color = "蓝色", Size = "M", InStock = true },
    new { Color = "蓝色", Size = "L", InStock = true },
    new { Color = "蓝色", Size = "XL", InStock = false }
};

var shirt = new Shirt
{
    Name = "蓝色衬衫",
    ShirtAvailbality = JsonConvert.SerializeObject(stockList)
};

return View(shirt);

在Razor视图中，必须用Html.Raw()输出原始JSON字符串，避免Razor自动转义双引号导致前端解析失败：

<script>
// 将后端传递的JSON字符串转为JS对象
var stockData = @Html.Raw(Model.ShirtAvailbality);
</script>

假设页面按钮结构如下：

<button class="buy-btn" data-color="蓝色" data-size="S">购买（蓝色S）</button>
<button class="buy-btn" data-color="蓝色" data-size="M">购买（蓝色M）</button>
<button class="buy-btn" data-color="蓝色" data-size="L">购买（蓝色L）</button>
<button class="buy-btn" data-color="蓝色" data-size="XL">购买（蓝色XL）</button>

对应的JS逻辑：

$(function() {
    // 遍历所有购买按钮
    $('.buy-btn').each(function() {
        var $btn = $(this);
        var color = $btn.data('color');
        var size = $btn.data('size');
        
        // 匹配对应库存记录
        var stockItem = stockData.find(item => item.Color === color && item.Size === size);
        
        // 无库存则禁用按钮并修改文本
        if (stockItem && !stockItem.InStock) {
            $btn.prop('disabled', true).text('无库存');
        }
    });
});

• JSON格式合法性：手动拼接JSON字符串极易出现格式错误（比如用单引号、遗漏逗号），必须用JsonConvert.SerializeObject这类工具生成，确保是严格符合规范的JSON。
• HTML转义问题：如果直接写var stockData = @Model.ShirtAvailbality;，Razor会把双引号转义为"，导致JS无法解析为对象，一定要用Html.Raw()输出原始内容。
• 类型安全优化：当前ShirtAvailbality是字符串类型，后端无法直接校验库存结构的合法性。更严谨的做法是定义库存实体类，将属性改为List<StockItem>类型，后端直接传递对象列表，视图用Json.Encode()转为JSON：

  public class StockItem
  {
      public string Color { get; set; }
      public string Size { get; set; }
      public bool InStock { get; set; }
  }
  
  public class Shirt
  {
      [StringLength(120)]
      public string Name { get; set; }
      public List<StockItem> ShirtAvailbality { get; set; }
  }
  

  视图中使用：

  <script>
  var stockData = @Json.Encode(Model.ShirtAvailbality);
  </script>
  

  这种方式能让后端做类型校验，大幅降低出错概率，推荐使用。

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