1

Добрый день. Как сделать, чтобы при нажатии на стоку в таблице (в любом месте строки), она опускалась и под ней появлялись детали (либо просто открывалась страница редактирования)?

Имеется такая страница ASP, с генерацией таблицы в цикле foreach:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="Tracker.Models" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
<%=ViewData["Title"]%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="/Scripts/listing.js" type="text/javascript"></script>
<h2><%=ViewData["Title"]%></h2>
<%=Html.ActionLink("Add New", "Add")%>
<table>
<tr>
<td>Title</td>
<td>Created Date</td>
<td>Desciption</td>
<td>ID</td>
</tr>
<%
foreach (Task t in (IEnumerable<Task>) ViewData["Tasks"])
{%>
<tr>
<input type="hidden" class="rowID" value="<%=t.TaskId%>"/>
<td><%=t.Title%></td>
<td><%=t.CreatedOn.ToShortDateString()%></td>
<td><%=t.Text%></td>
<td><%=t.TaskId%></td>
</tr>
<%
}%>
</table>
</asp:Content>

И такая JS:

<script>
$(document).ready(function() {
$('table.values tr').click(function() {
$.post("/Task/Edit/", { taskID: $(this).find('input.rowID').val() });
});
</script>

В строке:

<input type="hidden" class="rowID" value="<%=t.TaskId%>"/>

файла ASP должен передаваться параметр t.TaskId в скрипт. Скрипт, в свою очередь, должен принимать значение, и открывать страницу редактирования передавая в нее Id выбранной строки. Но этот код не работает. Помогите разобраться, что именно не правильно написано? При запуске приложения, нет никакой реакции на событие .click по строчкам таблицы.

Что бы поймать onClick нужен javascript, я правильно понимаю? Иначе как отловить нажатие на нужной строке динамически созданной таблицы?

Как по событию onClick отправлять ajax get запрос к созданному action в контроллере?

2 ответа 2

2
  1. Создаешь partial view с теми даными которые нужно показать
  2. Делаешь Action в контроллере который возвращает это вью и принимает нужные аргументы
  3. По событию onClick должен отправляться ajax get запрос к созданному action в контроллере.
  4. Опять же с помощью jQuery вставляешь полученный кусок html в нужное место на форме. Можно даже без лишних трудностей использовать простенькую анимацию))

Если данные известны с самого начала то просто под той строкой создаешь вторую с уже готовыми данными и скрываешь. потом по событию onClick просто показываешь с помощью jQuery

Про jQuery можно прочитать здесь jquery.page2page.ru

Привязка клика к строке таблицы

$(document).ready(function(){
  $('tr#1').click(function(){
    alert('Вы нажали на строку с id равным 1');
  });
});
1
$(document).ready(function () {
    $('table.values tr').bind('click', function () {
        var taskID = $(this).find('input.rowID').val();
        $.get("/Task/Edit/", {
            id: taskID
        }, function () {
            document.location.href = '/Task/Edit/' + taskID;
        });
    });
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.