Эквивалент Ajax.ActionLink со значениями маршрутов из JavaScript в сценарии мастер / подробности

Question

У меня есть сценарий мастер / деталь, где мастер - это сетка, а деталь - это частичное представление.Я могу добавить столбец в таблице со следующим кодом, чтобы загружать детали с помощью ajax при нажатии:

 @Ajax.ActionLink(("details", "ViewDetails", new { id = item.Id}, new AjaxOptions { 
            UpdateTargetId="ProjectDetails", 
            Url=Url.Action("ViewDetails"), 
            LoadingElementId="ProjectDetailsLoading", 
            LoadingElementDuration=2000 })

Но что, если я хочу показать детали при выборе строки?Ну, у меня есть событие OnRowSelected (), которое я могу подключить к клиенту и извлечь идентификатор, который мне нужно отправить обратно в действие ViewDetails, следующим образом:

<script type="text/javascript">
function onRowSelected(e) {
    ID = e.row.cells[0].innerHTML; 

    // now what?  How do I form the equivalent of Ajax.ActionLink?
}
</script>

Это сообщение: Ajax.Запуск ActionLink из Javascript? показывает, как использовать $ .get () для запуска обратной передачи ajax, но не показывает, как указать все (включая идентификатор, который мне нужно отправить) в эквиваленте на стороне сервера.Спасибо за вашу помощь, и я уверен, что ваше решение поможет многим людям!

Answer 1

Понятия не имею, о какой сетке и о каком событии onRowSelected вы говорите, но вы можете использовать атрибуты data- * HTML5 внутри первой ячейки вашей сетки .Например, вы можете поместить скрытый div или непосредственно внутри соответствующего <tr>, если у вас есть контроль над его рендерингом.На самом деле все, что вам нужно здесь, это URL-адрес действия.

Итак, вот пример со скрытым div, который вы можете поместить в первую ячейку каждой строки:

<div style="display:none;" data-url="@Url.Action("details", "ViewDetails", new { id = item.Id })"></div>

, и тогда все просто:

function onRowSelected(e) {
    var url = $('div', e.row.cells[0]).data('url');
    $('#ProjectDetailsLoading').show();
    $.ajax({
        url: url,
        type: 'GET',
        cache: false,
        success: function(result) {
            $('#ProjectDetails').html(result);
        }
        complete: function() {
            $('#ProjectDetailsLoading').hide();
        }
    });
}