Лучший способ передать параметры из серверных объектов в JavaScript - PullRequest
Новая
       48

Лучший способ передать параметры из серверных объектов в JavaScript

3 голосов
/ 24 февраля 2011

Я отображаю представление с таблицей в нем. Каждая строка таблицы - это объект, который можно редактировать. Итак, последний столбец этой таблицы содержит несколько кнопок «РЕДАКТИРОВАТЬ». При нажатии на одну из этих кнопок РЕДАКТИРОВАНИЯ функция JavaScript должна получить идентификатор объекта, представленного текущей строкой. В конечном итоге я хотел бы получить чистый HTML: без атрибутов «onclick», «onmouseover» и без пользовательских атрибутов. Ниже у меня есть 2 примера, которыми я не в восторге. Есть хорошие идеи?

Пример 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
});

P.S. Если вы могли бы придумать лучший вопрос, пожалуйста, поделитесь:)

Ответы [ 3 ]

6 голосов
/ 24 февраля 2011

Один из способов, которым я занимался в прошлом, это использовать атрибут данных 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;
});

Используя атрибут data, вы можете получить богатый объект json, который может содержать больше информации, чем просто атрибут. Кроме того, вам нужно только объявить один атрибут данных для хранения всей необходимой информации.

Пример работы с jsfiddle .

1 голос
/ 24 февраля 2011

То, как я это делаю, - сервер отображает идентификатор в тег <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");
        });
    });

Хотя я обычно назначаю класс «edit» своим кнопкам редактирования, а не выбираю их по типу (так как у меня есть кнопка сохранения на странице).

0 голосов
/ 24 февраля 2011

Я бы использовал плагин метаданных jQuery, так как тогда данные могут быть встроены различными способами в любой элемент.Обычный способ - добавить его в класс следующим образом: 

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