Question

我有以下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/>";
});

这很有效，并且“替换”中的文字很有用。 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函数中？

修改这是添加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/>";
    });

jsfiddle sample

Answer 1

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

Answer 2

在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

2 个答案: