ASP.NET MVC View и jQuery.data ()

Question

Сценарий:

У меня есть частичное представление, которое используется в нескольких местах моего приложения ASP.NET MVC. Частичное представление содержит список «объектов» для выбора, то есть что-то похожее на:

<ul>
    <%
        foreach (var person in Model.Persons)
        {
    %>
    <li><a href="#" class="person">
        <%= person.Name %></a></li>
    <%
        }        
    %>
</ul>

Каждый человек имеет уникальный идентификатор.

Я использую jQuery для своих материалов AJAXy, и до сих пор я добавлял функции щелчков к ссылкам следующим образом (хотя он имеет очень не-jQuery-подобный запах)

<a href="#" class="person" onclick="return selectPerson('<%= person.Id %>');">
            <%= person.Name %></a>

Это работает и все, однако также требуется, чтобы я имел функцию javascript selectPerson () на каждой странице, используя это частичное представление (поскольку то, что происходит в select, является "особенным" для каждого представления).

Я только что наткнулся на метод jQuery Data () , и, похоже, он способен удовлетворить мои потребности, т. Е. В представлениях, использующих мое представление списка частичных лиц, я мог бы сделать что-то вроде:

$("a.person").click(function() { alert($(this).data("personId")); return false; });

Если у меня есть идентификатор, связанный со свойством data "personId" в элементах DOM.

Теперь у меня проблема в том, что я выполняю серверную часть рендеринга HTML, но присоединение свойства данных personId к элементам DOM должно выполняться клиентской стороной. То есть либо во время цикла foreach, либо в отдельном цикле JS, но я бы предпочел этого избежать.

Может быть, я иду по неверному пути, я не знаю, но, может быть, у кого-то есть решение для этого или, может быть, лучший подход?

Редактировать (обновлено для ясности):

Каким-то образом выполнить

$ ( выберите «текущий» якорь ). Data ("personId", установить значение person.Id );

Answer 1

Почему бы вам не "сбросить" свой идентификатор в поле идентификатора ссылки.

<a href="#" class="person" id="person_<%= person.Id %>"><%= person.Name %></a>

Теперь, когда у вас есть идентификатор, вы можете использовать jQuery, чтобы прикрепить событие click к каждой ссылке с классом person, как показал Дарин:

jQuery(function() {
    jQuery('a.person').click(function(evt) {
        return selectPerson(this);
    });
});

Теперь в функции selectPerson или в указанной выше функции вы должны получить id элемента (который будет похож на person_234) и снять часть person_, и все готово.

Answer 2

Вы можете использовать плагин jQuery Metadata. в основном он использует данные json в свойстве класса, которое автоматически сериализуется при доступе ..

Но это добавляет много разметки, хотя ..

см. http://plugins.jquery.com/project/metadata для справки.

Приветствия

Erik

Answer 3

Лучшим подходом было бы использовать ненавязчивый JavaScript. Вы генерируете свою ссылку как обычно:

<a class="person" href="http://example.com/persons/select?id=<%= person.Id %>"><%= person.Name %></a>
<!-- or use helpers to generate the link -->
<%= Html.RouteLink(person.Name, "Default", new RouteValueDictionary(new { controller = "Persons", action = "Select", id = person.Id })) %>

и затем изменить его:

jQuery(function() {
    jQuery('a.person').click(function(evt) {
        jQuery.ajax({
            url: this.href,
            success: function(data) {
                // Do something with the returned content
            }
        });
    });
});

Я не совсем понял, зачем вам использовать JQuery.data ()