将 asp.net mvc 模型变量传递给 html 数据属性答案

【问题标题】：passing asp.net mvc model variables to html data attribute将 asp.net mvc 模型变量传递给 html 数据属性
【发布时间】：2020-01-09 07:58:40
【问题描述】：

将mvc模型变量传递给html数据属性以创建json属性的最佳方法是什么。

基本上我想实现以下创建事件json

    <div class='fc-event' data-event='{"title":"my 
   event","id":8,"taskId":444}'>Hello</div>

我想在循环中将上述静态值替换为变量。以下不起作用

            @if (Model.Count() > 0)
                {
                    @foreach (var item in Model)
                    {
  <div class='fc-event' data-event= '{"title":@Html.DisplayFor(m => 
   item.Name)}'  > Test</div>

【问题讨论】：

标签： html asp.net-mvc variables custom-data-attribute

【解决方案1】：

您可以使用 JSON.NET 来序列化您需要的类：

public class myClass
{
int Id;
string Name;
string CategoryName;
}


myClass simpleExample= new myClass()  
{  
   Id=1,
   Name="Alex",
   CategoryName="Books" 
};  

// Serializing object to json data  
JavaScriptSerializer js = new JavaScriptSerializer();  
string jsonData = js.Serialize(simpleExample); // {"Id":"1","Name":"Alex","CategoryName":"Books"}

更多示例链接：link

【讨论】：

【解决方案2】：

你可以试试data-event='@Json.Encode(item)' 或者像这样构建你的字符串

data-event= '{"title":@Html.Raw(item.title),"id":@Html.Raw(item.title)}'

【讨论】：

【解决方案3】：

请尝试以下代码，

@{ foreach (var item in Model) { <div class='fc-event' data-Name="{title:@item.Name,id:@item.Id}">@item.Name</div> } }

【讨论】：

感谢确切的语法是
测试
。字符串双引号，INT 无双引号