ASP.NET MVC список с jQuery-ссылками

Question

Хотя я только начинаю с ASP.NET MVC и jQuery, я даже не могу решить довольно простую задачу ...

Я использую строго типизированное представление для отображения списка продуктов, где каждый li-элемент получает уникальный идентификатор:

<ul id="product-list">    
  <% foreach (var item in Model.Products)
    { %>   

        <li <%= "id=\"product_" + item.Id + "\"" %> >  
            <div class="item">
               <%= item.Name %>  
            </div>
        </li>     

  <% } %>
</ul>

Теперь я хочу прикрепить к событию click каждого отдельного элемента li, чтобы, если пользователь щелкает элемент div, подробная информация о продукте загружалась асинхронно в область сведений.

Я знаю, как я могу использовать jQuery для вызова ajax-стиля метода действия, а также как отобразить json-результат, содержащий подробности о продукте, НО я понятия не имею, как я могу прикрепить щелчок - событие для каждого отдельного div, чтобы я мог использовать productId для загрузки деталей .

Может кто-нибудь дать мне несколько советов, как мне решить эту проблему?

Answer 1

Вы можете прикрепить обработчик события щелчка к каждому div:

$("#product-list>li div.item").click(function() {...});

В этой функции div будет div.Родительский li имеет интересующий вас атрибут "id":

$(this).parent().attr("id")

Оттуда вы сможете получить идентификатор продукта.jQuery поддерживает метод загрузки AJAX, который вы можете использовать в целевом div:

$("#results").load("/Product/Details/" + myProductId);

Answer 2

Предполагая, что все элементы списка на странице представляют товары:

$(function() {
    $('li').click( function() {
         var id = $(this).attr('id').replace(/product_/,'');
         $.ajax({
             url: '<%= Url.Action("details","product") %>/' + id,
             dataType: 'json',
             type: 'get',
             success: function(data) {
                  ...show the details...
             }
         });
    });
});

Answer 3

Вы можете использовать следующий jquery, чтобы связать событие click со всеми элементами внутри Li.и затем сделайте ваш Ajax-вызов.

$('#product-list li>div').bind('click',function(){

    // get the current li Id
    var currentLiId = $(this).parent().attr('id');

    alert(currentLiId);

    // make your ajax call here.
});

Answer 4

Одним из способов является использование атрибута Начинается с селектора , чтобы выбрать все элементы списка с атрибутом ID, начинающимся с 'product', и String.split , чтобы извлечь идентификатор продукта из Атрибут идентификатора нажатой LI, например:

$("li[id^=product]").click(function() {
    // split the ID at the '_' to get the product ID (demo)
    alert(this.id.split('_')[1]);

    // loadDetails would contain your ajax method or whatever,
    // it takes the product ID as its argument
    loadDetails(this.id.split('_')[1]);
});

Пример loadDetails() реализация с использованием $.get:

function loadDetails(id) {
    $.get('products.aspx', {id: id}, function(html) {
        $("#productView").html(html);
    });
}