title: Handling row selection from a simple grid using jquery and asp.net mvc
body: <p>Using a simple table and jquery, how would you manually handle selection on a simple table/grid using jquery?</p>
  
  <p>Here's what I've tried. You could check it out or provide your own way of selection. If there's something better or something you know that works, you don't have to read mine. I'd be happy to learn how others are doing it.</p>
  
  <hr />
  
  <p>So far, I've managed to add a <code>gridrowselected</code> class on the <code>tr</code> when the click event is called so that I'll know which row is currently selected. But I don't know how to pass the selected data back to the controller (or at least an index I placed on the row).</p>
  
  <p>Using a grid like this</p>
  
  <pre><code>&lt;table id="ProjectList" class="grid reduced-full-span-grid grid-header"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="long-col"&gt;
                  Title
              &lt;/th&gt;
              &lt;th class="medium-col"&gt;
                  Type
              &lt;/th&gt;
              &lt;th class="medium-col"&gt;
                  Priority
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;% for ( int i = 0; i &lt; Model.Projects.Count; ++i )
             { %&gt;
          &lt;tr class="gridrow"&gt;
              &lt;td&gt;
                  &lt;%= Html.HiddenFor( model =&gt; model.Projects[i].ProjectId ) %&gt;
                  &lt;%= Html.TextBoxFor( model =&gt; model.Projects[i].Title,
                      new { @readonly = "readonly" } )%&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;%= Html.TextBoxFor( model =&gt; model.Projects[i].ProjectType,
                      new { @readonly = "readonly" } )%&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;%= Html.TextBoxFor( model =&gt; model.Projects[i].Priority,
                      new { @readonly = "readonly" } )%&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;% } %&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and selection logic like this</p>
  
  <pre><code>$(function() {
      $('.gridrow').click(function() {
          $(this).siblings('.gridrow').removeClass('gridrow-selected');
          if ($(this).hasClass('gridrow-selected') == true) {
              $(this).removeClass('gridrow-selected');
          } else {
              $(this).addClass('gridrow-selected');
          }
          $(this).change();
      });
  });
  </code></pre>
  
  <p>I tried something like this</p>
  
  <pre><code>$(function() {
      $('#ProjectList .gridrow').click(function() {
          // Get row's index
          var projectId = $(this).find('input[name$=ProjectId]').val();
          // Remove the input if it already exists
          var parentForm = $(this).parents('form');
          parentForm.remove('input[name="selectedRows"]');
          // If it is selected, create the form. If it's not selected then the input just gets removed (the user must have clicked on it and deselected the row)
          if ($(this).hasClass('gridrow-selected') === true) {
              parentForm.append($('&lt;input&gt;', { type: "hidden", name: "selectedRows", value: projectId }));
          }
      });
  });
  </code></pre>
  
  <p>which I'm expecting to create a hidden input so that when I post, selectedRows gets passed onto the controller. But all it does is create the input, but the data still doesn't get passed to the controller.</p>