通过单击按钮将动态模型数据传递给javascript

我有下面的html表，其中包含两个按钮。 两个按钮都由同一个单击处理程序处理

 <div id="replaceme">

</div>
<table>
    <tr>
        <input name="edit" class="edit button" type="button" value="edit" />
    </tr>
     <tr>
        <input name="edit" class="edit button" type="button" value="edit" />
    </tr>
</table>

当我单击其中一个按钮时，将执行以下javascript：

$(document).on('click', '.edit', function (event) {
   document.getElementById("replaceme").innerHTML +="textshouldbedynamic <br/>";
});

$（文档）.on（'click'，'edit'，函数（事件）{
document.getElementById（“replaceme”）.innerHTML+=“textshouldbedynamic
”；
});

这样可以正常工作，“replaceme”div中的文本被正确替换

问题: 我想在一个通过asp.net mvc创建的表中执行此操作，同时在作为模型一部分的列表上进行迭代。 我现在喜欢将模型的一部分放入javascript函数中。 伪代码：

<tr>
    <input name="edit" class="edit button" type="button" value="edit" data="foo"/>
</tr>
 <tr>
    <input name="edit" class="edit button" type="button" value="edit" data="bar"/>
</tr>

如何将这些数据动态地输入到javascript函数中

<div id="replaceme">

</div>
<table>
    <tr>
        <input name="edit" class="edit button" type="button" value="edit" id='{"FirstValue":11,"SecondValue":42}' />
    </tr>
     <tr>
        <input name="edit" class="edit button" type="button" value="edit" id='{"FirstValue":22,"SecondValue":33}'/>
    </tr>
</table>



 $(document).on('click', '.edit', function (event) {
       document.getElementById("replaceme").innerHTML +="textshouldbedynamic <br/>";

        var obj = jQuery.parseJSON( this.id );

        document.getElementById("replaceme").innerHTML += obj.FirstValue + " " + obj.SecondValue + "<br/>";
    });

编辑： 添加json字符串并在javascript函数中解析它是正确的解决方案吗

<div id="replaceme">

</div>
<table>
    <tr>
        <input name="edit" class="edit button" type="button" value="edit" id='{"FirstValue":11,"SecondValue":42}' />
    </tr>
     <tr>
        <input name="edit" class="edit button" type="button" value="edit" id='{"FirstValue":22,"SecondValue":33}'/>
    </tr>
</table>



 $(document).on('click', '.edit', function (event) {
       document.getElementById("replaceme").innerHTML +="textshouldbedynamic <br/>";

        var obj = jQuery.parseJSON( this.id );

        document.getElementById("replaceme").innerHTML += obj.FirstValue + " " + obj.SecondValue + "<br/>";
    });

$（文档）.on（'click'，'edit'，函数（事件）{
document.getElementById（“replaceme”）.innerHTML+=“textshouldbedynamic
”；
var obj=jQuery.parseJSON（this.id）；
document.getElementById（“replaceme”）.innerHTML+=obj.FirstValue+“”+obj.SecondValue+“
”；
});

---

您是否考虑过使用类似KnockoutJs的客户端框架进行模板绑定？

在asp.net mvc上，在服务器端呈现的代码和js是客户端语言，您无法使javascript在服务器上运行。 不过，您可以在就绪状态下调用javascript在客户端运行。 假设您想要运行：

function foo(data){
//Do somthing
}

因此，您可以绑定到此调用的onready事件：

$(document).ready(function(){
   $('.edit button').each(function(){
      val data = $(this).attr('data');
      foo(data);
   });
});

---

这就是你需要的吗

我是javascript新手，目前喜欢在没有框架的情况下学习它。