将参数从服务器对象传递到JavaScript的最佳方法

我使用表格呈现View。表中的每一行都是可以编辑的对象。所以，这张表的最后一列有一堆“编辑”按钮。当单击其中一个EDIT按钮时，JavaScript函数必须选取由当前行表示的对象的Id。最终，我想最终得到一个干净的HTML：不是“onclick”，“onmouseover”属性，也没有自定义的制作属性。下面我有两个例子，我不感到激动。任何好主意？将参数从服务器对象传递到JavaScript的最佳方法

实施例1：

View.aspx

<td> 
    <input type="button" value="EDIT" onclick="JSFunction(<%: ObjectId %>)" /> 
</td>

的JavaScript

function JSFunction(id) 
{ 
    //some code that does whatever with id 
}

实施例2：

View.aspx

<td> 
    <input type="button" value="EDIT" customAttribute="<%: ObjectId %>" /> 
</td>

的JavaScript

$('input[type=button]').click(function() { 
    var id = this.attr('customAttribute'); 
    //some code that does whatever with id 
});

附：如果你能想出一个更好的问题标题，请分享:)

来源

2011-02-23 Dimskiy

你想在哪里存储customAttribute数据？一旦我们知道它在哪里，我们可以计算出如何使用jQuery访问它。或者你想要将数据存储在服务器端，并通过AJAX获得它？ – mrtsherman 2011-02-23 23:02:14

自定义属性可以认为是干净的html。他们甚至在HTML5规范http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data-with-the-data-attributes – Vadim 2011-02-23 23:02:40

@mrtsherman - 我想要它被渲染到HTML服务器端，然后在客户端，JavaScript可以获取该值。 – Dimskiy 2011-02-23 23:20:10

我过去处理过的一种方法是使用html5数据属性。这是由jQuery 1.4.3及以上版本挑选的。

<table> 
    <tr class="row" data-rowInfo='{"Id": "1", "Name": "Jon"}'> 
     <td> 
      Row Id 1 
     </td> 
     <td> 
      <input type="button" value="Edit"/> 
     </td> 
    </tr> 
    <tr class="row" data-rowInfo='{"Id": "2", "Name": "Mark"}'> 
     <td> 
      Row Id 2 
     </td> 
     <td> 
      <input type="button" value="Edit"/> 
     </td> 
    </tr> 
    <tfoot> 
     <tr> 
      <td></td> 
     </tr> 
    </tfoot> 
</table>

然后在你的jQuery，你可以做到以下几点：

$("input[type=button]").click(function(){ 
    var rowInfo = $(this).parents("tr.row").data("rowInfo"); 
    //Do something with rowInfo.Id; 
});

通过使用数据属性，你可以有丰富的JSON对象可能包含不止一个属性的更多信息。另外，您只需声明一个数据属性即可保存所有相关信息。

这个工作对jsfiddle的实施例。

来源

2011-02-23 23:06:26

我之前玩过数据属性，但只在JavaScript里面玩过。这是以HTML/aspx构建它的正确方法吗？如果我FireBug这个元素，我会看到那个数据属性持有什么？ – Dimskiy 2011-02-23 23:18:27

+1我正要回答这样的事情，但你打败了我，它公平和正直:) – jimmystormig 2011-02-23 23:18:55

@Dimskiy我想你可以使用https://addons.mozilla.org/en-us在Firebug中检查数据元素/ firefox/addon/firequery/ – jimmystormig 2011-02-23 23:20:55

我这样做的方式是我有服务器呈现标识为<tr>标记，你可以构成自己的属性或存储它在id属性中。然后，如果您在td中有编辑按钮，则只需编写jQuery即可找到存储在<tr>标记中的标识。

HTML：

<tr myId="1"> 
<td> 
    <input type="button" value="EDIT" /> 
</td> 
</tr>

的jQuery：

$(function() { 
     $("input[type=button]").click(function() { 
      var id = $(this).parent().attr("myId"); 
     }); 
    });

虽然我平时一类“编辑”的分配给我的编辑按钮，而不是按类型选择他们（因为我有一个保存按钮在页面上）。

来源

2011-02-23 23:00:44

谢谢！我通常也会去上课。没有发布它在这里为简单起见。那么，如果有多于一个参数，你会怎么做？将它们粘贴到1个字符串中并使用基于分隔符的JavaScript进行解析？服务器：<％：Id +“|” +其他参数％> – Dimskiy 2011-02-23 23:15:19

@Dimskiy，如果有多个参数，我会选择Marks的答案。 – 2011-02-24 00:19:37

我会使用jQuery的元数据插件作为然后数据可以被嵌入在许多不同的方式上的任何元件。通常的方法是像这样将它添加到类中：

<input type="button" class="button { objectId : <%: ObjectId %> }" />

来源

2011-02-23 23:16:40

我通常尽量不要使用插件，除非我真的觉得我需要它们。例如，我肯定会使用jQuery UI DatePicker而不是自己实现一个。尽管谢谢你的建议！ – Dimskiy 2011-02-23 23:24:11

将参数从服务器对象传递到JavaScript的最佳方法

回答

相关问题