Как мне сделать функцию Jquery, которая возвращает определенный вид?(НЕ частичный вид)

Question

У меня есть страница (просмотр заказа клиента) со списком товаров, сгенерированных из базы данных (товары в заказе на покупку клиента).Я хочу закодировать его так, чтобы, если пользователь щелкает строку (элемент div), он загружался в другом представлении, а также предоставлял данные, основанные на том, какая строка была нажата.

Другими словами, яхочу событие щелчка, которое отправляет значение ключа в контроллер и возвращает представление продукта вместе с моделью с соответствующими данными.

Теперь, если бы я делал все в одном представлении, я мог бы легко сделатьэто с помощью функции ajax, и просто вернуть частичное представление в соответствующий элемент.С этим я знаком.Но я хочу загрузить совершенно новый вид.Как мне это сделать?

Кроме того, по эстетическим соображениям я бы предпочел не превращать строку в обычную ссылку.Я бы предпочел использовать событие клика.

Answer 1

Я бы использовал атрибуты данных HTML в каждом DIV для хранения идентификатора продукта, например,

<div class="product-row" data-productid="123">Row content here<div>

, а затем использовал JQuery для создания обработчика щелчков, который переносит пользователя на соответствующую страницу.Вы можете использовать Razor HTML Helper для создания URL-адреса, но поскольку вы не знаете, на какой идентификатор они будут нажиматься раньше времени, вам придется использовать некоторую хитрость, чтобы добавить правильный идентификатор к URL-адресу:

$(document).on('click', '.product-row', function() {
    var productId = $(this).data('productid');
    var url = '@Url.Action("Details", "Product", new { Id = "productId" })';
    var url = url.replace("productId", productId);
    window.location.href = url;
});

Это будет перехватывать все клики по элементам div, создавать URL и перенаправлять пользователя на него.