Good day. How to make it so that when you click on the stock in the table (anywhere in the line), it goes down and details appear under it (or just the edit page opens)?

There is such an ASP page, with a table generated in a foreach loop:

<%@ 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>

And such a JS:

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

In line:

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

the ASP file must pass the t.TaskId parameter to the script. The script, in turn, must take a value, and open the edit page by passing the Id of the selected line to it. But this code does not work. Help me figure out what exactly is not written correctly? When you start the application, there is no reaction to the .click event along the lines of the table.

To catch onClick you need javascript, I understand correctly? Otherwise, how to catch a click on the desired row of a dynamically created table?

How on event onClick to send ajax get request to the created action in the controller?

    2 answers 2

    1. Create a partial view with the data you need to show.
    2. You do Action in the controller which returns it I twist and accepts the necessary arguments
    3. On the onClick event, ajax get request should be sent to the created action in the controller.
    4. Again, using jQuery, you insert the resulting html piece in the right place on the form. You can even without any difficulty use a simple animation))

    If the data is known from the very beginning, then just under that line you create the second one with the already prepared data and hide it. then on the onClick event you simply show with jQuery

    About jQuery you can read here jquery.page2page.ru

    Snap click to table row

     $(document).ready(function(){ $('tr#1').click(function(){ alert('Вы нажали на строку с id равным 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; }); }); });